[JS] 数据双向绑定原理
通常在前端开发过程中,经常遇到需要绑定两个甚至多个元素之间的值,比如将input的值绑定到一个h1上,改变input的值,h1的文字也自动更新。
<h1 id="title">Hello</h1>
<input type="text" id="a" />
首先是在界面上更改input的值,需要监听input的“input”事件:
var input = document.getElementById("a"),
title = document.getElementById("title");
input.oninput = function (e) {
title.innerHTML = this.value;
};
如果是在代码中手动修改input.value属性,这时候最常规的方法是手动更新h1的文字:
input.value = '123';
title.innerHTML = input.value;
有没有办法能让我们在更新input的value值的时候,自动更新h1的文字呢?当然,我们需要用到Object.defineProperty方法:
Object.defineProperty(input, 'val', { //这里必须定义一个新的属性名称,不可以用value,否则会报错。
get: function () {
return this.value;
},
set: function (val) {
this.value = val;
title.innerHTML = val;
}
});
这样我们就为input增加了一个val属性,val的值与input.value是关联的,并且我们在val的setter中增加了更新h1文字的代码,现在我们就可以直接通过
input.val = 'good';
的方式来同时更新input.value和h1的文字了
用Object.defineProperty这个方法来实现数据的双向绑定是Vue的核心思想,该方法的更多细节请看
[JS] 数据双向绑定原理的更多相关文章
- 西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
- vue数据双向绑定原理
vue的数据双向绑定的小例子: .html <!DOCTYPE html> <html> <head> <meta charset=utf-> < ...
- 真正的原生JS数据双向绑定(实时同步)
真正的原生JS数据双向绑定(实时同步) 接触过vue之后我感觉数据双向绑定实在是太好用了,然后就想着到底是什么原理,今天在简书上看到了一位老师的文章 js实现数据双向绑定 然后写出了我自己的代码 wi ...
- 对象的属性类型 和 VUE的数据双向绑定原理
如[[Configurable]] 被两对儿中括号 括起来的表示 不可直接访问他们 修改属性类型:使用Object.defineProperty() //IE9+ 和标准浏览器 支持 查看属性的 ...
- Vue数据双向绑定原理及简单实现
嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...
- Vue数据双向绑定原理(vue2向vue3的过渡)
众所周知,Vue的两大重要概念: 数据驱动 组件系统 1 2 接下来我们浅析数据双向绑定的原理 一.vue2 1.认识defineProperty vue2中的双向绑定是基于definePropert ...
- vuejs数据双向绑定原理(get & set)
前端的数据双向绑定指的是view(视图)和model(数据)两者之间的关系:view层是页面上展示给用户看的信息,model层一般是指通过http请求从后台返回的数据.view到model的绑定都是通 ...
- 关于简单的数据双向绑定原理,defineProperty 和Proxy演示
双向绑定,也就是说js中的数据传到页面,页面中的内容到js,实现同步更新,简单的演示可以直接复制下放HTML代码运行. 在这个例子中,我们使用defineProperty ,Object.define ...
- 前端数据双向绑定原理:Object.defineProperty()
Object.definedProperty方法可以在一个对象上直接定义一个新的属性.或修改一个对象已经存在的属性,最终返回这个对象. Object.defineProperty(obj, prop, ...
随机推荐
- 求2的n次方对1e9+7的模,n大约为10的100000次方(费马小定理)
昨天做了一个题,简化题意后就是求2的n次方对1e9+7的模,其中1<=n<=10100000.这个就算用快速幂加大数也会超时,查了之后才知道这类题是对费马小定理的考察. 费马小定理:假如p ...
- 第八章 高级搜索树 (xa2)红黑树:结构
- ubuntu连有线网 无法连接外网
问题:连上网线后,有ip,但是无法访问外网. 我的解决方案是: .通过命令行ifconfig命令查看以太网(即网线插口)的名称,如下图,'enp3s0'是网线插口(Ethernet以太网): zhum ...
- 一些unity问题的收集
---恢复内容开始--- 1.Mono打不开且鼠标点击标签页无反应的解决办法 http://answers.unity3d.com/questions/574157/monodevelop-not-o ...
- TOYS(叉积)
TOYS http://poj.org/problem?id=2318 Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 193 ...
- httplib:AttributeError: 'module' object has no attribute 'HTTPConnection'
# -*-coding:gb2312-*- #Function:学习python的httplib模块 import httplib conn = httplib.HTTPConnection(&quo ...
- 使用web页面实现oracle的安装和测试
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 无法启动MYSQL服务”1067 进程意外终止”解决的方法——汇总及终极方法
自己一開始依照百度经验里的方法--<MySQL下载安装.配置与使用(win7x64)>去安装和配置,可是到后面步骤总是出现1067代号的错误. 慢慢折腾去解决. 这里汇总各种导致mysql ...
- 并发编程(四)TaskFuture
并发编程(四)TaskFuture ExecutorService executorService = Executors.newSingleThreadExecutor(); Future<O ...
- cocos2d-js 安卓自定义本地通知功能
安卓新手,笔记有理解不当的地方望指出,经过几天折腾终于可以实现类似ios的本地通知功能(ios就几行代码),可能有第三方sdk可以方便实现,暂时没去找 思路: 1. startService 和bin ...