1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Vue实例生命周期函数</title>
6 <script type="text/javascript" src="./vue.js"></script>
7 </head>
8 <body>
9 <div id="app"></div>
10 <script>
11 //生命周期函数就是vue实例在某一个时间点会自动执行的函数
12 var vm = new Vue({
13 el:"#app",
14 template:'<div>{{test}}</div>',
15 data:{
16 test:"hello world"
17 },
18 //创建Vue实例之前
19 beforeCreate:function(){
20 console.log("beforeCreate");
21 },
22 //创建Vue实例之后
23 created:function(){
24 console.log("created");
25 },
26 //模板挂载到页面之前
27 beforeMount:function(){
28 console.log(this.$el);
29 console.log("beforeMount");
30 },
31 //模板挂载到页面之后
32 mounted:function(){
33 console.log(this.$el);
34 console.log("mounted");
35 },
36 //当vm.$destroy()要执行的时候
37 beforeDestroy:function(){
38 console.log('beforeDestroy');
39 },
40 //vm.$destroy()执行完的时候
41 destroyed:function(){
42 console.log('destroyed');
43 },
44 //当数据改变,但是还没有渲染的时候
45 beforeUpdate:function(){
46 console.log('beforeUpdate');
47 },
48 //当数据改变后,已经渲染到页面上时
49 updated:function(){
50 console.log('updated');
51 }
52 })
53 </script>
54
55 </body>
56 </html>
