分享
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中文網其他相關文章!