快捷導(dǎo)航

Vue 進(jìn)階教程之v-model詳解

更新時間：2017年05月06日 15:10:08 作者：Yi罐可樂

這篇文章主要介紹了Vue 進(jìn)階教程之v-model詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

Vue 官網(wǎng)教程上關(guān)于 v-model 的講解不是十分的詳細(xì)，寫這篇文章的目的就是詳細(xì)的剖析一下，并介紹 Vue 2.2 v-model改進(jìn)的地方，然后穿插的再說點(diǎn) Vue 的小知識。

在 Vue 中，有許多方法和 Angular 相似，這主要是因為 Angular 是 Vue 早期開發(fā)的靈感來源。然而，Augular 中存在許多問題，在 Vue 中已經(jīng)得到解決。

v-model 用在 input 元素上時

v-model雖然很像使用了雙向數(shù)據(jù)綁定的 Angular 的 ng-model，但是 Vue 是單項數(shù)據(jù)流，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 ，每當(dāng)輸入框內(nèi)容發(fā)生變化，就會觸發(fā) oninput ，把最新的value傳遞給 sth。

如果你不知道 $event 是從哪來的，那你需要點(diǎn)擊它再復(fù)習(xí)一下文檔。

我們仔細(xì)觀察語法糖和原始語法那兩行代碼，可以得出一個結(jié)論：

在給 <input /> 元素添加 v-model 屬性時，默認(rèn)會把 value 作為元素的屬性，然后把 'input' 事件作為實時傳遞 value 的觸發(fā)事件

v-model 用在組件上時

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

父組件的 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"></script>
<script>
Vue.component('currency-input', {
 template: `
  <span>
   <input
    ref="input"
    :value="value"
    <!--為什么這里把 'input' 作為觸發(fā)事件的事件名？`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>
-->

現(xiàn)在你知道 value 和 input 從哪來的了吧。與上面總結(jié)的類似：

給組件添加 v-model 屬性時，默認(rèn)會把 value 作為組件的屬性，然后把 'input' 值作為給組件綁定事件時的事件名

v-model 的缺點(diǎn)和解決辦法

在創(chuàng)建類似復(fù)選框或者單選框的常見組件時，v-model就不好用了。

<input type="checkbox" v-model="sth" />

v-model 給我們提供好了 value 屬性和 oninput 事件，但是，我們需要的不是 value 屬性，而是 checked 屬性，并且當(dāng)你點(diǎn)擊這個單選框的時候不會觸發(fā) oninput 事件，它只會觸發(fā) onchange 事件。這就尷尬了😓

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

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

當(dāng) 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 版本，你可以在定義組件時通過 mode l選項的方式來定制 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="value"
       />`
 props: ['checked'], //這里就不用 value 了，而是 checked
 model: {
  prop: 'checked',
  event: 'balabala'
 },
})

看到這里我相信你肯定理解了 Vue 的 v-model，文中如有錯誤，歡迎在評論中指出謝謝。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: