<!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的双向数据绑定的更多相关文章

  1. 应用defineProperty简单实现vue的双向数据绑定

    双向数据绑定简易版本如何应用defineProperty的getter setter 方法 有这样HTML片段 <input type="text" id="dem ...

  2. vue实现双向数据绑定的原理

    vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的. 在MDN上对该方法的说明是:O ...

  3. vue的双向数据绑定实现原理

    在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...

  4. 面试题：你能写一个Vue的双向数据绑定吗？

    在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...

  5. Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  6. 浅析vue的双向数据绑定

    vue 的双向数据绑定是基于es5的 object对象的defineProperty属性,重写data的set和get函数来实现的.1.defineProperty 数据展示 Object.defin ...

  7. vue的双向数据绑定实现原理（简单）

    如果有人问你,学vue学到了什么,那双向数据绑定,是必然要说的. 我们都知道,在vue中,使用数据双向绑定我们都知道是v-modle实现的. 实现原理是通过Object.defineProperty的 ...

  8. 转 vue实现双向数据绑定之原理及实现篇

    转自:https://www.cnblogs.com/canfoo/p/6891868.html vue的双向绑定原理及实现 前言 先上个成果图来吸引各位: 代码:                  ...

  9. 【学习笔记】剖析MVVM框架，简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

随机推荐

  1. CF刷刷水题找自信 2

    CF 1114A  Got Any Grapes(葡萄)? 题目意思:给三个人分葡萄,三个人对葡萄的颜色有一些要求,问所准备的三种颜色的葡萄能否满足三人的要求. 解题意思:直接按条件判断即可. #in ...

  2. C# 钱数 小写 转 大写

    public class Rmb { /// <summary> /// 转换人民币大小金额 /// </summary> /// <param name="n ...

  3. Alpha发布_文案+美工

    团队名称:探路者 1蔺依铭:http://www.cnblogs.com/linym762/ 2张恩聚:http://www.cnblogs.com/zej87/ 3米赫:http://www.cnb ...

  4. 第9次Scrum会议(10/21)【欢迎来怼】

    一.小组信息 队名:欢迎来怼小组成员队长:田继平成员:李圆圆,葛美义,王伟东,姜珊,邵朔,冉华小组照片 二.开会信息 时间:2017/10/21 17:20~17:45,总计25min.地点:东北师范 ...

  5. 电梯V2.0

    电梯V2.0 GitHub仓库地址 Problem 一栋10层的大楼(楼层编号1-10),设3台无限载重的电梯,初始时电梯停在1层.其中:1号电梯只能停留在奇数层,2号电梯可以各层都停留,3号电梯只停 ...

  6. EXT4+Struts2 JSON的问题

    ERROR : Class org.apache.struts2.json.JSONWriter can not access a member of class org.springframewor ...

  7. POJ 1971 Parallelogram Counting

    题目链接: http://poj.org/problem?id=1971 题意: 二维空间给n个任意三点不共线的坐标,问这些点能够组成多少个不同的平行四边形. 题解: 使用的平行四边形的判断条件:对角 ...

  8. lintcode-65-两个排序数组的中位数

    65-两个排序数组的中位数 两个排序的数组A和B分别含有m和n个数,找到两个排序数组的中位数,要求时间复杂度应为O(log (m+n)). 样例 给出数组A = [1,2,3,4,5,6] B = [ ...

  9. Oracle win64_12g 安装

    1.Oracle win64_12g 安装 1.下载安装包:这里需要自己注册一下,然后就可以登录下载软件了. 下载地址: http://www.oracle.com/technetwork/datab ...

  10. 3dContactPointAnnotationTool开发日志（三十）

      在vs2017里生成opencv时遇到了无法打开python27_d.lib的问题,具体解决请看这个,不过我用的是方法2,python37_d.lib找不到同理.   Windows下可以用的op ...