码迷,mamicode.com
首页 > 其他好文 > 详细

vue数据绑定原理

时间:2017-11-27 21:38:19      阅读:81      评论:0      收藏:0      [点我收藏+]

标签:innertext   ack   class   def   基础   枚举   round   func   基础知识   

来点基础知识:

属性值是函数的属性叫方法。

对象就是属性和方法的集合。

我们来谈谈属性。

属性表面上来看就好像是键值对

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数据绑定原理

标签:innertext   ack   class   def   基础   枚举   round   func   基础知识   

原文地址:http://www.cnblogs.com/zhouxiaohouer/p/7905801.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!