<!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-08-05 04:51:08