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

需要了解的属性是原色js的Object.definePrototype(obj,pop,descript);

obj:被构造的对象

pop:被构造的对象的属性，创建对象或修改已有的对象

descript:修改的熟悉的描述

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>canvas粒子烟雾</title>

</head>

<body>

  <input id="aa" type="text" />

  <span id="bb">{{test}}</span>

  <script>

    var obj = {};

    Object.defineProperty(obj,'test',{

      set(val) {

        document.querySelector('#aa').value = val;

        document.querySelector('#bb').innerHTML = val;

      }

    })

    console.log(document.querySelector('#aa'));

    document.querySelector('#aa').onkeyup = function(e) {

      obj.test = e.target.value;

    }

  </script>

</body>

</html>

原生js实现数据的双向绑定的更多相关文章

  1. 通过原生js实现数据的双向绑定

    通过js实现数据的双向绑定 : Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对 ...

  2. js实现数据视图双向绑定原理

    这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.observe也被草案发起人撤回了..所以defineProperty更有必要了解一下了几行代码看他 ...

  3. 原生js实现数据双向绑定

    最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HT ...

  4. 数据的双向绑定 Angular JS

    接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...

  5. 数据的双向绑定 Angular JS之开端篇

    接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...

  6. React入门---事件与数据的双向绑定-9

    上一节中,我们是从父组件给子组件传送数据,要实现事件与数据的双向绑定,我们来看如何从子组件向父组件传送数据; 接触之前,我们看一些里面函数绑定的知识: 例:通过点击事件改变state的age属性值: ...

  7. vue中如何实现数据的双向绑定

    vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...

  8. vue2.X props 数据传递 实现组件内数据与组件外的数据的双向绑定

    vue2.0 禁止 子组件修改父组件数据 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能 ...

  9. JavaScript实现数据的双向绑定

    接触到Angulr.js和Vue.js后,提到最多的就是双向绑定 下面将用JavaScript实现数据的双向绑定 <!DOCTYPE html> <html> <head ...

随机推荐

  1. django字段查询参数及聚合函数

    字段查询是指如何指定SQL WHERE子句的内容.它们用作QuerySet的filter(), exclude()和get()方法的关键字参数. 默认查找类型为exact. 下表列出了所有的字段查询参 ...

  2. 自定义 Maven 的 repositories

    有时,应用中需要一些比较新的依赖,而这些依赖并没有正式发布,还是处于milestone或者是snapshot阶段,并不能从中央仓库或者镜像站上下载到.此时,就需要 自定义Maven的repositor ...

  3. 关于c#除法运算的问题

    https://blog.csdn.net/yxt1522916229/article/details/51107569/ 下面的示例可以验证一下问题: 例如: int m = 2;         ...

  4. 20170503xlVBA房地产数据分类连接

    Sub NextSeven_CodeFrame4() Application.ScreenUpdating = False Application.DisplayAlerts = False Appl ...

  5. Sidekiq（部分基础，有几个使用案例和active_job的用法）

    Sidekiq (8700✨) git :  https://github.com/mperham/sidekiq https://www.cnblogs.com/richard1234/p/3829 ...

  6. 『cs231n』作业3问题1选讲_通过代码理解RNN&图像标注训练

    一份不错的作业3资料(含答案) RNN神经元理解 单个RNN神经元行为 括号中表示的是维度 向前传播 def rnn_step_forward(x, prev_h, Wx, Wh, b): " ...

  7. linux单用户模式

    linux单用户模式 2014年11月11日 17:18 在grub上相应要启动的内核上按“e”. 进入下一界面,继续按“e”. 在进入文本界面后,输入“single”回车. 进入grub界面后,按“ ...

  8. ASP.NET的内置对象 —— Response 对象

    在 ASP.NET 中,页面实际上是一个输出 HTML 的可执行对象. 传统的 ASP 程序通常将 ASP 代码和 HTML 标签集成在一个文件中,或者将其分离于多个文 件. 当执行文件时,服务器回从 ...

  9. java连接MySql数据库 zeroDateTimeBehavior

    JAVA连接MySQL数据库,在操作值为0的timestamp类型时不能正确的处理,而是默认抛出一个异常, 就是所见的:java.sql.SQLException: Cannot convert va ...

  10. Windows系统配置Python环境，python2和python3共存

      Windows系统配置python2和python3共存   1.下载python: https://www.python.org/downloads/ 注:选择需要的版本(python2 or ...