<!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. Alpha发布——视频博客

    1.视频链接 视频上传至优酷自频道,地址链接:https://v.youku.com/v_show/id_XMzg5MzQ4MzM2MA==.html?spm=a2h0k.11417342.sores ...

  2. Scrum立会报告+燃尽图（Beta阶段第三次）

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2385 项目地址:https://coding.net/u/wuyy694 ...

  3. our team

    今天向大家介绍一下我们的团队,首先我们的团队叫“吉祥三宝”当然我们的三宝不是亲子关系,我们是兄弟关系,对,就是这样 下面来介绍一下我们的团队成团吧: 李奇原: 性格开朗.积极乐观.有责任心,擅长团队协 ...

  4. 每日Scrum--No.2

    Yesterday:找地图 Today: 找到最适合我们软件的地图版本 Problem:找不到特别匹配的版本

  5. POJ 3258（二分求最大化最小值）

    题目链接:http://poj.org/problem?id=3258 题目大意是求删除哪M块石头之后似的石头之间的最短距离最大. 这道题目感觉大致代码写起来不算困难,难点在于边界处理上.我思考边界思 ...

  6. 博弈---尼姆博奕（Nimm Game）（重点）

    尼姆博奕(Nimm Game):有三堆各若干个物品,两个人轮流从某一堆取任意多的 物品,规定每次至少取一个,多者不限,最后取光者得胜. 这种情况最有意思,它与二进制有密切关系,我们用(a,b,c)表示 ...

  7. 代码查重工具sim

    在瞎搜东西的时候,发现了一个大牛的博客 看起来很厉害的样子...做了一个LaTeX的语法检查并给出适当的提示,上wiki上一查发现他竟然是CVS第一个版本的发明者和开发者...Dick grune这是 ...

  8. 将oracle数据库表使用命令的形式导入到excle文件中 亲测可用！

    main.sql 中的代码 set markup html on entmap ON spool on preformat off spool D:\新建文件夹\mick\tables.xls @ge ...

  9. 教你配置使用阿里云 Maven 库，体验秒下 jar 包的快感

    鉴于国内的网络环境,从默认 Maven 库下载 jar 包是非常的痛苦. 速度慢就不说了,还经常是下不下来,然后一运行就是各种 ClassNotFoundException,然后你得找到残留文件删掉重 ...

  10. jquery.fullpage 全屏滚动

    参考文档 :http://www.dowebok.com/77.html 下载地址: https://github.com/alvarotrigo/fullPage.js 1. 使用 HTML < ...