一、表單
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>