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

 

　　映入眼帘的，咱们可以看到说 Vue 是渐进式 JavaScript 框架，英文叫做“Progressive JavaScript Framework”。当然，你现在并不需要知道什么是渐进式 JavaScript 框架。

 

　　那么接下来，咱们再进一步看看 Vue 的官方是如何来介绍自己的呢。

 

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

 

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

 

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

 

　　易用：只要你掌握了 HTML、CSS 和 JavaScript，就可以直接来学习 Vue 框架了。灵活：Vue 提供一个核心库，类似于 jQuery。依赖自身不断繁荣的生态系统，类似于 jQuery 的插件库一样，可以在一个库和一套完整框架之间自如伸缩。高效：核心库文件压缩之后只有 20KB，远比 jQuery 的压缩版文件小得多。并且还提供超快的虚拟 DOM。

 

　　总体来讲，Vue 的官方就是告诉你，用我这个框架要求很低，会HTML、CSS 和 JavaScript 就可以了。而且，我这个框架的核心库 Vue.js 文件很小，你使用的时候不会对你现在的项目造成多大的影响。

 

　　裤裆里着火，当然了！我们现在也没用 Vue 来开发个网页，所以它所谓的优势对于咱们现阶段来说只不过自说自话而已。是不是这个样子，咱们还需要在具体的案例中体验。

 

　　关于 Vue 咱们说了这么多，接下来再来说说关于 MVVM 吧。MVVM 呢，其实是一种开发模式。当然，这么说估计你也是一脸懵逼的。

 

　　心急吃不了热豆腐，且听我慢慢道来——

 

　　MVVM 其实表示的是 View-ViewModel-Model，就是视图层-视图模型层-模型层。View是作为视图层，简单来说可以把它理解为HTML页面；Model 是作为模型层，它是负责处理业务逻辑以及和服务器端进行交互的；ViewModel 是作为视图模型层，也就是 Vue 框架所起到的作用了，主要是作为 View 层和 Model 层之间的通信桥梁。

 

　　说到这呢，可能你会产生个疑问，Vue 和 MVVM 之间是个什么关系呢？

 

　　其实，Vue 框架就是一个典型的 MVVM 模型的框架。在解释 MVVM 模式的时候，咱们也说了，Vue 框架其实就是起到 MVVM 模式中的 ViewModel 层的作用。

 

　　这么说还是会比较抽象，接下来咱们用代码来进一步解释 Vue 和 MVVM 之间的关系。

 

　　如果你使用过 jQuery 的话，那你对 DOM 操作、事件绑定一定不陌生啦！比如咱们现在通过 jQuery 来为指定的 DOM 添加一个 button 按钮，并为它绑定 click 事件，具体的代码就像下面这样：

 

　　上面这段代码的逻辑并不复杂。但是这样的代码最大的问题就是负责视图的 HTML 代码和负责业务逻辑的 JavaScript 代码耦合在一起。随着功能的不断完善和增加，直接操作 DOM 会变得越来越麻烦。

 

　　像 Vue 这样的 MVVM 框架将视图层和模型层有效地分离开来，这样你只需要关心数据就行啦！

 

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

 

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