应用defineProperty简单实现vue的双向数据绑定
双向数据绑定简易版本如何应用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的双向数据绑定的更多相关文章
- 简单实现VUE的双向数据绑定
<!DOCTYPE html> <html> <head> <title>vue-双向数据绑定的简单实现</title> </head ...
- vue实现双向数据绑定的原理
vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的. 在MDN上对该方法的说明是:O ...
- vue的双向数据绑定实现原理
在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...
- 面试题:你能写一个Vue的双向数据绑定吗?
在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...
- 浅析vue的双向数据绑定
vue 的双向数据绑定是基于es5的 object对象的defineProperty属性,重写data的set和get函数来实现的.1.defineProperty 数据展示 Object.defin ...
- Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
- vue的双向数据绑定实现原理(简单)
如果有人问你,学vue学到了什么,那双向数据绑定,是必然要说的. 我们都知道,在vue中,使用数据双向绑定我们都知道是v-modle实现的. 实现原理是通过Object.defineProperty的 ...
- 转 vue实现双向数据绑定之原理及实现篇
转自:https://www.cnblogs.com/canfoo/p/6891868.html vue的双向绑定原理及实现 前言 先上个成果图来吸引各位: 代码: ...
- 【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定
前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...
随机推荐
- Bootstrap历练实例:默认的进度条
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Eclipse+Tomcat搭建jsp服务器
首先,安装java sdk 环境,这里就不多说了,附上java sdk的下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk ...
- 拓扑排序 topsort
拓扑排序 对一个有向无环图(Directed Acyclic Graph简称DAG)G进行拓扑排序,是将G中所有顶点排成一个线性序列,使得图中任意一对顶点u和v,若边(u,v)∈E(G),则u在线性序 ...
- unbuntu14下Qt4.8 和MySQL连接问题 QSqlDatabase: QMYSQL driver not loaded QSqlDatabase: available drivers: QSQLITE
使用 QSqlDatabase::addDatabase创建数据库时 会报错: QSqlDatabase: QMYSQL driver not loaded QSqlDatabase: availab ...
- 06grep与find命令详解
1. grep 命令 grep 命令用于在文本中执行关键词搜索,并显示匹配的结果,格式为"grep [选项][文件]". grep 命令的参数及其作用如下: -b 将可执行文件(b ...
- Tcl/Cmds
- paper:synthesizable finit state machine design techniques using the new systemverilog 3.0 enhancements之fsm1各种style的timing/area比较
整体说,一般还是用2段式,再加上output encodecd/default -X技巧.
- robotframework的列表与字典
这里以Get Element Size为例,Selenium2Library返回的是列表,AppiumLibrary返回的是字典. 列表用 ${width}获取:字典用 &{ui}[width ...
- 【kindle】【转发】kindle链接WIFI自动断开问题
在电脑上新建一个新文件,名为“WIFI_NO_NET_PROBE”,同时把后缀名删掉,让它变成一个无格式文件.Kindle 连接电脑,把新建的文件放进Kindle的根目录,断开Kindle之后重启Ki ...
- 百度地图和高德地图的API视频教程
学习地址: http://www.houdunren.com/houdunren18_lesson_152?vid=10228 素材地址: https://gitee.com/houdunwang/v ...