創建vue實例
每個 Vue 應用都是通過 Vue 函數創建一個新的 Vue 實例開始的：
|
var vm = new Vue({
// 選項
})
|
選項：el、data、methods
el:
-
類型：
string | HTMLElement -
限制：只在由
new創建的實例中遵守。 -
詳細：提供一個在頁面上已存在的 DOM 元素作為 Vue 實例的掛載目標。可以是 CSS 選擇器，也可以是一個 HTMLElement 實例。
- 例如：el: "#app"
data
-
類型：
Object - 定義數據，例如： data:{n:1,m:2}
methods
-
類型：
Object - 包含函數
- 例如：methods:{fun:function(){}}
因此在文檔中經常會使用vm (ViewModel 的簡稱) 這個變量名表示 Vue 實例。
當創建一個 Vue 實例時，你可以傳入一個選項對象。
一個 Vue 應用由一個通過 new Vue 創建的根 Vue 實例，以及可選的嵌套的、可復用的組件樹組成。
數據與方法
當一個 Vue 實例被創建時，它向 Vue 的響應式系統中加入了其 data 對象中能找到的所有的屬性。當這些屬性的值發生改變時，視圖將會產生“響應”，即匹配更新為新的值。
|
// 我們的數據對象
var data = { a: 1 }
// 該對象被加入到一個 Vue 實例中
var vm = new Vue({
data: data
})
// 他們引用相同的對象！
vm.a === data.a
// => true
// 設置屬性也會影響到原始數據
vm.a =
2
data.a
// => 2
// ... 反之亦然
data.a =
3
vm.a
// => 3
|
當這些數據改變時，視圖會進行重渲染。值得注意的是只有當實例被創建時 data 中存在的屬性是響應式的。也就是說如果你添加一個新的屬性，像：
|
vm.b =
'hi'
|
那么對 b 的改動將不會觸發任何視圖的更新。如果你知道你會在晚些時候需要一個屬性，但是一開始它為空或不存在，那么你僅需要設置一些初始值。比如：
|
data: {
newTodoText:
'',
visitCount:
0,
hideCompletedTodos:
false,
todos: [],
error:
null
}
|
除了 data 屬性，Vue 實例暴露了一些有用的實例屬性與方法。它們都有前綴 $，以便與用戶定義的屬性區分開來。例如：
|
var data = { a: 1 }
var vm = new Vue({
el:
'#example',
data: data
})
vm.$data === data
// => true
vm.$el ===
document.getElementById('example') // => true
// $watch 是一個實例方法
vm.$watch(
'a', function (newValue, oldValue) {
// 這個回調將在 `vm.a` 改變后調用
})
|
實例生命周期
每個 Vue 實例在被創建之前都要經過一系列的初始化過程。例如需要設置數據監聽、編譯模板、掛載實例到 DOM、在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鈎子的函數，給予用戶機會在一些特定的場景下添加他們自己的代碼。
比如 created 鈎子可以用來在一個實例被創建之后執行代碼：
|
new Vue({
data: {
a:
1
},
created:
function () {
// `this` 指向 vm 實例
console.log(
'a is: ' +
this.a)
}
})
// => "a is: 1"
|
也有一些其它的鈎子，在實例生命周期的不同場景下調用，如mounted、updated、destroyed。鈎子的 this 指向調用它的 Vue 實例。
不要在選項屬性或回調上使用箭頭函數，比如created: () => console.log(this.a) 或vm.$watch('a', newValue => this.myMethod())。因為箭頭函數是和父級上下文綁定在一起的，this 不會是如你所預期的 Vue 實例，經常導致Uncaught TypeError: Cannot read property of undefined 或Uncaught TypeError: this.myMethod is not a function 之類的錯誤。
生命周期圖示
下圖說明了實例的生命周期。你不需要立馬弄明白所有的東西，不過隨着你的不斷學習和使用，它的參考價值會越來越高。
