vue中v-model詳解|黑馬程序員

更新時(shí)間:2018-08-16 來(lái)源:黑馬程序員技術(shù)社區(qū) 瀏覽量:

v-model在input元素上時(shí)
v-model雖然很像使用了雙向數(shù)據(jù)綁定的 Angular 的 ng-model，但是 Vue 是單項(xiàng)數(shù)據(jù)流，v-model 只是語(yǔ)法糖而已。

（語(yǔ)法糖：也譯為糖衣語(yǔ)法，主要是方便程序員使用，通常來(lái)說(shuō)使用語(yǔ)法糖能夠增加程序的可讀性，從而減少程序代碼出錯(cuò)的機(jī)會(huì)。）

1574387978840_vue中v-model詳解.jpg

第一行的代碼其實(shí)只是第二行的語(yǔ)法糖。

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

然后第二行代碼還能簡(jiǎn)寫成這樣：

<input :value="sth" @input="sth = $event.target.value" />

要理解這行代碼，首先你要知道 input 元素本身有個(gè) oninput 事件，這是 HTML5 新增加的，類似 onchange ，每當(dāng)輸入框內(nèi)容發(fā)生變化時(shí)，就會(huì)觸發(fā)oninput，把最新的value傳遞給 sth。

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

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

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

組件描述：父組件的 price 的初始值是 100，更改子組件的值能實(shí)時(shí)更新父組件的 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="$emit('input', $event.target.value)"
>
  </span>
`,
props: ['value'],// 為什么這里要用 value 屬性，value在哪里定義的？貌似沒找到啊？
})

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

如果你知道這兩個(gè)問(wèn)題的答案，那么恭喜你真正掌握了 v-model，如果你沒明白，那么可以看下這段代碼：

<currency-input v-model="price"></currentcy-input>


現(xiàn)在你知道 value 和 input 從哪來(lái)的了吧。與上面總結(jié)的類似：
給組件添加 v-model 屬性時(shí)，默認(rèn)會(huì)把 value 作為組件的屬性，然后把 'input' 值作為給組件綁定事件時(shí)的事件名
v-model 的缺點(diǎn)和解決辦法
在創(chuàng)建類似復(fù)選框或者單選框的常見組件時(shí)，v-model就不好用了。

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

v-model 給我們提供好了 value 屬性和 oninput 事件，但是，我們需要的不是 value 屬性，而是 checked 屬性，并且當(dāng)你點(diǎn)擊這個(gè)單選框的時(shí)候不會(huì)觸發(fā) oninput 事件，它只會(huì)觸發(fā) onchange 事件。這就尷尬了
因?yàn)?v-model 只是用到了 input 元素上，所以這種情況好解決：

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

當(dāng) v-model 用到組件上時(shí)：

<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 版本，你可以在定義組件時(shí)通過(guò) mode l選項(xiàng)的方式來(lái)定制 prop/event：

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

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

Vue.js框架是什么，為什么選擇它?

上一篇：清除浮動(dòng)的幾種方法 下一篇：文本框、選項(xiàng)下拉列表里的幾個(gè)屬性與select...