分享
Vue 官網教學上關於 v-model 的講解不是十分的詳細，寫這篇文章的目的就是詳細的剖析一下， 並介紹Vue 2.2 # v-model改進的地方，然後穿插的再說點Vue 的小知識。
在 Vue 中，有許多方法和 Angular 相似，這主要是因為 Angular 是 Vue 早期開發的靈感來源。然而，Augular 中存在許多問題，在 Vue 中已經解決。
v-model雖然很像使用了雙向資料綁定的Angular 的 #ng- model，但Vue 是單一資料流，v-model 只是語法糖而已：↓
<input v-model="sth" /> <input v-bind:value="sth" v-on:input="sth = $event.target.value" />
第一行的程式碼其實只是第二行的語法糖。然後第二行程式碼還能簡單寫成這樣：↓
<input :value="sth" @input="sth = $event.target.value" />
要理解這行程式碼，首先你要知道 input 元素本身有個 oninput 事件，這是HTML5 新增加的，類似 onchange ，每當輸入方塊內容變化，就會觸發 oninput ，將最新的value交給 sth。
如果你不知道 $event 是從哪裡來的，那你需要點選它再複習一下文件。
我們仔細觀察語法糖和原始語法那兩行程式碼，可以得出一個結論：
在給 元素加上v-model 屬性時，預設會把value 作為元素的屬性，然後把'input' 事件當作即時傳遞value 的觸發事件
##v-model 不只能在 input上使用，在元件上也能使用，以下是和Vue 官網教學類似的例子（看這個範例時我們要考慮兩個問題）：
price 的初始值是100，改變子元件的值能即時更新父元件的 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?1.1.11"></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就不好用了。
<input type="checkbox" v-model="sth" />
v-model 給我們提供了 value 屬性和 oninput 事件，但是，我們需要的不是 value 屬性，而是 checked 屬性，並且當你點選這個單選框的時候不會觸發 oninput 事件，它只會觸發 onchange 事件。這就尷尬了
以上是Vue 進階教學之：v-model的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
