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>