1.Object.defineProperty()函数
<!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>
<script>
var obj = {
pwd:"123456" // 2. 直接在这里给obj添加新属性
};
Object.defineProperty(obj,"userName",{ // 1. 给obj拓展一个新的属性 (Object.definePropert有拓展属性的能力)
value:"Jack"
});
</script>
</body>
</html>
介绍一下Object.defineProperty()函数有拓展对象属性的能力。
在控制台中可看到两种方法都可以为 obj 对象添加属性
2.input监听数据变化
<!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>
<script>
document.getElementById("userName").addEventListener("keyup",function(event){
document.getElementById("uName").innerText = event.target.value;
})
</script>
</body>
</html>
在input输入框中输入时可看到:
这个可以通过input监听数据变化,但是需要添加keyup事件去监听,要不然就不知道用户发生了改变
3.vue双向数据绑定关键
<!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>
<script>
var obj = {
pwd:"123456" // 2. 直接在这里给obj添加新属性
};
Object.defineProperty(obj,"userName",{ // 1. 给obj拓展一个新的属性
get:function(){
console.log("get init")
},
set:function(){
console.log("set init")
}
});
</script>
</body>
</html>
可看到在下图中,为obj的userName属性重新赋值的时候,触发了set init;获取obj的userName属性的时候
触发了set init。
在代码中再更改一些:
<!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>
<script>
var obj = {
pwd:"123456" // 2. 直接在这里给obj添加新属性
};
Object.defineProperty(obj,"userName",{ // 1. 给obj拓展一个新的属性
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>
在控制台中更改userName属性后,input上的值和span中的值同时出现了
这是vue中双向数据绑定的关键!