文档介绍：*
学****交流PPT
目录
World！
*
学****交流PPT
ive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。
*
学****交流PPT
MVVM模式
MVVM模式采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。Vue、Angular 和 Ember 都采用这种模式，相比于Angular，、更易于理解的API，。
*
学****交流PPT
数据驱动和组件式编程
数据驱动：
*
学****交流PPT
程序=数据结构+算法，这是每个程序都耳熟能详的一句话,可在前端这里并不纯粹,因为前端需要跟界面打交道,html+css并没用被抽象成某种在js中使用的数据结构,充当的更多是界面的一种配置,jquery程序员看待他的方式就一块块的ui,用到的时候再$一下,。一个比较实际的情况就是,在ui控件有联动的时候,如果没有一种机制来管理这些ui之间的修改,那么依赖程序员自己去手动管理这些ui的状态,会让人烦不胜烦,且容易出现bug。
总结一下基于操作dom的前端开发方式：
拼界面->找到dom节点->修改属性->检测是否有其他影响的节点->根据刚刚修改的dom节点更新自己的状态
那么上面的那句话就变成了 ：前端程序 = 拼界面+操作ui+算法
vue或者angular这些mvvm框架给了前端另一种思路,完全基于数据驱动的编程。如果你之前已经****惯了用jQuery操作DOM，，，你无需手动操作DOM。Vue采用一种数据绑定的方式,,你只要专注于数据的状态,ui更新的事情你不需要去管了,不管是样式还是内容,可见性还是切换class,框架帮你把关注点从传统的dom操作转移到了数据,回归编程的本质:程序=数据结构+算法. 这也是mvvm框架最大的思路上的突破。
*
学****交流PPT
组件式编程
这个理念不是来源于vue, 把web组件式开发发扬光大的应该是react了,组件开发是一种朴素的开发思想,分而治之,大型系统拆分成一个个的小模块小组件,分配给不同的人。额外的好处是顺便能复用这个组件。
*
学****交流PPT
理解组件的思想可以类比函数。一个函数包含哪些东西呢？
那对应到vue中又是什么呢?
*
学****交流PPT
Vue之Hello World！
*
学****交流PPT
Vue之Hello World！
使用Vue的过程就是定义MVVM各个组成部分的过程的过程。
"ViewModel"，它用于连接View和Model
在创建Vue实例时，需要传入一个选项对象，选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。
在这个示例中，选项对象的el属性指向View，el: '#app'表示该Vue实例将挂载到<div id="app">...</div>这个元素；data属性指向Model，data: exampleData表示我们的Model是exampleData对象。 ，最基础的形式是文本插值，使用一对大括号语法，在运行时{{ message }}会被数据对象的message属性替换，所以页面上会输出"Hello World!"。
*
学****交流PPT
生命周期
*
学****交流PPT
生命周期
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。
它可以总共分为8个阶段：
:在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
:实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observ