vue中的双向数据绑定小解

参考文档：https://www.cnblogs.com/zhuzhenwei918/p/7309604.html

前辈写的文档要看懂需要的知识太多了，对此进行一点简化让我普通的脑子看懂。

前言

什么是数据双向绑定？ 

　　vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是vue的精髓之处了。 

为什么要实现数据的双向绑定？

　　 在vue中，如果使用vuex，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单，vue的双向数据绑定用起来就特别舒服了。

　　 即两者并不互斥， 在全局性数据流使用单项，方便跟踪； 局部性数据流使用双向，简单易操作。

　　Object.defineProperty方法允许通过属性描述对象，定义或修改一个属性，然后返回修改后的对象，它的用法如下。 ）

语法格式: Object.defineProperty(object, propertyName, attributesObject)

 Object.defineProperty方法接受三个参数，依次如下。

  • 属性所在的对象
  • 属性名（它应该是一个字符串）
  • 属性描述对象

小例子：

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

　　

二、简单的数据双向绑定实现方法

<!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 = {},
        //querySelector：匹配id等于textInput的第一个css元素
        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函数，

　　obj.foo变成什么值，Input的value值以及span中的innerHTML也变成什么值；

　　然后监听input的keyup事件，修改对象的属性值，

　　即完成实现一个简单的数据双向绑定了。

       为什么不把Input的value值以及span中的innerHTML 直接等于 e.target.value ？










            

            
posted @ 
2021-03-09 03:16 
程序1088 
阅读(49) 
评论(0) 
 
收藏 
举报