Html:
<div id="app">
{{ message }}
</div>
Vue:
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
本例子由HTML模板（View）+Vue實例（ViewModel）組成。
創建Vue的實例，需傳入一個選項對象，如：
數據（data）：Vue 將會遞歸將 data 的屬性轉換為 getter/setter，從而讓 data 的屬性能夠響應數據變化。
屬性（props）： 可以是數組或對象，用於接收來自父組件的數據。props 可以是簡單的數組，或者使用對象作為替代，對象允許配置高級選項，如類型檢測、自定義校驗和設置默認值。
掛載元素（el）：提供一個在頁面上已存在的 DOM 元素作為 Vue 實例的掛載目標。可以是 CSS 選擇器，也可以是一個 HTMLElement 實例。
計算（computed）：聲明計算，處理復雜邏輯
方法（methods）：聲明方法，VM 實例可以訪問這些方法，或者在指令表達式中使用。計算屬性默認有getter，但也可以自定義一個setter。
computed和method比較：methods 來替代 computed，效果上兩個都是一樣的，但是 computed 是基於它的依賴緩存，只有相關依賴發生改變時才會重新取值。而使用 methods ，在重新渲染的時候，函數總會重新調用執行。computed 性能會更好，但是如果你不希望緩存，你可以methods。
為什么需要緩存？
假設我們有一個性能開銷比較大的的計算屬性 A ，它需要遍歷一個極大的數組和做大量的計算。然后我們可能有其他的計算屬性依賴於 A 。如果沒有緩存，我們將不可避免的多次執行 A 的 getter！如果你不希望有緩存，請用 method 替代。
watch：觀察和響應數據變化。一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名，或者包含選項的對象。
computed和watch比較：計算屬性在大多數情況下更合適，但有時也需要一個自定義的 watch。watch 選項允許我們執行異步操作（訪問一個 API），限制我們執行該操作的頻率，並在我們得到最終結果前，設置中間狀態。這是計算屬性無法做到的。
擴展（extended）：擴展到另一個組件。
minxin：混合實例對象可以像正常的實例對象一樣包含選項。
parent：指定已創建的實例之父實例，在兩者之間建立父子關系。
component：聲明組件，包含 Vue 實例可用組件的哈希表。
生命周期：
實例
var app = new Vue({
el: '#app',
data: {
message : "xuxiao is boy"
},
beforeCreate: function () {
console.group('beforeCreate 創建前狀態===============》');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
}
}）
| 指令 |
描述 |
| beforeCeate |
在實例初始化之后，數據觀測(data observer) 和 event/watcher 事件配置之前被調用。 |
| created |
實例已經創建完成之后被調用。在這一步，實例已完成以下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。 |
| beforeMount |
在掛載開始之前被調用：相關的 render 函數首次被調用。 該鈎子在服務器端渲染期間不被調用 |
| mounted |
el 被新創建的 vm.$el 替換，並掛載到實例上去之后調用該鈎子。如果 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。 |
| beforeUpdate |
數據更新時調用，發生在虛擬 DOM 重新渲染和打補丁之前。 你可以在這個鈎子中進一步地更改狀態，這不會觸發附加的重渲染過程 |
| updated |
由於數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鈎子。 當這個鈎子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀態，因為這可能會導致更新無限循環。 |
| activated |
keep-alive 組件激活時調用。 該鈎子在服務器端渲染期間不被調用。 |
| deactivated |
keep-alive 組件停用時調用。 該鈎子在服務器端渲染期間不被調用 |
| bedoreDestroy |
實例銷毀之前調用。在這一步，實例仍然完全可用。 該鈎子在服務器端渲染期間不被調用。 |
| destroyed |
Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。 該鈎子在服務器端渲染期間不被調用。 |