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中Get和Set访问器的实现代码
Sep 19 Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
浅谈react+es6+webpack的基础配置
Aug 09 Javascript
vue如何获取点击事件源的方法
Aug 10 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
vue-router实现编程式导航的代码实例
Jan 19 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
小程序api实现promise封装过程解析
Nov 21 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
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
js实现快速分享功能(你的文章分享工具)
2013/06/25 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
jQuery的缓存机制浅析
2014/06/07 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
2016/12/20 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
JS实现标签滚动切换效果
2017/12/25 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
python实现基本进制转换的方法
2015/07/11 Python
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
windows下python安装pip图文教程
2018/05/25 Python
python 为什么说eval要慎用
2019/03/26 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
2015年助残日活动总结
2015/03/27 职场文书
病房管理制度范本
2015/08/06 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
如何在centos上使用yum安装rabbitmq-server
2021/03/31 Servers