Vue 进阶教程之:详解 v-model
生活随笔
收集整理的這篇文章主要介紹了
Vue 进阶教程之:详解 v-model
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
分享
Vue 官網(wǎng)教程上關于?
v-model?的講解不是十分的詳細,寫這篇文章的目的就是詳細的剖析一下, 并介紹 Vue 2.2? v-model改進的地方,然后穿插的再說點 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?元素本身有個? oninput?事件,這是 HTML5 新增加的,類似? onchange?,每當輸入框內(nèi)容發(fā)生變化,就會觸發(fā)? oninput?,把最新的 value傳遞給? sth。如果你不知道? $event?是從哪來的,那你需要點擊它再復習一下文檔。
我們仔細觀察語法糖和原始語法那兩行代碼,可以得出一個結論:
在給 <input /> 元素添加 v-model 屬性時,默認會把 value 作為元素的屬性,然后把 'input' 事件作為實時傳遞 value 的觸發(fā)事件
v-model 用在組件上時
v-model?不僅僅能在? input上用,在組件上也能使用,下面是一個和 Vue 官網(wǎng)教程類似的例子(在看這個例子時我們要考慮兩個問題):實例演示.gif
父組件的?
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?從哪來的了吧。與上面總結的類似:給組件添加 v-model 屬性時,默認會把 value 作為組件的屬性,然后把 'input' 值作為給組件綁定事件時的事件名
v-model 的缺點和解決辦法
在創(chuàng)建類似復選框或者單選框的常見組件時,
v-model就不好用了。 <input type="checkbox" v-model="sth" /> v-model?給我們提供好了? value?屬性和? oninput?事件,但是,我們需要的不是? value?屬性,而是? checked?屬性,并且當你點擊這個單選框的時候不會觸發(fā)? oninput?事件,它只會觸發(fā)? onchange?事件。這就尷尬了?因為?
v-model?只是用到了 input 元素上,所以這種情況好解決:↓ <input type="checkbox" :checked="status"當?
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' }, })。
學習過程中遇到什么問題或者想獲取學習資源的話,歡迎加入學習交流群
343599877,我們一起學前端!
總結
以上是生活随笔為你收集整理的Vue 进阶教程之:详解 v-model的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: margin赋值为负值的几种效果(负值像
- 下一篇: vue2.0中的:is和is的区别