Vuejs vm對象詳解
vue數據是怎么驅動視圖的?
一堆數據放在那里是不會有任何作用的，它必須通過我們的View Model（視圖模型）才能操控視圖。
圖中的model其實就是數據，一般我們寫成js對象的格式；
中間的這個所謂View Model，就是
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
我們把數據放到了vm里，然后把各種directive放到視圖里，這樣我們就可以以vm為媒介，通過改變數據來改變視圖。
vm這個對象有哪些屬性和方法
我們看到
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
誤區
vm實際上是Vue這個類的一個實例，非常容易混淆的是，你會很容易的以為
vm.el == '#app';
vm.data== {
message: 'Hello Vue!'
};
vm.data.message =='Hello Vue!';
實際上這都是錯誤的，
{
el: '#app',
data: {
message: 'Hello Vue!'
}
}
這只是傳進 Vue()的一個參數，它可不是vm本身。
通過vm讀取數據
實際上，vm.messasge == 'Hello Vue!', vm的屬性是直接跟數據的key綁定的（至於怎樣綁定的現在不用管),這是一種代理屬性;
這個數據是響應式(reactive)的
var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
// 設置vm數據會使原來的數據發生改變
vm.a = 2
data.a // -> 2
// ... 反過來亦然
data.a = 3
vm.a // -> 3
怎么通過vm獲取其他屬性
vm.el == '#app';
vm.data== {
message: 'Hello Vue!'
};
vm.data.message =='Hello Vue!';
以上雖然是錯誤的寫法，有時候我們還是希望獲得這些屬性的，通過vm你需要這樣寫：
vm.$el === document.getElementById('app') // -> true
vm.$data === data // -> true
vm.$data.message ==='Hello Vue!' // -> true
這個$符代表的就是vm的真實屬性了。
詳細其他屬性的請查閱文檔Api
不僅有屬性，還有方法
vm.$watch('a', function (newVal, oldVal) {
// 當vm.a發生改變的時候，這個回調函數將會被觸發
})
詳細其他方法,請查閱文檔Api
vm對象的生命周期
一個對象的生成和銷毀都是有生命周期的，這個周期中有很多事件點，供我們插入邏輯代碼；
生命周期事件，怎么插入事件回調呢？
var vm = new Vue({
data: {
a: 1
},
created: function () {
// `this` points to the vm instance
console.log('a is: ' + this.a)
}
})
// -> "a is: 1"
直接把事件名當做一個屬性，然后加匿名回調函數即可。
vue生命周期圖示中英文版Vue實例生命周期鈎子 - 流風，飄然的風 - 博客園
https://www.cnblogs.com/zdz8207/p/vue-lifecycle.html