1、Vue會代理data對象裏面所有的屬性！！
這句話的意思就是，只有在data對象裏面明確的寫着的屬性，Vue纔會真的監聽到屬性的變化，當我們變化這個屬性的值的時候，纔會引發界面的渲染，否則，Vue無法監聽到這種渲染，就不會引發界面渲染。
示例demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue學習</title>
<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span>{{message}}</span>
<span>{{message2}}</span>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"hello"
}
});
vm.message = 'world';
vm.message2 = 'world';
</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
運行結果就是界面上只展示一個world。因爲我們的data中只有message，而沒有message2.
2、Vue的實例屬性
什麼是實例屬性？顧名思義，實例屬性就是實例化了的屬性，相當於一個構造函數中this.name = name;this.age = age; 的意思。
實例的概念是針對JavaScript中的原型的概念來區別的。原型就是我沒必要實例化這個對象，本身就存在的原型的方法或者原型的屬性。
如果你學過java，實例的意思類似於java中的成員變量，而原型相當於java中的靜態變量。
在Vue中，爲了區分，把所有的實例屬性或者方法，前面都加上了”$”符號。
var vm = new Vue({
el:"#app",
data:{
message:"hello"
}
});
console.log(vm.$el);//獲取了id爲app的節點。
console.log(vm.$data);//獲取了屬性爲message的對象。- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
3、Vue的實例方法
// $watch 是一個實例方法
vm.$watch('message', function (newVal, oldVal) {
// 這個回調將在 `vm.message` 改變後調用
})- 1
- 2
- 3
- 4