概述

今天对双向绑定感兴趣了,于是去查了下相关文章,发现有用脏检查的(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中的双向绑定的更多相关文章

  1. vue中数据双向绑定注意点

    最近一个vue和element的项目中遇到了一个问题: 动态生成的对象进行双向绑定是失败 直接贴代码: <el-form :model="addClass" :rules=& ...

  2. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

  3. 利用JS实现vue中的双向绑定

    Vue 已经是主流框架了 它的好处也不用多说,都已经是大家公认的了 那我们就来理解一下Vue的单向数据绑定和双向数据绑定 然后再使用JS来实现Vue的双向数据绑定 单向数据绑定 指的是我们先把模板写好 ...

  4. Vue框架之双向绑定事件

    Vue框架之双向绑定事件 首先介绍下Vue框架的语法 vue通过 {{temp}} 来渲染变量 {{count+100}} # 求和 v-text # 为标签插入text文本 v-html # 为标签 ...

  5. React中的“双向绑定”

    概述 React并不是一个MVVM框架,其实它连一个框架都算不上,它只是一个库,但是react生态系统中的flux却是一个MVVM框架,所以我研究了一下flux官方实现中的"双向绑定&quo ...

  6. 用ES6的class模仿Vue写一个双向绑定

    原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...

  7. Vue的数据双向绑定和Object.defineProperty()

    Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...

  8. 原生js实现 vue的数据双向绑定

    原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...

  9. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

随机推荐

  1. elasticsearch-权威指南笔记-基础部分

    参考这里的文档es权威指南 话说这个坑爹的文档是2.x版本的es,英文版本也是,所以就没啥好抱怨的了. 官方教程中有很多坑 例如,需要启动text上的索引. 还有就是get这个是不能带json的,所以 ...

  2. hdu5698瞬间移动-（杨辉三角+组合数+乘法逆元）

    瞬间移动 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submis ...

  3. Linux Tomcat安装部署项目

    一.上传Tomcat服务器

  4. chrome.debugger

    官网: https://chromedevtools.github.io/devtools-protocol/ https://developer.chrome.com/extensions/debu ...

  5. Python设计模式 - 基础 - 封装 & 继承 & 多态

    面向对象的核心是对象,世间万物都可以看作对象,任何一个对象都可以通过一系列属性和行为来描述,可以包含任意数量和类型的数据或操作.类是用来描述具有相同属性和方法的所有对象的集合.类通常是抽象化的概念,而 ...

  6. 转：centos查看实时网络带宽占用情况方法

    Linux中查看网卡流量工具有iptraf.iftop以及nethogs等,iftop可以用来监控网卡的实时流量(可以指定网段).反向解析IP.显示端口信息等. centos安装iftop的命令如下: ...

  7. vue项目如何通过前端实现自动识别并配置服务器环境地址

    前言: 一般来说,一个web项目的生产环境和测试环境的服务器地址一旦确定下来,很少会频繁变动的.那么就可以单独写一个脚本文件,通过当前访问的域名来判断当前的访问环境,然后再通过一定的规则获取对应的服务 ...

  8. 什么是XML？

    XML被设计用来传输和存储数据. HTML被设计用来显示数据. 什么是XML? XML指可扩展标记语言(EXtensible Markup Language) XML是一种标记语言,很类似HTML X ...

  9. Java15-java语法基础（十五）——内部类

    java16-java语法基础(十五)内部类 一.内部类: 可以在一个类的内部定义另一个类,这种类称为内部类. 二.内部类分为两种类型: 1.静态内部类: 静态内部类是一个具有static修饰词的类, ...

  10. mysql自动删除90天前数据

    #coding:utf-8import MySQLdb #方法1直接在Navicat中添加计划任务#DELETE FROM message2 where SEND_TIME < UNIX_TIM ...