Vue

<script src="vue.js" type="text/javascript" charset="utf-8"></script>
// 视图区
<div id="app1">
	{{id}}
</div>
// 脚本区
<script>
	var user = {id : 1};
	// 引入vue.js可以创建Vue实例
	var vm = new Vue({
		el : '#app1',// el绑定的元素，就是此vue实例作用范围
		data : user,
		// 生命周期钩子（不能使用箭头函数，因为箭头函数没有this，而在生命周期过程中要频繁使用this）
		beforeCreate:function(){
			console.log('在实例初始化之后执行，在整个页面创建之前调用');
		},
		created:function(){
			console.log('在实例创建完成后立即调用');
		},
		beforeMount:function(){
			console.log('在挂载开始之前被调用');
		},
		mounted:function(){
			console.log('挂载成功之后调用，el被vm.$el替换');
		},
		beforeUpdate:function(){
			console.log('在数据更新之前调用');
		},
		updated:function(){
			console.log('数据、组件、dom已经更新完毕');
		}
	});
	// vm实例观察data中属性的变化
	vm.$watch('id',function(newValue,oldValue){
		console.log(oldValue + " ==> " + newValue);
	});
	vm.$data.id = 3;
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38