微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

2.Object.defineProerty();

rush:js;"> 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.实现简单的双向绑定

rush:js;">

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

4.实现简单的 v-model

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

rush:js;">
 

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

以上所述是小编给大家介绍的vue中的数据双向绑定。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐