利用原生JS实现VUE中的双向绑定
<!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的双向数据绑定的核心点。