全面解析vue中的数据双向绑定


Posted in Javascript onMay 10, 2017

1.vue中数据的双向绑定采用的时候,数据劫持的模式。其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的getter,和setter。这也正是Vue不兼容IE8以下的原因。

2.Object.defineProerty();

var obj = {};
    Object.defineProperty(obj,"hello",{
      enumerable: true,   //表示这个属性能够通过 for -- in 循环 (是否可枚举);
      configurable: true,  //表示这个属性能否用 delete 删除
      get(){ //获取属性值,说白了就是返回值
        return this.val;
      },
      set(newVale){ //对属性的处理 (说白了: 就是在赋值的过程中提供一个方法来决定返回值)
        this.val = newVale + 5; 
        console.log(this.val); // 10
      }
    })
    obj.hello = 5;
    console.log(obj.hello) ; // 10

3.实现简单的双向绑定

<input type="text" id="a">
<div id="b"></div>
<script type="text/javascript">
  var obj = {};
  Object.defineProperty(obj,`value`,{
    enumerable: true,
    configurable: true,
    get(){
      return this.val;
    },
    set(newValue){
      document.getElementById(`b`).innerText = newValue;
      this.val = newValue; //66
    }
  });
  document.getElementById(`a`).addEventListener(`input`,function(event){
    var text = event.target.value; //66
    obj.value = text;
  },false)
</script>

这种方式简单粗暴,直接通过操作DOM完成绑定。我想,肯定有人会认为,你这样写,还不如在input事件中直接对Id为B的DOM元素赋值,这样不是多此一举吗?请看下面在框架中我们该如何实现。

4.实现简单的  v-model

首先我们需要获取文档中的真实元素节点也就是VUE中实列话VUE中元素挂载点(el);在通过createDocumentFragment创建文档碎片,解析操作完毕后,把碎片放置在DOM中。

<div id="app">
  <input type="text" id="a" v-model="text">
  {{text}}
</div>
 <script type="text/javascript">
  function Model(node, vm) {
    if(node) {this.$frag = this.nodeToFragment(node, vm);
      return this.$frag;
    }
  }
  Model.prototype = {
    construtor:'Model',
    nodeToFragment: function(node, vm) {
      var self = this;
      var frag = document.createDocumentFragment();
      var child;
      while(child = node.firstChild) {
        self.moelElement(child, vm);
        frag.appendChild(child); 
// 将所有子节点添加到fragment中,child是指向元素首个子节点的引用。
// 将child引用指向的对象append到父对象的末尾,原来child引用的对象就跳到了frag对象的末尾,
// 而child就指向了本来是排在第二个的元素对象。如此循环下去,链接就逐个往后跳了
      }
      return frag;
    },
    moelElement: function(node, vm) {
      var reg = /\{\{(.*)\}\}/; //匹配 {{}} () 获取匹配到的值
      //节点类型为元素
      if(node.nodeType === 1) {
        var attr = node.attributes;
        // 解析属性
        for(var i = 0; i < attr.length; i++ ) {
          if(attr[i].nodeName == 'v-model') {
            var name = attr[i].nodeValue; // 获取v-model绑定的属性名
            node.addEventListener('input', function(e) {
              // 给相应的data属性赋值,进而触发该属性的set方法
              vm.data[name]= e.target.value;
            });
            node.value = vm.data[name]; // 将data的值赋给该node
            node.removeAttribute('v-model');
          }
        };
      }
      //节点类型为text
      if(node.nodeType === 3) {
        if(reg.test(node.nodeValue)) {
          var name = RegExp.$1; // 获取匹配到的字符串 () 正则中的分组。通过$1获取第一个分组
          name = name.trim();
          node.nodeValue = vm.data[name]; // 将data的值赋给该node
        }
      }
    },
  }
  function Vue(options) {
    this.data = options.data;
    var data = this.data;
    var id = options.el;
    var dom =new Model(document.getElementById(id),this);
    // 编译完成后,将dom返回到app中
    document.getElementById(id).appendChild(dom);
  }
  var vm = new Vue({
    el: 'app',
    data: {
      text: 'hello world'
    }
  });
</script>

到这里主要是学习了VUE中对指令的处理。到这儿你就可以添加只自定义的指令了。同时也明白自定义指令是如何实现的了。当然数据的双向绑定是还没有实现的。

以上所述是小编给大家介绍的vue中的数据双向绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
js URL参数的拼接方法比较
Feb 15 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
详解Angular.js中$http拦截器的介绍及使用
Jul 04 Javascript
vue 注册组件的使用详解
May 05 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
vue-cli3全面配置详解
Nov 14 Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 Javascript
vue 数据操作相关总结
Dec 17 Vue.js
利用javaScript处理常用事件详解
Apr 14 Javascript
利用forever和pm2部署node.js项目过程
May 10 #Javascript
javascript简单链式调用案例分析
May 10 #Javascript
Angular.JS通过指令操作DOM的方法
May 10 #Javascript
JS实现队列的先进先出功能示例
May 10 #Javascript
BootStrap的两种模态框方式
May 10 #Javascript
微信小程序之购物车功能
Sep 23 #Javascript
js canvas实现QQ拨打电话特效
May 10 #Javascript
You might like
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
PHP实现验证码校验功能
2017/11/16 PHP
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
python如何实现数据的线性拟合
2019/07/19 Python
python实现PID算法及测试的例子
2019/08/08 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
Python使用xpath实现图片爬取
2020/09/16 Python
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
大国崛起观后感
2015/06/02 职场文书
节水宣传标语口号
2015/12/26 职场文书
导游词之香港-太平山顶
2019/10/18 职场文书
python实现调用摄像头并拍照发邮箱
2021/04/27 Python
如何Tomcat中使用ipv6地址
2022/05/06 Servers