双向数据绑定简易版本如何应用defineProperty的getter setter 方法

有这样HTML片段

<input type="text" id="demo">
<p id="display"></p>
var obj = {};
var bind = [];
Object.defineProperty(obj, 's', {
set:function(val){
bind['s'] = val;
},
get:function(){
return bind['s'];
}
}); var demo = $('#demo');
var display = $('#display');
demo.keyup(function(event) {
/* Act on the event */
obj['s'] = demo.val();
display.html(bind['s']);
});

对对象obj['s'] = demo.val();   触发defineProperty的set方法  对bind['s'] 赋值为demo的值。

应用defineProperty简单实现vue的双向数据绑定的更多相关文章

  1. 简单实现VUE的双向数据绑定

    <!DOCTYPE html> <html> <head> <title>vue-双向数据绑定的简单实现</title> </head ...

  2. vue实现双向数据绑定的原理

    vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的. 在MDN上对该方法的说明是:O ...

  3. vue的双向数据绑定实现原理

    在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...

  4. 面试题:你能写一个Vue的双向数据绑定吗?

    在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...

  5. 浅析vue的双向数据绑定

    vue 的双向数据绑定是基于es5的 object对象的defineProperty属性,重写data的set和get函数来实现的.1.defineProperty 数据展示 Object.defin ...

  6. Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  7. vue的双向数据绑定实现原理(简单)

    如果有人问你,学vue学到了什么,那双向数据绑定,是必然要说的. 我们都知道,在vue中,使用数据双向绑定我们都知道是v-modle实现的. 实现原理是通过Object.defineProperty的 ...

  8. 转 vue实现双向数据绑定之原理及实现篇

    转自:https://www.cnblogs.com/canfoo/p/6891868.html vue的双向绑定原理及实现 前言 先上个成果图来吸引各位: 代码:                  ...

  9. 【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

随机推荐

  1. MySQL 5.7.20绿色版安装详细图文教程

    MySQL 5.7.20绿色版安装详细图文教程 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle旗下产品.这篇文章主要介绍了MySQL 5.7.20绿色版安装 ...

  2. B. Anatoly and Cockroaches

    B. Anatoly and Cockroaches time limit per test 1 second memory limit per test 256 megabytes input st ...

  3. tensorflow目标检测API之建立自己的数据集

    1 收集数据 为了方便,我找了11张月儿的照片做数据集,如图1,当然这在实际应用过程中是远远不够的 2 labelImg软件的安装 使用labelImg软件(下载地址:https://github.c ...

  4. MYSQL存储过程,函数,光标

    存储过程 MySQL中,创建存储过程的基本形式如下: CREATE PROCEDURE sp_name ([proc_parameter[,...]]) [characteristic ...] ro ...

  5. Unity基础-脚本的优化

    脚本的优化 object pool 避免频繁的内存分配和gc噩梦(字符串相加?) 是否有必要都写在update里?分帧? 需要的只取一次 使用editor内赋值,而不是find 复杂的物理 复杂的数学 ...

  6. VMware安装Ubuntu配置NAT模式下静态IP,解决访问外网问题

    安装好VMware后,打开网络连接可以看到有VMware Network Adapter VMnet1和VMware Network Adapter VMnet8两个网络适配器,VMnet1是针对桥接 ...

  7. CentOS 系统下Gitlab搭建与基本配置 以及代码备份迁移过程

    GitLab 是一个开源的版本管理系统,提供了类似于 GitHub 的源代码浏览,管理缺陷和注释等功能,你可以将代码免费托管到 GitLab.com,而且不限项目数量和成员数.最吸引人的一点是,可以在 ...

  8. 【MySQL】mac环境下使用navicat premium连接mysql乱码问题

    ---恢复内容开始--- 最重要的两点:使用navicat premium创建mysql连接和在mysql连接里面创建数据库时,需要注意. 1.创建连接时,Encoding不需要手动选择,保持Auto ...

  9. Ubuntu 16.04中安装谷歌Chrome浏览器

    1.进入 Ubuntu 16.04 桌面,按下 Ctrl + Alt + t 键盘组合键,启动终端. 2.在终端中,输入以下命令: sudo wget https://repo.fdzh.org/ch ...

  10. 求数组中两两相加等于20的组合(Python实现)

    题目 求数组中两两相加等于20的组合. 例:给定一个数组[1, 7, 17, 2, 6, 3, 14],这个数组中满足条件的有两对:17+3=20, 6+14=20. 解析 分为两个步骤: 先采用堆排 ...