<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue双向数据绑定原理和模拟</title> </head> <body> <input type="text" id="userName"> <br> <span id="uName"></span> </body> </html> <script type="text/javascript"> var obj = { pwd:"123456" } 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>
vue两大特征
数据驱动
组件化
时间: 2024-10-07 10:20:13