Vue应用程序开发全套课件.pptx

《Vue应用程序开发》Vue.js入门第1章：Vue.js入门第1章Vue.j入门s.pptx第2章第一个Vue.js应用.pptx第3章Vue.js内置指令.pptx第4章Vue.js组件.pptx第5章过滤器和自定义指令.pptx第6章Vue.js过渡和动画.pptx第8章Vuex.pptx第9章Weex.pptx第10章Vue脚手架.pptx

1.1初识Vue.js1.2使用Vue.js理解MVVM模式1.3Vue.js的响应式理解

第1节初识Vue.js01

1.1初始Vue.jsVue（读音/vju?/）是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。渐进式框架的优点是灵活、易用和高效。Vue.js颠覆了传统前端开发模式，提供了现代Web开发中常见的高级功能。1.1.1什么是Vue.js

1.1初始Vue.js1.1.2为什么要使用Vue.js颠覆了传统的前端开发模式，不需要频繁操作DOM元素，通过数据的双向绑定来更新页面，有更多的时间去思考业务逻辑。下面我们通过两段代码了比较传统开发模式和使用Vue.js开发的不同。divid=output/divbuttonid=incrementIncrement/buttonvarcounter=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=incrementIncrement/button/divnewVue({ el:#app, data:{ counter: 0 }, methods:{ increment:function(){ this.counter++; } }});

1.1初始Vue.jsVue.js还有以下主要特点：1.轻量高效2.组件化开发3.前端路由4.状态管理5.虚拟DOM

1.1初始Vue.js1.1.3MVVM模式在上面的代码中我们提到了Vue.js在设计上使用了MVVM模式。MVVM全称是ModelViewViewModel，它本质上就是MVC的改进版。MVVM模式使用的是数据绑定基础架构，它可以轻松构建视图UI的必要元素。ViewModel负责取出Model的数据同时帮忙处理View中由于需要展示内容而涉及的业务逻辑。

第2节使用Vue.js理解MVVM模式02

1.2使用Vue.js理解MVVM模式图中的DOMListeners和DataBindings看作两个工具，它们是实现双向绑定的关键。当View发生变化时，ViewModel中的DOMListeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；当Model中的数据更新时，DataBindings工具会帮我们更新页面中的DOM元素。

1.2使用Vue.js理解MVVM模式下面我们通过一个实例帮助我们进一步了解数据的双向绑定，在Vue.js中我们可以使用v-model指令在表单上创建双向数据绑定。divid=apppinput元素：/pinputv-model=messageplaceholder=编辑我……p消息是:{{message}}/p/divscriptnewVue({el:#app,data:{message:hello,}})/script案例：0101Vue.js入门

第3节Vue.js的响应式理解03

1.3Vue.js的响应式理解从图中可以看出：1.Model与ViewModel之间的双向关系（1）Model通过Ajax通信，发送数据给ViewModel。（2）ViewModel也可以通过Ajax通信，发送请求给Model。2.ViewModel与View之间的双向关系（1）ViewModel中的数据改变，可以同时改变View上的显示内容。（2）View上的内容改变，也可以同时改变ViewModel中对应的数据。

1.3Vue