共计 2075 个字符，预计需要花费 6 分钟才能阅读完成。
书接上文，上一回咱们说到了如今的前端江湖早已是框架三分天下的格局。接下来，咱们就要说到主角 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 = $('<button> 点我点我点我 </button>');
btn.on('click', function(){console.log('你终于点中了我...');
});
$('#app').append(btn);
} 上面这段代码的逻辑并不复杂。但是这样的代码最大的问题就是负责视图的 HTML 代码和负责业务逻辑的 JavaScript 代码耦合在一起。随着功能的不断完善和增加，直接操作 DOM 会变得越来越麻烦。
像 Vue 这样的 MVVM 框架将视图层和模型层有效地分离开来，这样你只需要关心数据就行啦！
<script src="https://unpkg.com/vue"></script>
<div id="app">
<button v-if="showBtn" v-on:click="handleClick"> 点我点我点我 </button>
</div>
<script>
new Vue({
el: '#app',
data: {showBtn: true},
methods: {handleClick: function(){console.log('你终于点中了我...');
}
}
});
</script>上面这段代码咱们会发现，负责视图的 HTML 代码和负责业务逻辑的 JavaScript 代码有效地分离开来。之所以能做到这一点，主要是依靠 Vue 框架才得以实现的。
所以，Vue 框架就是充当了 MVVM 开发模式中的 ViewModel 层，负责 View 和 Model 之间通信的桥梁。咱们在使用 Vue 框开发的时候，只需要关心 View 层的 HTML 代码和 Model 层的 JavaScript 逻辑就可以了。
