vue数据绑定原理
Posted 周小猴儿
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue数据绑定原理相关的知识，希望对你有一定的参考价值。
来点基础知识：
属性值是函数的属性叫方法。
对象就是属性和方法的集合。
我们来谈谈属性。
属性表面上来看就好像是键值对
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>
以上是关于vue数据绑定原理的主要内容，如果未能解决你的问题，请参考以下文章