利用JS實現vue中的雙向繫結
阿新 • • 發佈：2018-12-09
Vue 已經是主流框架了
它的好處也不用多說，都已經是大家公認的了
那我們就來理解一下Vue的單向資料繫結和雙向資料繫結
然後再使用JS來實現Vue的雙向資料繫結
單向資料繫結
指的是我們先把模板寫好，然後把模板和資料（資料可能來自後臺）整合到一起形成HTML程式碼，然後把這段HTML程式碼插入到文件流裡面。 單向資料繫結缺點：HTML程式碼一旦生成完以後，就沒有辦法再變了，如果有新的資料來了，那就必須把之前的HTML程式碼去掉，再重新把新的資料和模板一起整合後插入到文件流中。 簡單的來說就是DOM操作直接改變
雙向資料繫結
資料模型（Module）和檢視（View）之間的雙向繫結。
使用者在檢視上的修改會自動同步到資料模型中去
如何使用js達到雙向資料繫結
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title></head> <body> <input type="text" id="userName"> <br> <span id ="uName"></span> <script> var obj={ pwd:"1234" }; //主要使用到了get和set方法，最為關鍵 Object.defineProperty(obj,"userName",{ get:function(){ console.log('get init'); }, set:function(val){ console.log("set init"); document.getElementById("uName").innerText=val; document.getElementById("userName").value=val; } }); document.getElementById("userName").addEventListener("keyup",function(event){ obj.userName=event.target.value; } ) </script> </body> </html>
執行上述的dome，可以使用控制檯，obj.username=123賦值，會自動觸發set方法。若我們在控制檯使用obj.username拿值可以觸發get方法，也就是vue的雙向資料繫結的核心點。