一个简单的类似Vue的双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="put">
<p id="out"></p>
<script>
var put = document.getElementById('put'),
out = document.getElementById('out');
var data = {}
Object.defineProperty(data,'value',{ //data的value值为input的值
get: function() {
return put.value;
},
set: function(newVal) { put.value = out.innerHTML = newVal;
console.log(put.value)
}
})
put.onkeyup = function() { //通过键盘事件改变span的文本内容同时改变data的value值
out.innerHTML = this.value;
console.log(data.value)
}
</script>
</body>
</html>


一个简单的类似Vue的双向绑定的更多相关文章
- Vue数据双向绑定探究
前面的啰嗦话,写一点吧,或许就有点用呢 使用过vue的小伙伴都会感觉,哇,这个框架对开发者这么友好,简直都要笑出声了. 确实,使用过vue的框架做开发的人都会感觉到,以前写一大堆操作dom,bom的东 ...
- Vue数据双向绑定原理及简单实现
嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...
- 【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定
前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...
- vue的双向绑定原理浅析与简单实现
很久之前看过vue的一些原理,对其中的双向绑定原理也有一定程度上的了解,只是最近才在项目上使用vue,这才决定好好了解下vue的实现原理,因此这里对vue的双向绑定原理进行浅析,并做一个简单的实现. ...
- 撸一个vue的双向绑定
1.前言 说起双向绑定可能大家都会说:Vue内部通过Object.defineProperty方法属性拦截的方式,把data对象里每个数据的读写转化成getter/setter,当数据变化时通知视图更 ...
- Vue.js双向绑定的实现原理和模板引擎实现原理(##########################################)
Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...
- vue的双向绑定原理及实现
前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...
- 西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
- 【Vue】vue的双向绑定原理及实现
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,那么vue是如果进行数据劫持的,我们可以先来看一下通过控制台输出一个定义在vue初始化数据上的对象是个什么东西. 代码: var ...
随机推荐
- CF1092 D & E —— 思路+单调栈,树的直径
题目:https://codeforces.com/contest/1092/problem/D1 https://codeforces.com/contest/1092/problem/D2 htt ...
- java"=="与equals()方法的对照
总结:String s=new String(); s是在堆内存里的 String s2=new String(); s2是在堆内存又重新生成的一个. package com.da; //逆向思维:i ...
- MongoDB分析工具之二:MongoDB分析器Profile
MongoDB优化器profile 在MySQL 中,慢查询日志是经常作为我们优化数据库的依据,那在MongoDB 中是否有类似的功能呢?答案是肯定的,那就是MongoDB Database Prof ...
- TS学习之泛型
可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据 不适用泛型的函数 function myfn(args: number): number { return args; } functi ...
- 使用python对文件夹里面所有代码行数进行统计。
统计目录下所有的代码个数和总行数. # -*- coding: utf-8 -*- # @Author : ydf import json import os from pathlib import ...
- 关于 sklearn.decomposition.KernelPCA的简单介绍
from sklearn import decomposition import numpy as np A1_mean = [1, 1] A1_cov = [[2, .99], [1, 1]] A1 ...
- React组件详细介绍及其生命周期函数
组件的详细说明 通过Reac.createClass({...})创建组件的时候,应该有一个render()方法,也可以在其中添加生命周期函数. render方法 当调用该方法的时候,会检测this. ...
- [poj1088]滑雪(二维最长下降子序列)
解题关键:记忆化搜索 #include<cstdio> #include<cstring> #include<algorithm> #include<cstd ...
- Could not get lock /var/lib/dpkg/lock - open 解决方法
无法获得锁 /var/lib/dpkg/lock E: Could not get lock /var/lib/dpkg/lock - open (11 Resource temporarily un ...
- 19E Fairy
Once upon a time there lived a good fairy A. One day a fine young man B came to her and asked to pre ...