来点基础知识：
属性值是函数的属性叫方法。
对象就是属性和方法的集合。
我们来谈谈属性。
属性表面上来看就好像是键值对
var 我是对象 = {
我是属性名:‘我是属性值‘
}
console.log(我是对象.我是属性名)//我是属性值
然后来介绍下一个增改属性的方法Object.defineProperty()
Object.defineProperty(我是对象,‘我是新增属性‘,{
// 这个对象是用来修饰属性的，即属性的特征属性
// 就是我们看到的属性值
value:‘我是新增属性的属性值‘,
// 这个新增属性是否可以被删或者是否可以再次设置这个属性特征对象。
configurable:true | false,
// 是否可以被枚举到
enumerable:true | false,
// 是否只读
writable:true | false,
// 以下是重点：
// 读取该属性值时触发get函数
get:function() {},
// 修改该属性值时出发set函数
set:function(value) {}
})
介绍完毕。
下面来动手实现下vue的数据绑定。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input id="input" type="text" placeholder="写点东西试试">
<p id="text"></p>
<script type="text/javascript">
var obj ={
name:‘hhh‘
}
Object.defineProperty(obj,‘name‘,{
set:function(value) {
document.getElementById(‘text‘).innerText = value
document.getElementById(‘input‘).value = value
}
})
document.getElementById(‘input‘).addEventListener(‘keyup‘,function(event) {
obj.name = event.target.value
})
</script>
</body>
</html>
时间： 2024-10-13 13:55:40