<!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. 第七次作业PSP

    psp 进度条 代码累积折线图 博文累积折线图 psp饼状图

  2. 软件工程-东北师大站-第四次作业PSP

    1.本周PSP 2.本周进度条 3.本周累计进度图 代码累计折线图 博文字数累计折线图 4.本周PSP饼状图

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

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

  4. EXT4.1表单提交(非AJAX)

    Ext.require([ 'Ext.form.*', 'Ext.data.*' ]); Ext.onReady(function(){ Ext.apply(Ext.form.VTypes, { re ...

  5. n元一维向量向左循环移位i的几种算法

    1.最简单的算法借助于一个n元的中间向量在n步时间内完成 时间复杂度:O(n)  空间复杂度O(n) void shift_easy(int arr[], int _arr[], int n, int ...

  6. 【BioCode】删除未算出PSSM与SS的蛋白质序列

    代码说明: 由于一些原因(氨基酸序列过长),没有算出PSSM与SS,按照整理出来的未算出特征的文件,删除原来的蛋白质序列: 需删除的氨基酸文件732.txt(共732条氨基酸): 删除前 氨基酸共25 ...

  7. 解决java图形界面label中文乱码

    第一:在你的具有main函数的类也即你应用运行的主类上点击右键,选择Run As中的Run Configurations,如下图:java,awt,中文方框,中文乱码第二,在Arguments标签下的 ...

  8. Android Studio 修改 包名

    Android Studio上修改项目(module)的包名(Package Name)   当你对着包名右击,查找Refactor(重构)下的Rename(快捷键:SHIFT+F6)时,弹出来的仅仅 ...

  9. ubuntu下搭建openGL环境

    1.      建立基本编译环境 sudo apt-get install build-essential 2.      安装OpenGL Library sudo apt-get install ...

  10. bzoj4032-最短不公共子串

    题意 给出两个长度小于等于2000的小写字母串,四个问题: A的最短子串不是B的子串 A的最短子串不是B的子序列 A的最短子序列不是B的子串 A的最短子序列不是B的子序列 分析 虽然求的是不公共,但是 ...