双向数据绑定简易版本如何应用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. WinForm中Timer倒计时

    添加一个Timer控件: 在初始化代码中 public Form1() { InitializeComponent(); button_Read.Enabled = false; button_Sta ...

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

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

  3. vuePress的使用

    今天来玩一玩vuePress的使用,用markdown来编辑一个页面网站,这里谈论到了简单使用,细节可以去官网上去查看 开始安装 项目依赖 // package.json { "name&q ...

  4. Return Largest Numbers in Arrays-freecodecamp算法题目

    Return Largest Numbers in Arrays(找出多个数组中的最大数) 要求 大数组中包含了4个小数组,分别找到每个小数组中的最大值,然后把它们串联起来,形成一个新数组. 思路 用 ...

  5. 基础的Mapgis三维二次开发-插件式

    最近在做一个杭州石油的项目开发一个小系统. 1.命令必须是 ICommand 的派生类 using System; using System.Collections.Generic; using Sy ...

  6. Jquery之 Ajax /json

    前言: Ajax = Asynchronous JavaScript and XML(异步的JavaScript和XML) Ajax不是新的编程语言,而是一种使用现有标准的新方法. Ajax最大的优点 ...

  7. python GIL锁、进程池与线程池、同步异步

    一.GIL全局解释器锁 全局解释器锁 在CPython中,全局解释器锁(GIL)是一个互斥锁,它可以防止多个本机线程同时执行Python代码.之所以需要这个锁,主要是因为CPython的内存管理不是线 ...

  8. atag信息处理

    machine_desc->boot_params参数保存的是u-boot传入的启动参数的地址,如果没有传入启动参数,使用如下的默认参数: /* * This holds our default ...

  9. poj 3190 奶牛挤奶问题 贪心算法

    题意:奶牛挤奶问题,每只奶牛在[a,b]的时间内挤奶,要求挤奶的过程中不能不打扰,且只能自己一个人独享挤奶的机器.问最少需要多少个挤奶的机器? 思路: 对奶牛挤奶开始的时间从小到大开始排序. 将正在工 ...

  10. Markdown 使用锚点

    首先是建立一个跳转的连接: [说明文字](#jump) 然后标记要跳转到什么位置即可: <span id = "jump">跳转到这里:</span>