简单实现VUE的双向数据绑定
<!DOCTYPE html>
<html>
<head>
<title>vue-双向数据绑定的简单实现</title>
</head>
<body>
<input type="text" name="" id="inputText">
<span id='textSpan'></span>
<script type="text/javascript">
let obj = {},
inputText = document.querySelector('#inputText'),
textSpan = document.querySelector('#textSpan')
Object.defineProperty(obj, 'foo', {
set: function (newValue) {
inputText.value = newValue
textSpan.innerHTML = newValue
}
})
inputText.addEventListener('keyup', function (e) {
obj.foo = e.target.value
})
</script>
</body>
</html>
简单实现VUE的双向数据绑定的更多相关文章
- 应用defineProperty简单实现vue的双向数据绑定
双向数据绑定简易版本如何应用defineProperty的getter setter 方法 有这样HTML片段 <input type="text" id="dem ...
- vue实现双向数据绑定的原理
vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的. 在MDN上对该方法的说明是:O ...
- vue的双向数据绑定实现原理
在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...
- 面试题:你能写一个Vue的双向数据绑定吗?
在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...
- Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
- 浅析vue的双向数据绑定
vue 的双向数据绑定是基于es5的 object对象的defineProperty属性,重写data的set和get函数来实现的.1.defineProperty 数据展示 Object.defin ...
- vue的双向数据绑定实现原理(简单)
如果有人问你,学vue学到了什么,那双向数据绑定,是必然要说的. 我们都知道,在vue中,使用数据双向绑定我们都知道是v-modle实现的. 实现原理是通过Object.defineProperty的 ...
- 转 vue实现双向数据绑定之原理及实现篇
转自:https://www.cnblogs.com/canfoo/p/6891868.html vue的双向绑定原理及实现 前言 先上个成果图来吸引各位: 代码: ...
- 【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定
前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...
随机推荐
- pygame (1) 移动小乌龟
小乌龟图片素材: 第一个简单的小游戏: 小乌龟会不断的移动,并且每当到达窗口的左右边界的时候,还会自动的掉头. 源码: import pygame import sys# 导入sys模块,退出时使用 ...
- GCD最大公约数
说明: 最初跟鹏哥学习最大公约数的算法是辗转相除,确实印象很深刻,那种辗转赋值的思想在好多题目中都有运用,但随着进一步学习,我也参考了其他几种方便快捷的最大公约数求法,在这里做一个总结. . int ...
- Scrum立会报告+燃尽图(Beta阶段第七次)
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2388 项目地址:https://coding.net/u/wuyy694 ...
- 软件工程-东北师大站-第四次作业PSP
1.本周PSP 2.本周进度条 3.本周累计进度图 代码累计折线图 博文字数累计折线图 4.本周PSP饼状图
- JS 操作 checkbox(cc角色管理等)
1.获取选中的权限的个数 var size=$("input[name='privileges']:checked").size();
- 《JavaScript》web客户端存储
Web存储: 兼容IE8在内的所有主流浏览器,不兼容早期浏览器:支持大容量但非无限量 LocalStorage和sessionStorage是window对象的两个属性,这两个属性都代表同一个stor ...
- 把字符串"3,1,2,4"以","分割拆分为数组,数组元素并按从小到大的顺序排列
package com.wangcf; /** * 把字符串"3,1,2,4"以","分割拆分为数组,数组元素并按从小到大的顺序排列 * @author fan ...
- c# 免费版pdf转word尝试
链接:https://pan.baidu.com/s/1Dwuezo6YGe9CdlSyrwQyNg 密码:c81a 1.安装此程序 2.在安装文件的bin下拷贝dll: 3.代码引用 private ...
- 石家庄铁道大学网站首页UI分析
今天的软件工程王老师讲了UI的设计,以前狭隘的认为只有移动设备上的界面叫UI,百度一下才发现UI其实有这么多含义:UI即User Interface的简称.泛指用户的操作界面,UI设计主要指界面的样式 ...
- 2018软工实践—Alpha冲刺(5)
队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭鸭鸭鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作 协助测试的进行 测试项目运行的服务器环境 ...