全面解析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 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

相关文章

可以通过min-width属性来设置el-table-column的最小宽度。以...
yarn dev,当文件变动后,会自动重启。 yanr start不会自动重...
ref 用于创建一个对值的响应式引用。这个值可以是原始值(如...
通过修改 getWK005 函数来实现这一点。这里的 query 参数就是...
<el-form-item label="入库类型" ...
API 变动 样式类名变化: 一些组件的样式类名有所变动,可能需...