原生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. R6

    RC 的加强版是 R6 , R6 是一个扩展包,能够实现支持公共和私有字段与方法的更有效的引用类,还有一些其他强大的功能.运行以下代码安装这个包:install.packages("R6&q ...

  2. [ios][map]自定义地图标注

    参考:http://blog.csdn.net/mad1989/article/details/8794762 ios 一步一步学会自定义地图吹出框(CalloutView)-->(百度地图,高 ...

  3. jq 插入结构

    一.插入 1. append $("#div").append('<a href="baidu.com">a</a>') ;   // ...

  4. HDU 6130 Kolakoski

    Kolakoski 思路: 从前往后扩展,前后构成映射关系. 代码: #include<bits/stdc++.h> using namespace std; #define ll lon ...

  5. 算法笔记--KMP算法 && EXKMP算法

    1.KMP算法 这个博客写的不错:http://www.cnblogs.com/SYCstudio/p/7194315.html 模板: next数组的求解,那个循环本质就是如果相同前后缀不能加上该位 ...

  6. 原生js的博客

    原生js一里边还有很多二三等http://www.cnblogs.com/charling/p/3527561.html 选区器 http://wenku.baidu.com/link?url=zr2 ...

  7. Html概述

    Html概述 主要思想,主要思想很重要 一.Html是什么 一种标记语言(用标签进行标记) 对要显示的文字进行标记 二.Html核心 标签(只认标签) 封装,所以必须有头尾,你才知道标签的范围,你才知 ...

  8. 详解Mybatis通用Mapper介绍与使用

    使用Mybatis的开发者,大多数都会遇到一个问题,就是要写大量的SQL在xml文件中,除了特殊的业务逻辑SQL之外,还有大量结构类似的增删改查SQL.而且,当数据库表结构改动时,对应的所有SQL以及 ...

  9. android--------volley之网络请求和图片加载

    Volley是 Google 推出的 Android 异步网络请求框架和图片加载框架. Volley的特性 封装了的异步的请求API.Volley 中大多是基于接口的设计,可配置性强. 一个优雅和稳健 ...

  10. python-day32--进程--->socker并发

    一.进程背景 1.进程即正在执行的一个过程.进程是对正在运行程序的一个抽象. 2.进程的概念起源于操作系统,是操作系统最核心的概念,也是操作系统提供的最古老也是最重要的抽象概念之一.操作系统的其他所有 ...