全面解析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中的数据双向绑定，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。