Vue中数据双向绑定的分析

来源:爱站网时间:2020-10-27编辑:网友分享
相信使用了Vue一段时间后,我们对双向绑定有了大概的了解,但是我们还没有详细的探讨过原则这个问题,今天就来看看爱站技术频道小编介绍的Vue中数据双向绑定的分析,需要的朋友可以参考下面的介绍。

相信使用了Vue一段时间后,我们对双向绑定有了大概的了解,但是我们还没有详细的探讨过原则这个问题,今天就来看看爱站技术频道小编介绍的Vue中数据双向绑定的分析,需要的朋友可以参考下面的介绍。

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.实现简单的双向绑定

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

4.实现简单的  v-model

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

{{text}}
 

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

Vue中数据双向绑定的分析,今天就为大家介绍到这里,爱站技术频道介绍的知识在实践中是既常用,又新颖的,而且这里还有很多专业知识,如果您想学习到更多知识,可以收藏js.aizhan.com。

上一篇:如何实现jQuery提示信息显示后自动消失

下一篇:简述bootstrap弹出层的各种触发方法

您可能感兴趣的文章

相关阅读

热门软件源码

最新软件源码下载