全面解析vue中的数据双向绑定
时间:2019-03-30
本文章向大家介绍全面解析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.实现简单的双向绑定
<input type="text" id="a"> <div id="b"></div> <script type="text/javascript"> var obj = {}; Object.defineProperty(obj,`value`,{ enumerable: true, configurable: true, get(){ return this.val; }, set(newValue){ document.getElementById(`b`).innerText = newValue; this.val = newValue; //66 } }); document.getElementById(`a`).addEventListener(`input`,function(event){ var text = event.target.value; //66 obj.value = text; },false) </script>
这种方式简单粗暴,直接通过操作DOM完成绑定。我想,肯定有人会认为,你这样写,还不如在input事件中直接对Id为B的DOM元素赋值,这样不是多此一举吗?请看下面在框架中我们该如何实现。
4.实现简单的 v-model
首先我们需要获取文档中的真实元素节点也就是VUE中实列话VUE中元素挂载点(el);在通过createDocumentFragment创建文档碎片,解析操作完毕后,把碎片放置在DOM中。
<div id="app"> <input type="text" id="a" v-model="text"> {{text}} </div> <script type="text/javascript"> function Model(node, vm) { if(node) {this.$frag = this.nodeToFragment(node, vm); return this.$frag; } } Model.prototype = { construtor:'Model', nodeToFragment: function(node, vm) { var self = this; var frag = document.createDocumentFragment(); var child; while(child = node.firstChild) { self.moelElement(child, vm); frag.appendChild(child); // 将所有子节点添加到fragment中,child是指向元素首个子节点的引用。 // 将child引用指向的对象append到父对象的末尾,原来child引用的对象就跳到了frag对象的末尾, // 而child就指向了本来是排在第二个的元素对象。如此循环下去,链接就逐个往后跳了 } return frag; }, moelElement: function(node, vm) { var reg = /\{\{(.*)\}\}/; //匹配 {{}} () 获取匹配到的值 //节点类型为元素 if(node.nodeType === 1) { var attr = node.attributes; // 解析属性 for(var i = 0; i < attr.length; i++ ) { if(attr[i].nodeName == 'v-model') { var name = attr[i].nodeValue; // 获取v-model绑定的属性名 node.addEventListener('input', function(e) { // 给相应的data属性赋值,进而触发该属性的set方法 vm.data[name]= e.target.value; }); node.value = vm.data[name]; // 将data的值赋给该node node.removeAttribute('v-model'); } }; } //节点类型为text if(node.nodeType === 3) { if(reg.test(node.nodeValue)) { var name = RegExp.$1; // 获取匹配到的字符串 () 正则中的分组。通过$1获取第一个分组 name = name.trim(); node.nodeValue = vm.data[name]; // 将data的值赋给该node } } }, } function Vue(options) { this.data = options.data; var data = this.data; var id = options.el; var dom =new Model(document.getElementById(id),this); // 编译完成后,将dom返回到app中 document.getElementById(id).appendChild(dom); } var vm = new Vue({ el: 'app', data: { text: 'hello world' } }); </script>
到这里主要是学习了VUE中对指令的处理。到这儿你就可以添加只自定义的指令了。同时也明白自定义指令是如何实现的了。当然数据的双向绑定是还没有实现的。
以上所述是小编给大家介绍的vue中的数据双向绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- 超级玛丽游戏
- POJ 3673 Cow Multiplication
- HDU 5144 NPY and shot(物理运动学+三分查找)
- 深度|Python股票数据分析
- HDU 2438 Turn the corner(三分查找)
- UVAlive 3708 Graveyard(最优化问题)
- HDU 1754 I Hate It(线段树之单点更新,区间最值)
- Selenium2+python自动化19-单选和复选框
- Uva 11300 Spreading the Wealth(递推,中位数)
- Uva 11729 Commando War (简单贪心)
- UVA 11292 Dragon of Loowater(简单贪心)
- Codeforces Beta Round #2 A,B,C
- 牛顿迭代法(Newton's Method)
- 最长递减子序列(nlogn)(个人模版)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Jackson笔记
- 每日一题 | 两个序列归并问题
- Java基础之IO流(一)
- Java基础之IO流(二)
- 数据可视化|如何用wordcloud绘制词云图?
- Java日志记录最佳实践
- Java基础之IO流(三)
- 百万并发「零拷贝」技术系列之Linux实现
- 前缀和与差分 Krains 2020-07-28 16:05:15
- 1477. 找两个和为目标值且不重叠的子数组 Krains 2020-07-30 09:50:18 动态规划滑动窗口
- 114. 二叉树展开为链表 Krains 2020-08-02 08:59:00 树
- 1478. 安排邮筒 Krains 2020-07-30 14:51:32 动态规划DFS数学
- 435. 无重叠区间 Krains 2020-07-28 11:26:10 贪心
- 632. 最小区间 Krains 2020-08-01 09:51:18 单调队列双指针堆
- 【R语言】高维数据可视化| ggplot2中会“分身术”的facet_wrap()与facet_grid()姐妹花