vue實現簡單數據雙向綁定
本文實例為大傢分享瞭vue實現簡單數據雙向綁定的具體代碼,供大傢參考,具體內容如下
這裡是簡單的實現,有助於新手理解消化,當然vue要實現雙向數據代理不可缺少,期待後續在更新
vue雙向數據綁定
-> Object.defineProperty() //2.0核心語法
-> 數據代理
-> 雙向綁定
-> 訂閱發佈模式
compile-> 模版解析 (template模版 html 指令 {{表達式}})
observer-> 觀察者(訂閱發佈) data裡的所有的屬性進行 數據劫持 數據代理
watcher-> 監聽 data裡的所有的屬性被改變之後觸發
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <input type="text" id="ipt" /> <p id="lc"></p> </body> </html>
<script> //獲取頁面元素 var ipt = document.getElementById("ipt"); var ps = document.getElementById("lc"); var obj = { name: "" }; //vue雙向數據綁定的核心原理應用 Object.defineProperty(obj, "name", { get() { return ipt.value; }, set(newval) { ipt.value = newval; ps.innerHTML = newval; }, }); //監聽input中的數據變化並賦值p標簽 ipt.addEventListener("keyup", function() { ps.innerHTML = ipt.value; }); </script>
效果展示:
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。