应用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框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...
随机推荐
- Typescript学习(一)----准备篇(vscode编译ts文件)
什么是typescript? typescript是微软开发的一个脚本语言.他是JavaScript的超级,他遵循es6语法规范,他扩展了JavaScript的语法. 理解es5,es6,javasc ...
- Search and Replace -freecodecamp算法题目
Search and Replace 1.要求 使用给定的参数对句子执行一次查找和替换,然后返回新句子. 第一个参数是将要对其执行查找和替换的句子. 第二个参数是将被替换掉的单词(替换前的单词). 第 ...
- 【莫队】bzoj4866: [Ynoi2017]由乃的商场之旅
莫队的一些套路 Description 由乃有一天去参加一个商场举办的游戏.商场派了一些球王排成一行.每个人面前有几堆球.说来也巧,由乃和你 一样,觉得这游戏很无聊,于是决定换一个商场.另一个商场是D ...
- (67)windows安装zabbix监控
在windows下安装zabbix agent,方法非常简单.首先到zabbix官方下载windows版本agent,地址:http://www.zabbix.com/download.php,找到“ ...
- Linux常用文档操作命令--2
4.文档压缩与解压操作 在Linux中常见的压缩文件有:*.tar.gz.*.tgz.*.gz.*.Z.*bz2等.其每种不同的压缩文件对印的压缩和解压命令也不同. *.tar.gz :tar程序打包 ...
- python3 兔子繁殖问题
题目 有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? 代码: month = int(input("繁殖 ...
- python-面试常用 --变量、内存管理(小整数池,引用计数)
执行Python程序的两种方法 第一种:交互式(jupyter就是对这种进行了封装) 优点:直接给出结果 缺点:无法保存 第二种:命令行式,通过Python解释器输入文本(pycharm对这种进行了封 ...
- 面试之mybatis和hibernate的区别
mybatis是支持普通SQL查询.存储过程和高级映射的优秀持久层框架.封装了 几乎所有的JDBC代码和参数的手工设置 ,以及结果集的检索: 封装了:1,获取连接,执行sql,释放连接. 2,sql的 ...
- python-matplotlib-lec0
直奔主题吧..以下是对matplotlib画图的简单讲解,代码已测试. win7 + pycharm + python 2.7 参考文档: http://old.sebug.net/paper/boo ...
- ubuntu gcc的下载链接,比较快的。
http://mirrors.163.com/ubuntu-releases/ http://xhmikosr.1f0.de/tools/msys/