一、表單

用 v-model 指令在表單控制元件元素上建立雙向資料繫結。

簡言之：就是模板表單中的某一個元素標籤值與js物件的data建立一一對應的關係。什麼都不寫，Vue自帶繫結。

<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>

單個複選框比較容易理解。

多個複選框怎麼是一個數組，還要再想想。

<div id="app">
  <input type="radio" id="runoob" value="Runoob" v-model="picked">
  <label for="runoob">Runoob</label>
  <br>
  <input type="radio" id="google" value="Google" v-model="picked">
  <label for="google">Google</label>
  <br>
  <span>選中值為: {{ picked }}</span>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    picked : 'Runoob'
  }
})
</script>

直到看到radio的例子我懂了，原來v-model繫結是data物件中的key，value是表單元素對應的value值。

理解之後，那select不攻自破了。

不過下面強大的修飾符是我沒想到的，厲害厲害！

.lazy

在預設情況下， v-model 在 input 事件中同步輸入框的值與資料，但你可以新增一個修飾符 lazy ，從而轉變為在 change 事件中同步：

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number

如果想自動將使用者的輸入值轉為 Number 型別（如果原值的轉換結果為 NaN 則返回原值），可以新增一個修飾符 number 給 v-model 來處理輸入值：

<input v-model.number="age" type="number">

這通常很有用，因為在 type="number" 時 HTML 中輸入的值也總是會返回字串型別。

.trim

如果要自動過濾使用者輸入的首尾空格，可以新增 trim 修飾符到 v-model 上過濾輸入：

<input v-model.trim="msg">

二、元件

三、路由

四、