本书接上文。上次我们说了，现在的前端江湖早就分为框架三部分。接下来，我们就来说说主角Vue。在说真正的Vue内容之前，先说说Vue和MVVM之间的那些事。什么是Vue如果想近距离了解什么是Vue，其实很简单。我们只需要访问Vue的官网即可。定睛一看，Vue是一个渐进式JavaScript框架，英文叫做“ProgressiveJavaScriptFramework”。当然，您现在不需要知道什么是渐进式JavaScript框架。那么接下来，让我们仔细看看Vue官方是如何介绍自己的。Vue（读作/vju?/，类似于视图）是一个用于构建用户界面的渐进式框架。与其他大型框架不同，Vue被设计为自下而上逐层应用。Vue的核心库只专注于视图层，不仅易于使用，而且易于与第三方库或现有项目集成。另一方面，当与现代工具链和各种支持库相结合时，Vue也完全有能力为复杂的单页应用程序提供支持。这个定义先不过多解释，因为就算解释了，估计你现在也很难知道它在说什么！如果还不满意，我们再看一个Vue官方提供的视频。Vue的特点根据Vue官方提供的资料，我们可以看出Vue的主要特点集中在三点：易用性：只要掌握HTML、CSS和JavaScript，就可以直接学习Vue框架。灵活：Vue提供了一个核心库，类似于jQuery。依托自身蓬勃发展的生态系统，类似于jQuery的插件库，可以在一个库和一个完整的框架之间自由扩展。高效：核心库文件压缩后只有20KB，比jQuery压缩版小很多。并且还提供超快的虚拟DOM。一般来说，Vue官方就是告诉大家，使用我这个框架的要求很低，会HTML、CSS、JavaScript就可以了。而且我这个框架的核心库Vue.js文件很小，在你使用的时候对你现在的项目影响不大。当然是裤裆里的火！我们现在不使用Vue开发网页，所以它所谓的优点只是现阶段跟我们说说而已。是不是这样，还需要具体案例去体会。什么是MVVMVue说了这么多，接下来说说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按钮，并绑定点击事件。具体代码如下：if(showBtn){varbtn=$('');btn.on('点击',function(){console.log('你终于打到我了...');});$('#app').append(btn);}上面代码的逻辑并不复杂。但这样的代码最大的问题是负责视图的HTML代码与负责业务逻辑的JavaScript代码耦合在一起。随着功能的不断完善和增加，直接操作DOM会越来越麻烦。Vue等MVVM框架有效地将视图层与模型层分离，让您只关心数据！
