vue中的双向绑定
概述
今天对双向绑定感兴趣了,于是去查了下相关文章,发现有用脏检查的(angular.js),有用发布者-订阅者模式的(JQuery),也有用Object.defineProperty的(vue),其中用Object.defineProperty的(vue)特别简单,今天顺便记录下供以后开发时参考,相信对其他人也有用.
我参考了这篇文章:Vue.js双向绑定的实现原理.
类似双向绑定的效果
其实用事件代理就可以实现类似双向绑定的效果,原理是当检测到数据改动时会触发一个keyup事件或者表单的change事件,通过监听这个事件做出响应,对应改变dom的内容.
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="a">
<span id="b"></span>
<script>
var b = document.getElementById('b');
document.addEventListener('keyup', function (e) {
b.innerText = e.target.value;
});
</script>
</body>
</html>
通过在输入框里面输入内容,内容会在右边同步显示或改变.
需要注意的是,react其实是一种单向数据流,那么怎么用react实现双向绑定呢?就是用的这个原理!
可以点击下面的按钮体会一下(在输入框里面输入内容,右边会即时更新):
Document
<script>
var b = document.getElementById('b');
document.addEventListener('keyup', function (e) {
b.innerText = e.target.value;
});
</script>
vue的双向绑定
但是所谓双向绑定,所谓MVC,所谓MVVM,都强调的是数据的改变,数据(model)即是MVC里面的M,所以我们在双向绑定中必须有数据(model).怎么加进去呢?
原理就是getter和setter函数,重写setter函数,使数据改变的同时进行一些其它的操作(改变视图),在视图改变的时候触发事件改写数据.
而怎么把数据和setter结合在一起呢?那就是利用Object.defineProperty方法,给对象定义一个属性(数据),同时重写setter方法.
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="a">
<span id="b"></span>
<script>
var obj = {};
Object.defineProperty(obj, 'hello', {
set: function (newVal) {
document.getElementById('a').value = newVal;
document.getElementById('b').innerText = newVal;
}
});
document.addEventListener('keyup', function (e) {
obj.hello = e.target.value;
});
</script>
</body>
</html>
可以点击下面的按钮体会一下(在输入框里面输入内容,右边会即时更新):
Document
<script>
var obj = {};
Object.defineProperty(obj, 'hello', {
set: function (newVal) {
document.getElementById('a').value = newVal;
document.getElementById('b').innerText = newVal;
}
});
document.addEventListener('keyup', function (e) {
obj.hello = e.target.value;
});
</script>
vue中的双向绑定的更多相关文章
- vue中数据双向绑定注意点
最近一个vue和element的项目中遇到了一个问题: 动态生成的对象进行双向绑定是失败 直接贴代码: <el-form :model="addClass" :rules=& ...
- vue中数据双向绑定的实现原理
vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...
- 利用JS实现vue中的双向绑定
Vue 已经是主流框架了 它的好处也不用多说,都已经是大家公认的了 那我们就来理解一下Vue的单向数据绑定和双向数据绑定 然后再使用JS来实现Vue的双向数据绑定 单向数据绑定 指的是我们先把模板写好 ...
- Vue框架之双向绑定事件
Vue框架之双向绑定事件 首先介绍下Vue框架的语法 vue通过 {{temp}} 来渲染变量 {{count+100}} # 求和 v-text # 为标签插入text文本 v-html # 为标签 ...
- React中的“双向绑定”
概述 React并不是一个MVVM框架,其实它连一个框架都算不上,它只是一个库,但是react生态系统中的flux却是一个MVVM框架,所以我研究了一下flux官方实现中的"双向绑定&quo ...
- 用ES6的class模仿Vue写一个双向绑定
原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...
- Vue的数据双向绑定和Object.defineProperty()
Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...
- 原生js实现 vue的数据双向绑定
原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...
- AngularJS中数据双向绑定(two-way data-binding)
1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...
随机推荐
- Git如何在不提交当前分支的情况下切换到其它分支进行操作——git stash
假如现在的Bug你还没有解决,而上边又给你派了一个新的Bug,而这个Bug相比较现在正在苦思冥想的Bug比较容易解决. 你想先解决新的Bug,可是之前的Bug还没有解决完而不能提交.怎么办? 解决方法 ...
- zabbix监控内存占前3位的进程信息
一.编写shell脚本 ps aux|sort -k4nr|head -3|awk 'split($11,a,"/"){print $4","a[length( ...
- ASP.NET网站报Service Unavailable错误的解决办法
现象:网站打不开,提示 service unavailable 原因:IIS资源不足,程序占用资源太多,应用程序池会被自动禁用 解决办法:重启IIS,在命令行中输入iisreset即可
- 小强学渲染之OpenGL状态机理解
状态机是理论上的一种机器,呃这个说法非常非常的抽象.通俗一点理解,状态机描述了一个对象在其生命周期内所经历的各种状态,状态间的转变,发生转变的动因,条件及转变中所执行的活动.或者说,状态机是一种行为, ...
- django模板总结
1. 加载静态文件 html顶部:{% load staticfiles %} 调用: <link rel="stylesheet" type="text/css& ...
- 105. Construct Binary Tree from Preorder and Inorder Traversal根据前中序数组恢复出原来的树
［抄题］: Given preorder and inorder traversal of a tree, construct the binary tree. Note:You may assume ...
- 存储过程传入datatable
存储过程传入一般的参数都很简单,今天要说一下存储过程传入datatable 类型 首先要自定义一个 表类型 CREATE TYPE [dbo].[servicedatableType] AS TABL ...
- [leetcode]2. Add Two Numbers两数相加
You are given two non-empty linked lists representing two non-negative integers. The digits are stor ...
- cookie、sesstion、strorage
1. cookie 第一:每个特定的域名下最多生成20个cookie (数量上) <IE6: 20 | >ie7:50 | firefox: 50 | IE ...
- 最短路径（SP）问题相关算法与模板
相关概念: 有向图.无向图:有向图的边是双行道,无向图的边是单行道.在处理无向图时,可以把一条无向边看做方向相反的两条有向边. 圈 cycle / 回路 circuit:在相同顶点上开始并结束且长度大 ...