一、表單
v-model 指令在表單控制元件元素上建立雙向資料繫結，v-model 會根據控制元件型別自動選取正確的方法來更新元素。
<input v-model="message" placeholder="編輯我……">
<p>訊息是: {{ message }}</p>
1、核取方塊
核取方塊如果是一個為邏輯值，如果是多個則繫結到同一個陣列：
<div id="app">
<p>單個核取方塊：</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<p>多個核取方塊：</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">Runoob</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">taobao</label>
<br>
<span>選擇的值為: {{ checkedNames }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
checked : false,
checkedNames: []
}
})
</script>
2、單選按鈕
單選按鈕的雙向資料繫結，就是選擇的按鈕的value
3、select 列表
下拉選單的雙向資料繫結，就是選擇的選項的value
4、修飾符
（1）.lazy
在預設情況下， v-model 在 input 事件中同步輸入框的值與資料，但你可以新增一個修飾符 lazy ，從而轉變為在 change 事件中同步：
//在 "change" 而不是 "input" 事件中更新
<input v-model.lazy="msg" >
（2）.number
如果想自動將使用者的輸入值轉為 Number 型別（如果原值的轉換結果為 NaN 則返回原值），可以新增一個修飾符 number 給 v-model 來處理輸入值：
<input v-model.number="age" type="number">
//這通常很有用，因為在 type="number" 時 HTML 中輸入的值也總是會返回字串型別
（3）.trim
如果要自動過濾使用者輸入的首尾空格，可以新增 trim 修飾符到 v-model 上過濾輸入：
<input v-model.trim="msg">
例項，全選與取消全選：
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<div id="app">
<p>全選：</p>
<input type="checkbox" id="checkbox" v-model="checked" @click="changeAllChecked()">
<label for="checkbox">
{{checked}}
</label>
<p>多個核取方塊：</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">
Runoob
</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">
Google
</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">
taobao
</label>
<br>
<span>
選擇的值為:{{checkedNames}}
</span>
</div>
new Vue({
el: '#app',
data: {
checked: false,
checkedNames: [],
checkedArr: ["Runoob", "Taobao", "Google"]
},
methods: {
changeAllChecked: function() {
if (this.checked) {
this.checkedNames = this.checkedArr
} else {
this.checkedNames = []
}
}
},
watch: {
"checkedNames": function() {
if (this.checkedNames.length == this.checkedArr.length) {
this.checked = true
} else {
this.checked = false
}
}
}
})
二、元件
元件（Component）是 Vue.js 最強大的功能之一。元件可以擴充套件 HTML 元素，封裝可重用的程式碼。元件系統讓我們可以用獨立可複用的小元件來構建大型應用，幾乎任意型別的應用的介面都可以抽象為一個元件樹。
註冊一個全域性元件語法格式如下：
Vue.component(tagName, options)
tagName 為元件名，options 為配置選項。註冊後，我們可以使用以下方式來呼叫元件：
<tagName></tagName>
1、全域性元件
所有例項都能用全域性元件。
//註冊一個簡單的全域性元件 runoob，並使用它：
<div id="app">
<runoob></runoob>
</div>
<script>
// 註冊
Vue.component('runoob', {
template: '<h1>自定義元件!</h1>'
})
// 建立根例項
new Vue({
el: '#app'
})
</script>
2、區域性元件
我們也可以在例項選項中註冊區域性元件，這樣元件只能在這個例項中使用：
//註冊一個簡單的區域性元件 runoob，並使用它：
<div id="app">
<runoob></runoob>
</div>
<script>
var Child = {
template: '<h1>自定義元件!</h1>'
}
// 建立根例項
new Vue({
el: '#app',
components: {
// <runoob> 將只在父模板可用
'runoob': Child
}
})
</script>
3、Prop
prop 是父元件用來傳遞資料的一個自定義屬性。
父元件的資料需要通過 props 把資料傳給子元件，子元件需要顯式地用 props 選項宣告 "prop"：
<div id="app">
<child message="hello!"></child>
</div>
<script>
// 註冊
Vue.component('child', {
// 宣告 props
props: ['message'],
// 同樣也可以在 vm 例項中像 "this.message" 這樣使用
template: '<span>{{ message }}</span>'
})
// 建立根例項
new Vue({
el: '#app'
})
</script>
4、動態 Prop
類似於用 v-bind 繫結 HTML 特性到一個表示式，也可以用 v-bind 動態繫結 props 的值到父元件的資料中。每當父元件的資料變化時，該變化也會傳導給子元件：
<div id="app">
<div>
<input v-model="parentMsg">
<br>
<child v-bind:message="parentMsg"></child>
</div>
</div>
<script>
// 註冊
Vue.component('child', {
// 宣告 props
props: ['message'],
// 同樣也可以在 vm 例項中像 "this.message" 這樣使用
template: '<span>{{ message }}</span>'
})
// 建立根例項
new Vue({
el: '#app',
data: {
parentMsg: '父元件內容'
}
})
</script>
將 v-bind 指令將 todo 傳到每一個重複的元件中：
<div id="app">
<ol>
<todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
</ol>
</div>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
new Vue({
el: '#app',
data: {
sites: [
{ text: 'Runoob' },
{ text: 'Google' },
{ text: 'Taobao' }
]
}
})
</script>
注意：prop 是單向繫結的：當父元件的屬性變化時，將傳導給子元件，但是不會反過來。
5、Prop 驗證
元件可以為 props 指定驗證要求。prop 是一個物件而不是字串陣列時，它包含驗證要求：
Vue.component('example', {
props: {
// 基礎型別檢測 （`null` 意思是任何型別都可以）
propA: Number,
// 多種型別
propB: [String, Number],
// 必傳且是字串
propC: {
type: String,
required: true
},
// 數字，有預設值
propD: {
type: Number,
default: 100
},
// 陣列／物件的預設值應當由一個工廠函式返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定義驗證函式
propF: {
validator: function (value) {
return value > 10
}
}
}
})
type 可以是下面原生構造器：String、Number、Boolean、Function、Object、Array；
type 也可以是一個自定義構造器，使用 instanceof 檢測。
6、自定義事件
父元件是使用 props 傳遞資料給子元件，但如果子元件要把資料傳遞回去，就需要使用自定義事件！我們可以使用 v-on 繫結自定義事件，每個 Vue 例項都實現了事件介面(Events interface)，即：
（1）使用 $on(eventName) 監聽事件
（2）使用 $emit(eventName) 觸發事件
另外，父元件可以在使用子元件的地方直接用 v-on 來監聽子元件觸發的事件。
以下例項中子元件已經和它外部完全解耦了。它所做的只是觸發一個父元件關心的內部事件。
<div id="app">
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</div>
<script>
Vue.component('button-counter', {
template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
incrementHandler: function () {
this.counter += 1
this.$emit('increment')//觸發事件，父元件用v-on:increment監聽子元件觸發的事件
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})
</script>
如果你想在某個元件的根元素上監聽一個原生事件。可以使用 .native 修飾 v-on 。例如：
<my-component v-on:click.native="doTheThing"></my-component>