概述

今天对双向绑定感兴趣了,于是去查了下相关文章,发现有用脏检查的(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. mysql创建索引以及对索引的理解

    创建表的时候创建索引   创建索引是指在某个表的一列或多列上建立一个索引,以便提高对表的访问速度.创建索引有3种方式,这3种方式分别是创建表的时候创建索引.在已经存在的表上创建索引和使用ALTER T ...

  2. Ubuntu安装软件提示boot空间不足

    用sudo apt-get install gitlab-ci-multi-runner安装应用都会出现“gzip: stdout: No space left on device”的问题. boot ...

  3. Java 学习笔记提高篇

    Java笔记(提高篇)整理   主要内容: 面向对象 异常 数组 常用类 集合 IO流 线程 反射 Socket编程 1.  面向对象 1.1包 用来管理Java中的类, 类似文件夹管理文件一样. 因 ...

  4. 171. Excel Sheet Column Number (Math)

    Related to question Excel Sheet Column Title Given a column title as appear in an Excel sheet, retur ...

  5. c#: 任务栏进度显示(TaskbarManager)

    Win7及以上系统支持任务栏进度条,为有进度类应用显示进度于任务栏,甚为方便. 以c#之WinForm实现其,大多采用Windows API Code Pack这个方案,加多引用,比较繁琐,而我总也打 ...

  6. ROLAP、MOLAP和HOLAP区别

    对没有使用过数据仓库的人,对这三个概念确实是有点混淆不清.包括我自己本身不是做数据仓库出身,所以实际上是从实践出发,理论基础是有点匮乏的. 一.基本概念 1. OLAP OLAP(on-Line An ...

  7. [leetcode]94. Binary Tree Inorder Traversal二叉树中序遍历

    Given a binary tree, return the inorder traversal of its nodes' values. Example: Input: [1,null,2,3] ...

  8. CentOS_mini下安装docker 之 安装docker CE

    警告:切勿在没有配置 Docker YUM 源的情况下直接使用 yum 命令安装 Docker. 原文地址:https://yeasy.gitbooks.io/docker_practice/inst ...

  9. redis持久化详述

    本来打算根据自己搜索的一些文章写些总结,后来发现了一篇好文,这里转载下,在自己博客里面记录下. 原文链接:https://www.cnblogs.com/kismetv/p/9137897.html ...

  10. Android手机上浏览器不支持带端口号wss解决方案

    首先抄个示例过来,命名为wss-test.html,然后传到服务器: <!DOCTYPE HTML> <html> <head> <meta http-equ ...