<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue双向绑定的原理测试</title>
</head>
<body>
手写一个简单双向绑定<br />
<input type="text" id="model"><br />
<div id="modelText"></div>
<script>
/*
* @Author: 曾经的水哥 https://www.cnblogs.com/cengjingdeshuige/
* @Date: 2018-09-25 15:14:59
* @Last Modified by: mikey.zhaopeng
* @Last Modified time: 2018-09-25 15:15:50
*/
var user = {};
var defaultName = '2222222222ssas'
var model = document.querySelector("#model")
var modelText = document.querySelector("#modelText");
model.value = defaultName
modelText.textContent = defaultName
// 定义属性 监控改变
Object.defineProperty(user, 'name', {
get: function () {
console.log('获取值')
return defaultName
},
set: function (newValue) {
console.log('设置新的值')
defaultName = newValue
model.value = newValue
modelText.textContent = newValue
}
})
model.addEventListener('keyup', function () {
user.name = this.value
console.log('取值')
}, false)
// 获取值
console.log(user.name)
</script>
</body>
</html>
