new Vue()
var vm = new Vue({ // 參數 })
- vm: viewModel的意思，概念源自於MVVM架構。
參數
var data = {
title: 'Hello World'
}
var vm = new Vue({
data: data
})
Vue 會把變數 data和變數 vm雙向綁定
data.title === vue.title // true
data.title = '改值時vm.title也會改';
vm.title = '改值時data.title也會改';
結論: data 和 vm 共用記憶體空間
DOM渲染注意事項
1.
透過
var vm = new Vue({
data: data
})
新增的屬性，都會被監聽，變更時會渲染到畫面上
2.
new Vue() 之後才新增的屬性，都不會被監聽
e.g.
vm.newProperty = 'test'; // newProperty 不會被監聽
3.
根據1.2.的特性，未來才會用到的屬性，就需要在一開始設置初始值
e.g.
var data = {
futureProperty:''
}
4.
Object.freeze() 可以使物件變成唯讀，不被監聽
e.g.
Object.freeze(data); // 意即data不會被監聽，不會更新到畫面上
Vue提供的屬性、方法
vue提供的屬性方法前面會有前綴符號 $
e.g.
vm的data
vm的DOM
- vm.$watch('property',function(newValue, oldValue){ // callback })
可監聽某個property
Vue提供的hook
在 Vue 的生命週期過程中，提供的不同的 hook 給使用者，全景未來說明
e.g.
new Vue({
created: function(){
console.log(this.property);
}
})
