Vue 已經是主流框架了
它的好處也不用多說，都已經是大家公認的了
那我們就來理解一下Vue的單向數據綁定和雙向數據綁定
然後再使用JS來實現Vue的雙向數據綁定
單向數據綁定
指的是我們先把模板寫好，然後把模板和數據（數據可能來自後臺）整合到一起形成HTML代碼，然後把這段HTML代碼插入到文檔流裏面。
單向數據綁定缺點：HTML代碼一旦生成完以後，就沒有辦法再變了，如果有新的數據來了，那就必須把之前的HTML代碼去掉，再重新把新的數據和模板一起整合後插入到文檔流中。 簡單的來說就是DOM操作直接改變
雙向數據綁定
數據模型（Module）和視圖（View）之間的雙向綁定。
用戶在視圖上的修改會自動同步到數據模型中去，同樣的，如果數據模型中的值發生了變化，也會立刻同步到視圖中去。雙向數據綁定的優點是無需進行和單向數據綁定的那CRUD（Create，Retrieve，Update，Delete）操作雙向數據綁定最經常的應用場景就是表單了，這樣當用戶在前端頁面完成輸入後，不用任何操作，我們就已經拿到了用戶的數據存放到數據模型中了。
如何使用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的雙向數據綁定的核心點。