1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8 <!--1.导入Vue的包--> 9 <script src=" https://cdn.jsdelivr.net/npm/vue"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 <input type="button" value="修改msg" @click="msg='No'"> 15 <h3 id="h3">{{msg}}</h3> 16 </div> 17 18 19 <script> 20 //创建 Vue 实例，得到 ViewModel 21 var vm = new Vue({ 22 el:'#app', 23 data:{ 24 msg:'ok' 25 }, 26 methods:{ 27 show(){ 28 console.log('执行了show方法') 29 } 30 }, 31 beforeCreate(){//这是我们遇到的第一个生命周期函数，表示实例完全创建出来 之前，会执行它 32 //console.log(this.msg) 33 // this.show() 34 //注意：在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没初始化 35 36 }, 37 created(){//这是遇到的第二个生命周期函数 38 // console.log(this.msg) 39 // this.show() 40 //在create中，data和methods都已经被初始化好了！ 41 //如果要调用methods中的方法，或者操作data中的数据，最早，只能在created中操作 42 }, 43 beforeMount(){//这是遇到的第三个生命周期函数，表示模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中 44 // console.log(document.getElementById('h3').innerText) 45 //在beforeMount页面中的元素，还没有真正被替换过来，只是之前写的一些模板字符串 46 }, 47 mounted(){//这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了 48 // console.log(document.getElementById('h3').innerText) 49 //mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了，此时，如果没有其他操作的话，这个实例，就静静的躺在我们的内存中，一动不动 50 }, 51 52 //接下来的是运行中的两个事件 53 beforeUpdate(){//这时候，表示 我们的界面还没有被更新【数据被更新了吗？ 数据肯定被更新了】 54 /*console.log('界面上元素的内容：'+document.getElementById('h3').innerText) 55 console.log('data中的msg数据是：'+this.msg)*/ 56 //得出结论：当执行beforeUpdate的时候，页面中的显示的数据，还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步 57 }, 58 59 updated(){ 60 console.log('界面上元素的内容：'+document.getElementById('h3').innerText) 61 console.log('data中的msg数据是：'+this.msg) 62 //updated事件执行的时候，页面和data数据已经保持同步了，都是最新的 63 } 64 }); 65 </script> 66 </body> 67 </html>