8. 應用程式建立
建立並綁定一個 Vue 物件到特定 HTML 元素上：
var app = new Vue ({
el: ‘（要綁定的 HTML 元素 的 ID 或是 Class）’,
data: {
（將各種物件資料存放在這裡）
}
})透過 Vue 將資料顯示在指定的 HTML 元素上：
{{ （存放的物件名稱） }}Vue 的應用程式不能透過巢狀（一個應用程式裡面包另一個應用程式）的方式去建立，一定要個別建立，並個別套用在不重複的 HTML 元素上。
因此，推薦使用 id 的方式來綁定 HTML 元素。
9. 雙向綁定的資料
可以在一個 <input> 標籤內加入以下屬性，來直接修改 Vue 應用程式內的物件的內容：
v-model=”（要指定的 Vue 物件名稱）”在一個 HTML 元素內加入以下屬性，可以直接將現有的 Vue 應用程式內的物件存放的資料寫在該 HTML 元素上：
v-text=”（Vue 物件名稱）”相當於 JavaScript 的 textContent。
在一個 HTML 元素內加入以下屬性，可以直接將現有的 Vue 應用程式內的物件存放的資料給寫在該 HTML 元素上：
v-html=”（Vue 物件名稱）”與 v-text 不同的地方在於， v-html 屬性可以插入 HTML 標籤，相當於 JavaScript 的 innerHTML。
11. v-bind 動態屬性指令
使用 v-bind 指令來綁定一個 HTML 元素內的屬性，例如 <img> 內的 src，可以寫成：
v-bind:src=”（Vue 物件名稱）”要綁定 class ，則可以寫成：
v-bind:class=”（Vue 物件名稱）”（v-bind 可以縮寫為 “:”）
12. v-for 動態產生多筆資料於畫面上
v-for 是 Vue 提供的一個迴圈屬性，用法為在一個 HTML 標籤內加入：
v-for=”（變數名稱） in （Vue 物件名稱）”假設我要在一個 ul 底下的 li 元素內透過 Vue 內部儲存的 JSON 資料建立一個列表，那可以這樣寫：
<li v-for=”(item, index) in list”>
{{ index + 1 }} - {{ item.name }}年齡是{{ item.age }}歲
</li>Vue 應用程式內儲存的資料：
var app = new Vue({
el: ‘#app’,
data: {
list: [
{
name: ‘小明’,
age: 16
},
{
name: ‘媽媽’,
age: 38
},
{
name: ‘漂亮阿姨’,
age: 16
}
]
}
})這個做法跟用 JavaScript 的 for 抓出 JSON 內的資料一樣。
13. 使用 v-on 來操作頁面行為
在元素上綁定監聽事件的方法：（通常會使用在按鈕上）
v-on:（各種觸發事件，例如click）=”（Vue 應用程式內的 methods 物件裡的名稱）”（v-on 可以縮寫為 “@”）
14. 預先定義資料狀態的重要性
在 Vue 內如果要操作資料內容，那就一定要預先在 Vue 的應用程式物件內定義好資料結構。
15. 透過修飾符，讓 v-on 操作更簡單
事件修飾符，可以用來避免一些 HTML 元素的預設行為。
例如在 v-on 後面加上 .prevent （JavaScript 的 .preventDefault()） 來取消 <a> 標籤的特性。
或是 .stop （JavaScript 的 .stopPropagation()） 來終止事件氣泡與事件捕捉。
16. v-class 動態切換 className
動態調整 HTML 元素的 Class：
v-bind:class=”{ ‘（要加入的 Class）’ : （判斷式） }”可以縮寫成：
:class=”{ ‘（要加入的 Class）’ : （判斷式） }”18. Methods 與 Computed 的使用情境
- computed 是在監控資料更動後，重新運算結果呈現於畫面上一般來說不會修改資料，只會回傳用於畫面呈現的資料
- methods 就是互動的函式，需要觸發才會運作會用來修改資料內容
效能
如果資料量大，computed 自然會比較慢，只要資料變動就會觸發，無形之中執行次數也會增加，因此在大量資料時，會建議透過 methods 減少不必要的運算喔！
20. 元件基礎概念
建立一個 Vue 元件：
Vue.component(‘（自定義元件名稱，當作 HTML 標籤使用）’, {
data: function() {
return {
（要做成元件的 Vue 物件）
}
},
template: `要 DOM 給自定義元件名稱的 HTML 元素`
});