01第1章第1节Vue.js入门(1-3节)

第1章：Vue.js入门《Vue应用程序开发》

010203005Part11.1初识Vue.jsPart21.2使用Vue.js理解MVVM模式Part31.3Vue.js的响应式理解目录CONTENTS1.1初识Vue.js1.1.1什么是Vue.jsVue（读音/vjuː/）是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。渐进式框架的优点是灵活、易用和高效。Vue.js颠覆了传统前端开发模式，提供了现代Web开发中常见的高级功能。1.1初识Vue.js颠覆了传统的前端开发模式，不需要频繁操作DOM元素，通过数据的双向绑定来更新页面，有更多的时间去思考业务逻辑。下面我们通过两段代码了比较传统开发模式和使用Vue.js开发的不同。1.1.2为什么要使用Vue.js<divid="output"></div><buttonid="increment">Increment</button>varcounter=0;$(document).ready(function(){ var$output=$('#output'); $('#increment').click(function(){ counter++; $output.html(counter); }); $output.html(counter);});<divid="app"> <div>{{ counter }}</div> <buttonv-on:click="increment">Increment</button></div>newVue({ el:'#app', data:{ counter: 0 }, methods:{ increment:function(){ this.counter++; } }});1.轻量高效2.组件化开发3.前端路由4.状态管理5.虚拟DOM1.1初识Vue.jsVue.js还有以下主要特点：1.1初识Vue.js在上面的代码中我们提到了Vue.js在设计上使用了MVVM模式。MVVM全称是ModelViewViewModel，它本质上就是MVC的改进版。MVVM模式使用的是数据绑定基础架构，它可以轻松构建视图UI的必要元素。ViewModel负责取出Model的数据同时帮忙处理View中由于需要展示内容而涉及的业务逻辑。1.1.3MVVM模式1.3Vue.js的响应式理解从图中可以看出：1.Model与ViewModel之间的双向关系（1）Model通过Ajax通信，发送数据给ViewModel。（2）ViewModel也可以通过Ajax通信，发送请求给Model。2.ViewModel与View之间的双向关系（1）ViewModel中的数据改变，可以同时改变View上的显示内容。（2）View上的内容改变，也可以同时改变ViewModel中对应的数据。1.2使用Vue.js理解MVVM模式图中的DOMListeners和DataBindings看作两个工具，它们是实现双向绑定的关键。当View发生变化时，ViewModel中的DOMListeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；当Model中的数据更新时，DataBindings工具会帮我们更新页面中的DOM元素。下面我们通过一个实例帮助我们进一步了解数据的双向绑定，在Vue.js中我们可以使用v-model指令在表单上创建双向数据绑定。1.2使用Vue.js理解MVVM模式<divid="app"><p>input元素：</p><inputv-model="message"placeholder="编辑我……"><p>消息是:{{message}}</p></div><script>newVue({el:'#app',data:{message:'hello',}})</script>1.3Vue.js的响应式理解许多前端框架（如Angular,React,Vue）都有自己的响应式引擎。对于Vue响应式，官方文档的解释是：当你把一个普通的JavaScript对象传给Vue实例的data选项，Vue将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter。简单理解