雙向資料綁定是什麼？簡單雙向資料綁定的實作（程式碼範例）
- 青灯夜游原創
- 2018-10-26 11:55:093862瀏覽
雙向資料綁定是什麼？這篇文章帶給大家的內容是介紹雙向資料綁定的相關內容，讓大家了解為什麼要實現雙向資料綁定，以及怎麼實現簡單的雙向資料綁定。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
首先我們了解單向資料綁定和雙向資料綁定是什麼？
單向資料綁定是什麼？
資料模型（Module）和視圖（View）之間的單向綁定。
需要我們先寫好模板，然後把模板和資料（可能來自後台）整合到一起形成HTML程式碼，然後把這段HTML程式碼插入文件流裡面。 簡單的來說就是DOM操作html元素。
單向資料綁定的缺點：一旦HTML程式碼產生好後，就沒有辦法再進行改變了，如果有新的資料出現，那就必須先把之前的HTML程式碼刪掉，然後重新把新的資料和範本一起整合成新的HTML程式碼，再插入文件流程。
雙向資料綁定是什麼？
資料模型和視圖之間的雙向綁定。
當資料發生變化的時候，視圖也就發生變化，當視圖發生變化的時候，資料也會跟著同步變化；可以這樣說使用者在視圖上的修改會自動同步到資料模型中去，資料模型也是同樣的變化。
雙向資料綁定的優點：無需和單向資料綁定那樣進行CRUD（Create，Retrieve，Update，Delete）操作，雙向資料綁定最常應用在就表單上，這樣當使用者在前端頁面完成輸入後，不用任何操作，我們就已經拿到了使用者輸入好的數據，並放到數據模型了。
原生js實作簡單的雙向資料綁定
程式碼範例：標籤內顯示的內容隨使用者輸入的內容而改變
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原生js实现简单的双向数据绑定</title>
</head>
<body>
<input type="text" id="userName">
<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("userNmae").value=val;
}
});
document.getElementById("userName").addEventListener("keyup",function(event){
obj.userName=event.target.value;
}
)
</script>
</body>
</html> 效果圖：
總結：以上就是這篇文章所介紹的有關雙向資料綁定的全部內容，大家可以自己動手嘗試，加深理解。希望能對大家的學習有所幫助，更多相關教學請造訪JavaScript影片教學，jQuery影片教學，bootstrap教學！
以上是雙向資料綁定是什麼？簡單雙向資料綁定的實作（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！