v-model用在input

vue是單向資料流，v-model只是語法糖（語法糖可以檢視https://blog.csdn.net/Merlin2017/article/details/78075206?utm_source=blogxgwz3），它負責監聽使用者的輸入事件以更新資料，並特別處理一些極端的例子。

注意：v-model會忽略所有表單元素的value、checked、selected特性的初始值。因為它會選擇Vue例項資料來作為具體的值。你應該通過JavaScript在元件的data選項中宣告初始值。

<input v-model="sth" />
<input v-bind:value="sth" v-on:input="sth = $event.target.value" />
 

第一行程式碼是第二行的語法糖，要理解這行程式碼，首先你要知道 input 元素本身有個 oninput 事件，這是 HTML5 新增加的，類似 onchange ，每當輸入框內容發生變化，就會觸發 oninput ，把最新的value傳遞給 sth。

我們仔細觀察語法糖和原始語法那兩行程式碼，可以得出一個結論：

在給 <input /> 元素新增 v-model 屬性時，預設會把 value 作為元素的屬性，然後把 'input' 事件作為實時傳遞 value 的觸發事件

v-model用在元件

v-model 不僅僅能在 input上用，在元件上也能使用，下面是一個和 Vue 官網教程類似的例子（在看這個例子時我們要考慮兩個問題）：

父元件的 price

<div id="demo">
  <currency-input v-model="price"></currentcy-input>
  <span>{{price}}</span>
</div>
<script src="https://cdn.bootcss.com/vue/2.3.0/vue.js"></script>
<script>
Vue.component('currency-input', {
  template: `
    <span>
      <input
        ref="input"
        :value="value"
        <!--為什麼這裡把 'input' 作為觸發事件的事件名？`input` 在哪定義的？-->
        @input="$emit('input', $event.target.value)"
      >
    </span>
  `,
  props: ['value'],// 為什麼這裡要用 value 屬性，value在哪裡定義的？貌似沒找到啊？
})

var demo = new Vue({
  el: '#demo',
  data: {
    price: 100,
  }
})
</script>

如果你知道這兩個問題的答案，那麼恭喜你真正掌握了 v-model，如果你沒明白，那麼可以看下這段程式碼：

<currency-input v-model="price"></currentcy-input>
<!--上行程式碼是下行的語法糖
  <currency-input :value="price" @input="price = arguments[0]"></currency-input>
-->

現在你知道 value 和 input 從哪來的了吧。與上面總結的類似：

給元件新增 v-model 屬性時，預設會把 value 作為元件的屬性，然後把 'input' 值作為給元件繫結事件時的事件名

v-model 的缺點和解決辦法

在建立類似複選框或者單選框的常見元件時，v-model就不好用了。

v-model 給我們提供好了 value 屬性和 oninput 事件，但是，我們需要的不是 value 屬性，而是 checked 屬性，並且當你點選這個單選框的時候不會觸發 oninput 事件，它只會觸發 onchange 事件。

因為 v-model 只是用到了 input 元素上，所以這種情況好解決：

<input type="checkbox" :checked="status" @change="status = $event.target.checked" />

當 v-model 用到元件上時：

<my-checkbox v-model="foo"></my-checkbox>

Vue.component('my-checkbox', {
  tempalte: `<input 
               type="checkbox"
               @change="$emit('input', $event.target.checked)"
               :checked="value"
             />`
  props: ['value'],
})

在 Vue 2.2 版本，你可以在定義元件時通過 model 選項的方式來定製 prop/event：

<my-checkbox v-model="foo"></my-checkbox>

Vue.component('my-checkbox', {
  tempalte: `<input 
               type="checkbox"
               <!--這裡就不用 input 了，而是 balabala-->
               @change="$emit('balabala', $event.target.checked)"
               :checked="checked"
             />`
  props: ['checked'], //這裡就不用 value 了，而是 checked
  model: {
    prop: 'checked',
    event: 'balabala'
  },
})