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