<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<div></div>
</body>
<script>
// 雙向綁定:數據,視圖,當視圖變化,數據變;數據變,視圖變
const ipt = document.querySelector("input");
const div = document.querySelector("div");
//視圖視圖的變化可以輕易通過oninput事件來實現
/* ipt.oninput = function () {
div.innerText = this.value;
}*/
//但是Vue中是數據與視圖的雙向綁定
//需要通過 Object.defineProperty()方法實現
let data = {
str: "你還好嗎?",
}
let str = data.str;
//當改變data中的str數據時 會發生攔截
Object.defineProperty(data, "str", {
get() {
//獲取data中的str數據時 觸發
return str
},
set(v) {
//v 是改變之後的值
// 當改變data中的str數據時 觸發
str = div.innerText = ipt.value = v
console.log(111111, this === data)
//此時的this是攔截的對象
}
})
div.innerText = ipt.value = str;
ipt.oninput = function () {
data.str = this.value;
}
</script>
</html>
Vue雙向數據綁定簡易理解版
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.