與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;
        }    
    })

總結(jié)

一方面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ì)象屬性的一些特有操作，比如讀寫(xiě)權(quán)、是否可以枚舉，這里我們主要先來(lái)研究下它對(duì)應(yīng)的兩個(gè)描述屬性get和set，v-model其實(shí)是對(duì)其get和set進(jìn)行重寫(xiě)操作，get就是在讀取name屬性這個(gè)值觸發(fā)的函數(shù)，set就是在設(shè)置name屬性這個(gè)值觸發(fā)的函數(shù)

補(bǔ)充

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">

到此這篇關(guān)于淺談vue實(shí)現(xiàn)雙向事件綁定v-model的原理的文章就介紹到這了,更多相關(guān)vue 雙向事件綁定v-model內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論