JS實現Vue雙向綁定命令-上

var obj = {};

Object.defineProperty(obj,"hello",{

set:function(newVal){

document.getElementById("a").value = newVal;

document.getElementById("b").innerHTML = newVal;

}

})

document.addEventListener("keyup",function(e){

obj.hello = e.target.value;

})

此例實現的效果是：隨文本框輸入文字的變化，span 中會同步顯示相同的文字內容；在js或控制檯顯式的修改 obj.hello 的值，視圖會相應更新。這樣就實現了 model => view 以及 view => model 的雙向綁定。

以上是Vue實現雙向綁定的基本原理。

樓主提供了實例代碼哦:

https://github.com/Melody-YW/JavaScript/blob/master/Js%E5%AE%9E%E7%8E%B0vue%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/mvvm-minimalist.html

2-js實現Vue雙向綁定進階版

上述實例僅僅說明了Vue原理，而我們最終要實現的是

首先將任務分為幾個子任務:

1.輸入框以及文本節點與data中的數據綁定

2.輸入框變化時,data中的數據同步變化。即view=>model的變化

3. Data中的數據變化時,文本節點的內容同步變化。即model=>view的變化。

·要實現任務一，需要對DOM進行編譯，這裡有一個知識點：DocumentFragment/'dɒkjʊm(ə)nt/ /'frægm(ə)nt/

-DocumentFragment

DocumentFragment（文檔片段）可以看作節點容器，它可以包含多個子節點，當我們將它插入到 DOM 中時，只有它的子節點會插入目標節點，所以把它看作一組節點的容器。使用 DocumentFragment 處理節點，速度和性能遠遠優於直接操作 DOM。Vue 進行編譯時，就是將掛載目標的所有子節點劫持（真的是劫持，通過 append 方法，DOM 中的節點會被自動刪除）到 DocumentFragment 中，經過一番處理後，再將 DocumentFragment 整體返回插入掛載目標。

以上是我們針對DocumentFragment做的一個小練習，接下來我們將會進入js實現雙向綁定的實戰環節

完整代碼地址：https://github.com/Melody-YW/JavaScript/blob/master/Js%E5%AE%9E%E7%8E%B0vue%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A/documentfrgment.html

2.1 數據初始化綁定

以上代碼實現了任務一，我們通過代碼的編寫可以完成Vue中data的text值呈現在輸入框與文本節點中。可是這並未完成我們真正的Vue雙向綁定功能，在下一章的內容中，我們將會完成我們任務分解的第二第三步,並且實現Vue的雙向綁定。

在下一章中,我將會簡單的介紹到訂閱/發佈模式,有感興趣的童鞋可以自己查閱一些相關技術文檔資料,這將會對我們瞭解Vue雙向綁定有很大的幫助哦!

感謝源碼時代教學講師提供此文章！

閱讀更多 源碼時代 的文章

關鍵字: 屬性 對象 技術