双向数据绑定简易版本如何应用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. java基础——快速排序

    今天又把以前学的快速排序拿出来回忆一下 高快省的排序算法 有没有既不浪费空间又可以快一点的排序算法呢?那就是“快速排序”啦!光听这个名字是不是就觉得很高端呢. 假设我们现在对“6 1 2 7 9 3 ...

  2. oc中将CGRect、CGSize、CGPoint等结构体转换为字符串

    CGRect rect = CGRectMake(160, 230, 200, 200); CGPoint point = CGPointMake(20, 20); CGSize size =  CG ...

  3. 解决Windows 与Mac 双系统下的蓝牙设备共用的问题

    不知道有多少人和我一样用的蓝牙鼠标或者键盘,有的话应该都会遇到同一个问题:即在一个系统下配好对后在另一个系统必须重新配对才能使用,很是麻烦.还要将蓝牙设备进入发现模式,OS下搜索,连接....终于昨天 ...

  4. django logging日志优先级

    原创博文 转载请注明出处! 参考官方文档:https://docs.djangoproject.com/en/2.1/topics/logging/ Loggers¶ A logger is the ...

  5. 【线性基】bzoj2844: albus就是要第一个出场

    线性基求可重rank 题目描述 给定 n 个数 $\{ a_i \}$ ,以及数 $x$. 将 $\{ a_i \}$​ 的所有子集(包括空集)的异或值从小到大排序,得到 $\{ b_i \} $. ...

  6. H5 JS判断客户端是否是iOS或者Android手机移动端

    <script type="text/javascript"> var u = navigator.userAgent; || u.indexOf(; //androi ...

  7. MySQL如何复制一个表

    MySQL如何复制一个表 1 复制 employee 表 => employee2 () create table employee2 like employee () insert into ...

  8. PHP分页类代码

    今天为大家献上一段代码,这是一段php分页代码: <?php//创建分页类class Page {    private $_all_num;                           ...

  9. python标准输入输出

    input() 读取键盘输入 input() 函数从标准输入读入一行文本,默认的标准输入是键盘. input 可以接收一个Python表达式作为输入,并将运算结果返回. print()和format( ...

  10. Java-basic-7-面向对象

    继承 在Java中,每个子类只能有一个父类,但可以继承多个接口. 子类继承父类,类定义的时候用extends. 继承接口,用implements. 重写 声明为final的方法不能被重写. 声明为st ...