A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 dkxhy 于 2017-12-8 19:09 编辑

   什么是双向数据绑定:

 vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是vue的精髓之处了。值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定。
一,访问器属性  
  在实现双向数据绑定之前,我们必须要理解访问器属性Object.defineProperty()这个概念:
   Object.defineProperty()函数可以定义对象的属性相关描述符, 其中的set和get函数对于完成数据双向绑定起到了至关重要的作用,下面,我们看看这个函数的基本使用方式。
[AppleScript] 纯文本查看 复制代码
var obj = {
foo: 'foo'
}

Object.defineProperty(obj, 'foo', {
get: function () {
console.log('将要读取obj.foo属性');
},
set: function (newVal) {
console.log('当前值为', newVal);
}
});

obj.foo; // 将要读取obj.foo属性
obj.foo = 'name'; // 当前值为 name


可以看到,get即为我们访问属性时调用,set为我们设置属性值时调用。
二、简单的数据双向绑定实现方法
[HTML] 纯文本查看 复制代码
<!DOCTYPE html><html lang="en">
<head>
    <meta charset="UTF-8">
    <title>forvue</title>
</head>
<body>
<input type="text" id="textInput">
输入:<span id="textSpan"></span>
<script>
    var obj = {},
        textInput = document.querySelector('#textInput'),
        textSpan = document.querySelector('#textSpan');

    Object.defineProperty(obj, 'foo', {
        set: function (newValue) {
            textInput.value = newValue;
            textSpan.innerHTML = newValue;
        }
    });

    textInput.addEventListener('keyup', function (e) {
        obj.foo = e.target.value;
    });

</script>
</body>
</html>
在浏览器中测试,发现实现了双向绑定的功能: 使用Object.defineProperty()来定义属性的set函数,属性被赋值的时候,修改Input的value值以及span中的innerHTML;然后监听input的keyup事件,修改对象的属性值。即可实现这样的一个简单的数据双向绑定。

1 个回复

倒序浏览
优秀,奈斯
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马