創建一個 Vue 的實例
每個 Vue 應用都是通過 Vue 函數創建一個新的 Vue 實例開始的：
| var vm = new Vue({ // 選項 }) |
因此在文檔中經常會使用vm (ViewModel 的簡稱) 這個變量名表示 Vue 實例。
當創建一個 Vue 實例時，你可以傳入一個選項對象。這篇教程主要描述的就是如何使用這些選項來創建你想要的行為。作為參考，你也可以在 API 文檔 中瀏覽完整的選項列表。
一個 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‘, |
實例生命周期
每個 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 之類的錯誤。
生命周期圖示
下圖說明了實例的生命周期。你不需要立馬弄明白所有的東西，不過隨著你的不斷學習和使用，它的參考價值會越來越高。
創建一個 Vue 的實例