脚本宝典收集整理的这篇文章主要介绍了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的值，视图也不会在更新了，说明实例已经被销毁了。

脚本宝典总结

以上是脚本宝典为你收集整理的vue.js简介和生命周期全部内容，希望文章能够帮你解决vue.js简介和生命周期所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。