Vue，生命周期函数演示（创建阶段的4个钩子函数）
四个创建阶段的函数
beforeCreate（）{ }
created（）{ }
beforeMount（）{ }
mounted（）{ }
老师讲的真的不错， 通俗易懂， 而且笔记还很全
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <script src="../js/vue.js" charset="utf-8"></script> 8 <body> 9 <div id="app"> 10 <h3 id="w3">{{ msg }}</h3> 11 </div> 12 </body> 13 </html> 14 <script> 15 var vm = new Vue({ 16 el: '#app', 17 data:{ 18 msg:'ok' 19 }, 20 methods:{ 21 show(){ 22 console.log("执行了show方法") 23 } 24 }, 25 beforeCreate() { // 这是我们第一个遇到的生命周期函数, 表示实例完全被创建之前, 会执行它 26 // console.log(this.msg) // 输出undefined 27 // this.show() //输出this.show is not a function 28 // 注意: 在 beforeCreate 生命周期函数被执行的时候, data 和 methods 中的 数据都还没有初始化 29 }, 30 created() { //这是我们遇到的第二个生命周期函数 31 // console.log(this.msg) //输出ok 32 // this.show() // 输出 "执行了show方法" 33 // 在 created 中, data 和 methods 都已经初始化好了! 34 // 如果要调用 methods 中的方法, 或者操作 data 中的数据, 最早, 只能在 created 中操作 35 }, 36 beforeMount() { //这是我们遇到的第三个生命周期函数, 表示 模板已经在内存中编译完成了, 但是尚未把 模板渲染到 页面中 37 // console.log(document.getElementById("w3").innerText) // 输出 {{ msg }} 38 // 在 beforeMount 执行的时候, 页面中的元素, 还没有被真正替换过来, 只是之前写的一些模板字符串 39 }, 40 mounted() { //这是我们遇到的第四个生命周期函数, 表示 内存的模板, 已经真是的挂载到了页面上, 用户可以已经看到渲染好的页面 41 console.log(document.getElementById("w3").innerText) // 输出 ok 42 // 注意: mounted 是 实例创建期间的最后一个生命周期函数, 当执行完 mounted 就表示, 实例已经被完全创建好了, 此时, 43 // 如果没有其它操作的话, 这个实例, 就静静的 躺在我们的内存中, 一动不动 44 } 45 }) 46 </script>