微客导航 » 文章资讯 » 全面解析vue中的数据双向绑定

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

2024-02-24 02:08:55 149

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

2.Object.defineProerty();

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

3.实现简单的双向绑定

varobj={}; Object.defineProperty(obj,`value`,{ enumerable:true, configurable:true, get(){ returnthis.val; }, set(newValue){ document.getElementById(`b`).innerText=newValue; this.val=newValue;//66 } }); document.getElementById(`a`).addEventListener(`input`,function(event){ vartext=event.target.value;//66 obj.value=text; },false)

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

4.实现简单的 v-model

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



{{text}}

functionModel(node,vm){ if(node){this.$frag=this.nodeToFragment(node,vm); returnthis.$frag; } } Model.prototype={ construtor:'Model', nodeToFragment:function(node,vm){ varself=this; varfrag=document.createDocumentFragment(); varchild; while(child=node.firstChild){ self.moelElement(child,vm); frag.appendChild(child); //将所有子节点添加到fragment中，child是指向元素首个子节点的引用。 //将child引用指向的对象append到父对象的末尾，原来child引用的对象就跳到了frag对象的末尾， //而child就指向了本来是排在第二个的元素对象。如此循环下去，链接就逐个往后跳了 } returnfrag; }, moelElement:function(node,vm){ varreg=/\{\{(.*)\}\}/;//匹配{{}}()获取匹配到的值 //节点类型为元素 if(node.nodeType===1){ varattr=node.attributes; //解析属性 for(vari=0;i

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

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

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐