双向数据绑定简易版本如何应用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. C# Dictionary 的几种遍历方法,排序

    Dictionary<string, int> list = new Dictionary<string, int>(); list.Add(); //3.0以上版本 fore ...

  2. 【bitset 技巧 分块】bzoj5087: polycomp

    神仙zq发现了${n^2\sqrt n}\over 32$做法 Description 你有三个系数为0,1的多项式f(x),g(x),h(x) 求f(g(x)) mod h(x) 为方便起见,将答案 ...

  3. 无法重启ssh

    rm /dev/null mknod /dev/null c 1 3 chmod 666 /dev/null

  4. How to Install Zabbix Server on Centos6.7

    Prerequisite Environment First you must use your Subscription Manager to enable SCL: [root@fileserve ...

  5. Livid : 在 26 岁时写给 18 岁的自己

    转载自: https://livid.v2ex.com/essays/2012/01/24/a-letter-from-26-to-18.html 在 26 岁时写给 18 岁的自己 Jan 24, ...

  6. makedown语法

    文章转载至:https://blog.csdn.net/u014061630/article/details/81359144#1-%E5%BF%AB%E6%8D%B7%E9%94%AE 前言 写过博 ...

  7. 利用for循环和range输出9 * 9乘法口诀表

    li = [2, 3, 4, 5, 6, 7, 8, 9, 10] for i in li: for j in range(1, i): print('{0} * {1} = {2}'.format( ...

  8. Mysql之查看数据库版本

    Mysql版本: 登入数据库的时候: select @@version; select version(); mysql> select @@version; +-----------+ | @ ...

  9. 关于51单片机IO引脚的驱动能力与上拉电阻

    单片机的引脚,可以用程序来控制,输出高.低电平,这些可算是单片机的输出电压.但是,程序控制不了单片机的输出电流. 单片机的输出电流,很大程度上是取决于引脚上的外接器件. 单片机输出低电平时,将允许外部 ...

  10. MongoDB学习-->命令行增删改查&JAVA驱动操作Mongodb

    MongoDB 是一个基于分布式文件存储的数据库. 由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关 ...