原生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. 如何上传本地文件到github又如何删除自己的github仓库

    首先自己在https://github.com/网站要注册一个账户 自己上传工程到jithub,没有付费的用户只能选用public,意味着你的项目在全网是可以被看到和下载的: 所以涉及私密信息的,需要 ...

  2. DrawDibDraw__ZC测试

    ZC: 先把 自己尝试成功的代码 记录下来,不要 弄没了之后 又忘了怎么弄... ZC: 代码 有点乱,没整理.没写 哪些是 原来MFC里面的 哪些是我自己写的,参考上一篇文章来看吧 1.VC6 的一 ...

  3. SVG基础图形和D3.js

    使用D3.js画一个SVG 的 圆 circle 可以使用如下代码创建: <svg width="50" height="50"> <circ ...

  4. WPF StoryBoard用法

    时间:2011-06-15 21:26来源:百度空间 作者:shichen4 点击: 次 StoryBoard使用,Xaml转cs代码 Canvas.Triggers EventTriggerRout ...

  5. mycat分布式mysql中间件（自增主键）

    一.全局序列号 全局序列号是MyCAT提供的一个新功能,为了实现分库分表情况下,表的主键是全局唯一,而默认的MySQL的自增长主键无法满足这个要求.全局序列号的语法符合标准SQL规范,其格式为:nex ...

  6. React 介绍

    ttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind The sm ...

  7. laravel command

    (1) 新建一个command类,并在command类里面写相应的执行函数 其中变量act就是指函数名,handle里面会先判断该函数是不是存在,如果存在就执行,如果不存在就提示函数不存在 class ...

  8. vijos1098 经典LIS变形

    合唱队形 描述 N位同学站成一排,音乐老师要请其中的(N-K)位同学出列,使得剩下的K位同学排成合唱队形. 合唱队形是指这样的一种队形:设K位同学从左到右依次编号为1,2…,K,他们的身高分别为T1, ...

  9. forget word out a~4

    1● ana 错误,分开   2● ante   先,前面   3● anti 反对,相反       1◆ ana 2◆ ante 3◆ anti     1● dem(o) 2● pupl 3● ...

  10. mongodb控制台中文乱码

    问题描述: 使用命令行打开mongo,查询的结果里中文都是乱码,检查了文件编码均正常: 解决方法: 该问题是cmd字体引起的,设置cmd的字体即可,cmd的默认字体是“点阵字体”,选择其他两个均可,如 ...