原生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不返回QuerySets的API

    以下的方法不会返回QuerySets,但是作用非常强大,尤其是粗体显示的方法,需要背下来. 方法名 解释 get() 获取单个对象 create() 创建对象,无需save() get_or_crea ...

  2. [原][译][osg][osgEarth]飞行模拟软件JSBSim的操作（FGFCS类）

    英文原文在 FGFCS.h头文件中 JSBSim的控制操作封装了飞行控制系统(FCS)的功能. 这个FGFCS类还封装了相同的“系统”和“自动驾驶仪”能力. FGFCS包含用来定义一个系统或飞行模型体 ...

  3. 【Jmeter】Jmeter 5.0新特性

    前言 Jmeter 5.0这次的核心改进是在许多地方改进了对 Rest 的支持,此外还有调试功能.录制功能的增强.报告的改进等. 我也是因为迁移到了Mac,准备在Mac上安装Jmeter的时候发现它已 ...

  4. Freemarker 简介

    1.动态网页和静态网页差异 在进入主题之前我先介绍一下什么是动态网页,动态网页是指跟静态网页相对应的一种网页编程技术.静态网页,随着HTML代码的生成,页面的内容和显示效果就不会再发生变化(除非你修改 ...

  5. Failed to execute operation: No such file or directory(systemctl enable iptables.service)

    在保存Iptables配置时:systemctl enable iptables.service 出现错误: Failed to execute operation: No such file or ...

  6. Silverlight自定义控件系列 – TreeView (4) 缩进

    接下来是缩进,没有缩进的Tree怎么看都不顺眼. 首先,定义节点深度Depth(注:回叫方法暂没有代码,以后要用到): 1: /// <summary> 2: /// Using a De ...

  7. python-day42--单表查询

    1. 简单查询select * from employee;select name,salary from employee; 2. where条件           1.比较运算符:> &l ...

  8. Property 'sqlSessionFactory' or 'sqlSessionTemplate' are required

    Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'e ...

  9. BZOJ1342 [Baltic2007]Sound静音问题

    越来越水了... 这道题是简单的单调队列,同时维护最大值和最小值即可. 另解:multiset大法求区间最大最小,但是复杂度会上升... /****************************** ...

  10. hdu4348

    题解: 因为卡空间,所以直接到spoj上面去做了 区间修改的线段树 但是加lazy会把之前的操作修改 正确的解法是lazy不下传,只是在当前计算 但是听说可以记录时间的下传,我弱弱不会 代码: #in ...