vue2.0 创建简单示例
小生 2023-04-02 11:32:36
vue
js
简单语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{a}}
</div>
<script>
var data = {
a: 1
};
// 冻结对象，必须放在实例化的前面
//Object.freeze(data);
var vm = new Vue({
el: '#app',
data: data
});
// 监视某个属性的值
vm.$watch('a', function(newValue, oldValue) {
console.log(`new value:${newValue}, old value:${oldValue}`);
});
data.a = 3; //如果之前调用了freeze，修改无效
console.log(vm.$data === data); //true
console.log(vm.$el == document.getElementById("app")); //true
</script>
</body>
</html>
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
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
