Vue实现双向数据绑定


Posted in Javascript onMay 03, 2017

Vue实现双向数据绑定的方式,具体内容如下

Vue是如何实现双向数据绑定的呢?答案是前端数据劫持。其通过Object.defineProperty()方法,这个方法可以设置getter和setter函数,在setter函数中,就可以监听到数据的变化,从而更新绑定的元素的值。

实现对象属性变化绑定到UI

大概的思路是:

1. 确定绑定的数据,使用Object.defineProperty()对其数据变化进行监听(对应defineGetAndSet)
2. 一旦数据发生改动,会触发setter函数。因此在setter函数内要调用回调函数触发绑定元素的更新。
3. 绑定元素的更新就是遍历所有的绑定元素,通过绑定属性的值确定函数的调用,并传入修改后的值。(对应scan)

实现UI变化绑定到对象属性

这个就比较简单了,因为UI的改变会触发一些事件,比如keyup。通过监听事件来实现数据的改变。而上面说了,数据的改变又会导致绑定其值的元素的UI改变。

实现

var data = {
 value: 'hello world!'
}
var bindValue;
//确定绑定的元素
var bindelems = [document.getElementById('p'), document.getElementById('input')];
//修改绑定元素的值的方法
var command = {
 text: function(str) {
 this.innerHTML = str;
 },
 value: function(str) {
 this.value = str;
 }
};
//遍历绑定元素修改其值
var scan = function() {
 console.log('in scan');
 for(var i = 0; i < bindelems.length; i++) {
 var elem = bindelems[i];
 console.log('elem',elem);
 for(var j = 0; j < elem.attributes.length; j++) {
 var attr = elem.attributes[j];
 if(attr.nodeName.indexOf('q-')>=0) {
 command[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue]);
 }
 }
 }
}
//设置劫持
var defineGetAndSet = function(obj, propname) {
 Object.defineProperty(obj, propname, {
 get: function() {
 return bindValue;
 },
 set: function(value){
 bindValue = value;
 scan();
 },
 enumerable: true,
 configurable: true
 })
} 
//一开始先初始化,使所有绑定的元素值为初始值
scan();
//设置需要被劫持的元素
defineGetAndSet(data, 'value');
//监听UI变化
bindelems[1].addEventListener('keyup', function(e) {
 data.value = e.target.value;
});
setTimeout(function() {
 data.value = 'change';
}, 1000);

参考:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript小数计算出现近似值的解决办法
Feb 06 Javascript
jQuery下通过replace字符串替换实现大小图片切换
May 22 Javascript
javascript编码的几个方法详细介绍
Jan 06 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 Javascript
JavaScrpt判断一个数是否是质数的实例代码
Jun 11 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
Javascript实现购物车功能的详细代码
May 08 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 Javascript
js中Map和Set的用法及区别实例详解
Feb 15 Javascript
Angular 4.x 路由快速入门学习
May 03 #Javascript
javaScript 逻辑运算符使用技巧整理
May 03 #Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
May 03 #Javascript
vue的Virtual Dom实现snabbdom解密
May 03 #Javascript
JavaScript中undefined和null的区别
May 03 #Javascript
Node.js对MongoDB数据库实现模糊查询的方法
May 03 #Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
May 03 #Javascript
You might like
一个高ai的分页函数和一个url函数
2006/10/09 PHP
PHP实现Socket服务器的代码
2008/04/03 PHP
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
Function.prototype.apply()与Function.prototype.call()小结
2016/04/27 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python3基础之基本数据类型概述
2014/08/13 Python
python开发中range()函数用法实例分析
2015/11/12 Python
3分钟学会一个Python小技巧
2018/11/23 Python
Django实现跨域请求过程详解
2019/07/25 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
PageFactory设计模式基于python实现
2020/04/14 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
python 自动识别并连接串口的实现
2021/01/19 Python
中学生团员自我评价分享
2013/12/07 职场文书
销售冠军获奖感言
2014/02/03 职场文书
英文求职信写作小建议
2014/02/16 职场文书
医院见习报告范文
2014/11/03 职场文书
明星邀请函
2015/02/02 职场文书
2015年女职工工作总结
2015/05/15 职场文书
辛亥革命观后感
2015/06/02 职场文书
开国大典观后感
2015/06/04 职场文书
快速学习Oracle触发器和游标
2021/06/30 Oracle