应用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框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...
随机推荐
- oracle 快速复制一张表,并在此创建索引,日志及并行度
复制表结构及其数据 create table table_name_new as select * from table_name_old 只复制表结构 create table table_name ...
- 【转】Windows 邮件槽(MailSlot)
Windows 邮件槽(MailSlot) 来自<Windows网络编程第二版 中文版> 优点:通过网络,将一条消息广播给一台或多台计算机. 缺点:只允许从客户机到服务器,建立一种不可 ...
- FFT快速傅里叶变化
纪念人生第一次FFT 前排感谢iamzky,讲解非常详细 #include<iostream> #include<cstdio> #include<cmath> u ...
- intellij idea 下载安装破解教程
官网下载:http://www.jetbrains.com/idea/download/#section=windows 选择 Ultimate 版本下载 下载完成后,打开安装 在安装路径位置,可以 ...
- 分割catalina.out 每天生成一个文件
1. touch xxx(文件名字).sh 2. vim xxx.sh 写入 ----------------------- #!/bin/sh cd `dirname $0`pwdd=`d ...
- python--以1-31的数字作为结尾的列表?论英文好的重要性!
一.python基础教程第2板(修订版)[代码清单2-1]中有一段要求打印‘以1-31的数字作为结尾的列表’ 截取代码示例:endings =['st','nd','rd'] +17*['th'] + ...
- Python爬虫系列-分析Ajax请求并抓取今日头条街拍图片
1.抓取索引页内容 利用requests请求目标站点,得到索引网页HTML代码,返回结果. 2.抓取详情页内容 解析返回结果,得到详情页的链接,并进一步抓取详情页的信息. 3.下载图片与保存数据库 将 ...
- jQuery plugin : bgStretcher 背景图片切换效果插件
转自:http://blog.dvxj.com/pandola/jQuery_bgStretcher.html bgStretcher 2011 (Background Stretcher)是一个jQ ...
- python 数据结构与算法之排序(冒泡,选择,插入)
目录 数据结构与算法之排序(冒泡,选择,插入) 为什么学习数据结构与算法: 数据结构与算法: 算法: 数据结构 冒泡排序法 选择排序法 插入排序法 数据结构与算法之排序(冒泡,选择,插入) 为什么学习 ...
- and和or运算
and和or的运算,从前向后按顺序计算,当True结果遇到or就停止,返回True:当False结果遇到and就停止,返回False:False遇到or,继续走:True遇到and,继续走. > ...