vue.js简介和生命周期

本文详情:http://www.zymseo.com/vue/
1、Vue.js框架是什么，为什么学习它？
世界上最好的MVVM框架：

MVVM可以拆分成：View --- ViewModel --- Model三部分 

中间的监控着负责监控两侧的数据，相对应的实现数据互通，不需要手动的去操作DOM.
Vue.js的两大核心：数据驱动和组件化

2.最简单的数据双向绑定

<div id="app">
        <input type="text" v-model="name" />
        {{name}}
 </div>
<script type="text/javascript">
    var app = new Vue({
        el : '#app',
        data : {
            name : '赵一鸣VueJs学习笔记'
        }
    });

3.VueJs的watch属性监测数据变化

watch是一个json，每一个json的键名就是监测的data中的数据，键值是一个function，第一个参数是新数据，第二个参数是旧数据。

4.VueJs实例的生命周期

一.beforeCreate
此阶段为实例初始化，此时的数据观察个时间配置都没准备好，实例中的data和el还是undefined

二、created
beforeCreate之后紧接着的钩子韩式就是created,此时我们可以读取到data的值，但是DOM还没有生成，多以el属性还不存在，$data为一个object对象，而$el的值为underfined

三、beforeMount
此阶段即将挂载，DOM生成，$el成功获取关联到节点，但是{{name}}还没有成功的被渲染出来达成我们data里面的数据

四、mounted
mounted也就是挂载完毕阶段，此时数据会被成功的渲染出来，我们编写这个钩子，{{name}}被成功的渲染出来。

五、beforeUpdate
当修改vue实例的data时，vue就会自动帮我们更新渲染视图，在这个过程中，vue提供beforeUpdata的钩子函数，在检测我们要修改数据的时候，更新渲染视图之前就会触发钩子函数beforeUpdate。
此时我们 即将更新 data里面的数据，但是并未更新成功

六、updated
此时 我们data的数据已经更新完毕

七、beforeDestroy
调用$destriy()方法可以销毁当前组件，在销毁前，会触发beforeDestroy钩子

八、destroyed

销毁之前，修改name的值，可以成功修改视图显示，一旦调用实例$destroy()方法之后，实例与视图的关系解绑，在修改name的值，视图也不会在更新了，说明实例已经被销毁了。