测试和解释写在以下代码中
关于Vue的八个生命周期钩子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="./js/vue.js"></script> </head> <body> <div id="app"> <p id="p">{{msg}}</p> <input type="button" value="change msg" @click="msg='yes'"> </div> <script> var vm = new Vue({ el:'#app', data:{ msg:'yesok' }, methods:{ show(){ console.log('执行了show方法') } }, beforeCreate(){//表示实例完全被创建出来之前，会执行它。 //在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有被初始化 }, created(){ //在created生命周期函数执行的时候，data和methods中的数据已经被初始化 //如果调用methods中的方法，或者是操作data的数据，最早只能在created中操作 console.log(this.msg) this.show() }, beforeMount(){//表示模版已经在内存中编译完成了，但是尚未把模板渲染到页面中 console.log(document.getElementById('app').innerText) //在beforeMount执行的时候，页面中的元素，还没有被真正替换过来，只是之前的一些模板字符串 }, mounted(){// console.log(document.getElementById('app').innerText) /*mounted是实例创建期间最后的一个生命周期函数，当执行完mounted就表示，Vue实例已经被完全创建 好了，此时如果没有其它操作的话，这个实例就静静地躺在内存中，一动不动。*/ //如果要通过某些插件操作页面上的DOM节点了，最早要在mounted中进行 }, //接下来是运行中的两个事件,beforeUpdate和updated这两个事件，会根据data数据的改变，有选择性的触发0次到多次。 beforeUpdate(){//表示我们的页面还没有被更新，但是数据已经被更新了 console.log('页面上元素的内容是：'+document.getElementById('app').innerText) console.log('data中msg数据是：'+this.msg) //当执行beforeUpdate的时候，页面中显示的数据还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步。 }, updated(){ console.log('页面上元素的内容是：'+document.getElementById('app').innerText) console.log('data中msg数据是：'+this.msg) //updated事件执行的时候，页面(View层)和data数据(Model层)已经保持同步了，都是最新的。 }, //Vue实例的销毁阶段 beforeDestroy(){ }, destroyed(){//当执行到destroyed函数的时候，组件已经被完全销毁了，此时组件中所有的数据、方法、指令、过滤器......都已经不可用了。 } }) </script> </body> </html>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
