您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)vue中雙向事件綁定的原理是什么,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
與js或者jquery直接改變操作dom不同,vue使用v-model實(shí)現(xiàn)數(shù)據(jù)的雙向綁定,它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來(lái)更新元素。
v-model就是vue的雙向綁定的指令,能將頁(yè)面上控件輸入的值同步更新到相關(guān)綁定的data屬性,也會(huì)在更新data綁定屬性時(shí)候,更新頁(yè)面上輸入控件的值
官方文檔這么解釋:
v-model只不過(guò)是一個(gè)語(yǔ)法糖而已,真正的實(shí)現(xiàn)靠的還是
v-bind:綁定響應(yīng)式數(shù)據(jù)
觸發(fā) input 事件 并傳遞數(shù)據(jù) (核心和重點(diǎn))
如下代碼
<input v-model="txt">
本質(zhì)上是
<input :value="txt" @input="txt = $event.target.value">
初始化vue實(shí)例時(shí)候,會(huì)遞歸遍歷data的每一個(gè)屬性,并且通過(guò)defineProperty來(lái)監(jiān)聽(tīng)每一個(gè)屬性的get,set方法,從而一旦某個(gè)屬性重新賦值,則能監(jiān)聽(tīng)到變化來(lái)操作相應(yīng)的頁(yè)面控制
看下方代碼:
Object.defineProperty(data,"name",{ get(){ return data["name"]; }, set(newVal){ let val=data["name"]; if (val===newVal){ return; } data["name"]=newVal; // 監(jiān)聽(tīng)到了屬性值的變化,假如node是其對(duì)應(yīng)的input節(jié)點(diǎn) node.value=newVal; } })
一方面modal層通過(guò)Object.defineProperty來(lái)劫持每個(gè)屬性,一旦監(jiān)聽(tīng)到變化通過(guò)相關(guān)的頁(yè)面元素更新。另一方面通過(guò)編譯模板文件,為控件的v-model綁定input事件,從而頁(yè)面輸入能實(shí)時(shí)更新相關(guān)data屬性值
那么Object.defineProperty是用來(lái)控制一個(gè)對(duì)象屬性的一些特有操作,比如讀寫權(quán)、是否可以枚舉,這里我們主要先來(lái)研究下它對(duì)應(yīng)的兩個(gè)描述屬性get和set,v-model其實(shí)是對(duì)其get和set進(jìn)行重寫操作,get就是在讀取name屬性這個(gè)值觸發(fā)的函數(shù),set就是在設(shè)置name屬性這個(gè)值觸發(fā)的函數(shù)
v-model修飾符:.lazy、.trim和.number
lazy :在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步,添加 lazy 修飾符,從而轉(zhuǎn)變?yōu)槭褂?change 事件進(jìn)行同步
<input v-model.lazy="msg">
trim :去除字符串首尾的空格
<input v-model.trim="msg">
number :將數(shù)據(jù)轉(zhuǎn)化為值類型
<input v-model.number="msg">
看完上述內(nèi)容,你們對(duì)vue中雙向事件綁定的原理是什么有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。