原生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. 会员通过消费攒积分，升级RENEW以及降级的需求

    需求看上去及其简单,如下: 用文字描述就开始不容易了. 先按等级排个序,根据下一个等级,推前一个等级: --C---B----V-----A 在计算一下升级需要的积分:--C表示普通会员-----需要 ...

  2. Codeforces D - High Load

    D - High Load 因为要出口节点距离最小,所以除了根节点(根节点连接k个儿子)其他节点的儿子只能有一个,其他情况下的距离都比这个长,因为如果不是这样,那么根节点连接的子树数量就小与k,那么每 ...

  3. Java知识集锦

    Java知识集锦 一.Java程序基础 1.1 开发和运行环境 1.2 Java语言概述 二.Java语法基础 2.1 基础类型和语法 2.2 对象和类型 2.3 包和访问控制 三.数据类型及类型转换 ...

  4. Android发展历程

    Android历代版本的命名: 我们都是知道,安卓系统的历来的名称都是很有意思的,下面无限互联Android培训的老师归纳了一下:Android在正式发行之前,最开始拥有两个内部测试版本,并且以著名的 ...

  5. Android之封装好的异步网络请求框架

    1.简介  Android中网络请求一般使用Apache HTTP Client或者采用HttpURLConnection,但是直接使用这两个类库需要写大量的代码才能完成网络post和get请求,而使 ...

  6. Confluence 6 使用 LDAP 授权连接一个内部目录 - Schema 设置

    基本 DN(Base DN) 根专有名称(DN),这个名称在你对目录服务器上进行查询的时候使用.例如: o=example,c=com cn=users,dc=ad,dc=example,dc=com ...

  7. 『Pickle』数据结构持久化模块_常用方法记录

    可以把数据结构保存进文件并直接读出, 不论读取或者是保存,我们都需要借助open()函数,并且是二进制方式(‘wb’,‘rb’) json模块可以把字典结构改写为string然后保存,并可以反向读取字 ...

  8. 『OpenCV3』简单图片处理

    cv2和numpy深度契合,其图片读入后就是numpy.array,只不过dtype比较不常用而已,支持全部数组方法 数组既图片 import numpy as np import cv2 img = ...

  9. ASP.NET的路由系统

    一.URL与物理文件的分离 1.URL与物理文件的分离 对于一个 ASP.NET Web Form应用来说,任何一个请求都对应着某个具体的物理文件.部署在Web服务器上的物理文件可以是静态的(比如图片 ...

  10. vs2012修改代码编辑区域的背景色