<div id="app"> {{a}}</div>
<script type="text/javascript"> //生命周期： //beforeCreate created 出生之前，出生之后 //beforeMount mounted 挂载之前，挂载完成 //beforeUpdate updated 更新之前，更新之后 //beforeDestroy destroyed 死亡之前，死亡之后 let vm = new Vue({ //根实例，初始化时会调用很多方法（钩子函数，回调函数） el:'#app', //4.要保证有编译的元素，挂载 beforeCreate(){}, //1.此方法用不到 data:{a:1}, //2.放数据 created(){}, //3.获取ajax，初始化操作 template:'<div>{{a}}</div>', //5.如果有template属性会用模板替换掉外部html，只要有此属性app中的内容就没有任何意义了，只能有一个根元素，不能是文本节点 beforeMount(){}, //6.开始编译，没有什么实际意义 mounted(){}, //7.挂载，真实dom渲染完了，可以操作dom了 //vm.a=1没反应，vm.a=2会先弹'更新之前'，再弹'更新之后'，再改变页面数据 //一般用watch来代替这两个功能 beforeUpdate(){ //8.更新之前，只要数据一变就会触发 alert('更新之前'); }, updated(){ //9.更新之后 alert('更新之后'); }, beforeDestroy(){ //10.销毁前，可以清除定时器或者清除事件绑定 alert('销毁前'); }, destroyed(){ //11.销毁后，只是移除了监听没有移除函数 alert('销毁后'); }, }); //vm.$mount('#app'); 4.挂载元素也可以这样写 vm.$destroy();//方法执行beforeDestroy和destroyed就会起作用，只是移除了监听没有移除函数</script>
转载于:https://www.cnblogs.com/liufeiran/p/11162173.html
