Vue核心50讲 | 第一回：Vue 与 MVVM 之间那些事儿

booster 发布于2019-08-05 17:12 / 630人阅读

摘要：在说真正的内容之前，咱们还要先来说说与之间的那些事儿。的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。高效核心库文件压缩之后只有，远比的压缩版文件小得多。这么说还是会比较抽象，接下来咱们用代码来进一步解释和之间的关系。

书接上文，上一回咱们说到了如今的前端江湖早已是框架三分天下的格局。接下来，咱们就要说到主角 Vue 了。在说真正的 Vue 内容之前，咱们还要先来说说 Vue 与 MVVM 之间的那些事儿。

什么是Vue

想要近距离了解什么是 Vue，其实特别简单。咱们只需要访问 Vue的官方网站就可以了。

映入眼帘的，咱们可以看到说 Vue 是渐进式 JavaScript 框架，英文叫做“Progressive JavaScript Framework”。当然，你现在并不需要知道什么是渐进式 JavaScript 框架。
那么接下来，咱们再进一步看看 Vue 的官方是如何来介绍自己的呢。

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

关于这个定义咱们不做过多的解释了，因为就算解释估计你现在也很难知道它在说个啥！如果你不满足，那我们就再看一个 Vue 官方提供的视频吧。

Vue的特点

根据 Vue 的官方提供的信息，咱们可以看到 Vue 主要的特点集中在三点：

易用：只要你掌握了 HTML、CSS 和 JavaScript，就可以直接来学习 Vue 框架了。

灵活：Vue 提供一个核心库，类似于 jQuery。依赖自身不断繁荣的生态系统，类似于 jQuery 的插件库一样，可以在一个库和一套完整框架之间自如伸缩。

高效：核心库文件压缩之后只有 20KB，远比 jQuery 的压缩版文件小得多。并且还提供超快的虚拟 DOM。

总体来讲，Vue 的官方就是告诉你，用我这个框架要求很低，会HTML、CSS 和 JavaScript 就可以了。而且，我这个框架的核心库 Vue.js 文件很小，你使用的时候不会对你现在的项目造成多大的影响。
裤裆里着火，当然了！我们现在也没用 Vue 来开发个网页，所以它所谓的优势对于咱们现阶段来说只不过自说自话而已。是不是这个样子，咱们还需要在具体的案例中体验。

什么是 MVVM

关于 Vue 咱们说了这么多，接下来再来说说关于 MVVM 吧。MVVM 呢，其实是一种开发模式。当然，这么说估计你也是一脸懵逼的。
心急吃不了热豆腐，且听我慢慢道来~
MVVM 其实表示的是 View-ViewModel-Model，就是视图层-视图模型层-模型层。View是作为视图层，简单来说可以把它理解为HTML页面；Model 是作为模型层，它是负责处理业务逻辑以及和服务器端进行交互的；ViewModel 是作为视图模型层，也就是 Vue 框架所起到的作用了，主要是作为 View 层和 Model 层之间的通信桥梁。

Vue 与 MVVM

说到这呢，可能你会产生个疑问，Vue 和 MVVM 之间是个什么关系呢？
其实，Vue 框架就是一个典型的 MVVM 模型的框架。在解释 MVVM 模式的时候，咱们也说了，Vue 框架其实就是起到 MVVM 模式中的 ViewModel 层的作用。
这么说还是会比较抽象，接下来咱们用代码来进一步解释 Vue 和 MVVM 之间的关系。
如果你使用过 jQuery 的话，那你对 DOM 操作、事件绑定一定不陌生啦！比如咱们现在通过 jQuery 来为指定的 DOM 添加一个 button 按钮，并为它绑定 click 事件，具体的代码就像下面这样：

if (showBtn) {
  var btn = $("");
  btn.on("click", function(){
      console.log("你终于点中了我...");
  });
  $("#app").append(btn);
}

上面这段代码的逻辑并不复杂。但是这样的代码最大的问题就是负责视图的 HTML 代码和负责业务逻辑的 JavaScript 代码耦合在一起。随着功能的不断完善和增加，直接操作 DOM 会变得越来越麻烦。
像 Vue 这样的 MVVM 框架将视图层和模型层有效地分离开来，这样你只需要关心数据就行啦！

上面这段代码咱们会发现，负责视图的 HTML 代码和负责业务逻辑的 JavaScript 代码有效地分离开来。之所以能做到这一点，主要是依靠 Vue 框架才得以实现的。

所以，Vue 框架就是充当了 MVVM 开发模式中的 ViewModel 层，负责 View 和 Model 之间通信的桥梁。咱们在使用 Vue 框开发的时候，只需要关心 View 层的 HTML 代码和 Model 层的 JavaScript 逻辑就可以了。

云服务器专线服务 VUE防抖与节流第一回 Vue_Vue Vue

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/59465.html

Vue核心50讲 | 第一回：Vue 与 MVVM 之间那些事儿

摘要：在说真正的内容之前，咱们还要先来说说与之间的那些事儿。的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。高效核心库文件压缩之后只有，远比的压缩版文件小得多。这么说还是会比较抽象，接下来咱们用代码来进一步解释和之间的关系。书接上文，上一回咱们说到了如今的前端江湖早已是框架三分天下的格局。接下来，咱们就要说到主角 Vue 了。在说真正的 Vue 内容之前，咱们还要先来说...

chanthuang 2019-08-23 17:58 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

Terry_Tai 2019-08-05 17:19 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0