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

  1. Vue数据双向绑定探究

    前面的啰嗦话,写一点吧,或许就有点用呢 使用过vue的小伙伴都会感觉,哇,这个框架对开发者这么友好,简直都要笑出声了. 确实,使用过vue的框架做开发的人都会感觉到,以前写一大堆操作dom,bom的东 ...

  2. Vue数据双向绑定原理及简单实现

    嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...

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

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

  4. vue的双向绑定原理浅析与简单实现

    很久之前看过vue的一些原理,对其中的双向绑定原理也有一定程度上的了解,只是最近才在项目上使用vue,这才决定好好了解下vue的实现原理,因此这里对vue的双向绑定原理进行浅析,并做一个简单的实现. ...

  5. 撸一个vue的双向绑定

    1.前言 说起双向绑定可能大家都会说:Vue内部通过Object.defineProperty方法属性拦截的方式,把data对象里每个数据的读写转化成getter/setter,当数据变化时通知视图更 ...

  6. Vue.js双向绑定的实现原理和模板引擎实现原理（##########################################）

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

  7. vue的双向绑定原理及实现

    前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...

  8. 西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分

    最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...

  9. 【Vue】vue的双向绑定原理及实现

    vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,那么vue是如果进行数据劫持的,我们可以先来看一下通过控制台输出一个定义在vue初始化数据上的对象是个什么东西. 代码: var ...

随机推荐

  1. QT（4）信号与槽

    mainWidget.h #ifndef MAINWIDGET_H #define MAINWIDGET_H #include <QWidget> #include <QPushBu ...

  2. BZOJ1217：[HNOI2003]消防局的设立

    我对贪心的理解:https://www.cnblogs.com/AKMer/p/9776293.html 题目传送门:https://www.lydsy.com/JudgeOnline/problem ...

  3. 人物-IT-柳传志：柳传志

    ylbtech-人物-IT-柳传志:柳传志 柳传志,英文名:Chuanzhi Liu,男,汉族,中共党员,1944年4月出生于江苏镇江,联想控股股份有限公司董事长,联想集团创始人. 企业家.投资家.全 ...

  4. TModJS：README

    ylbtech-TModJS:README 1.返回顶部 1. TmodJS 项目已经停止维护,请使用更好的代替方案:art-template-loader TmodJS(原名 atc)是一个简单易用 ...

  5. UML核心元素--参与者

    定义:参与者是在系统之外与系统交互的某人或某事物.参与者在建模过程中处于核心地位. 1.系统之外:系统之外的定义说明在参与者和系统之间存在明确的边界,参与者只能存在于边界之外,边界之内的所有人和事务都 ...

  6. hibernate 数据关联一对一

    第一种一对一 person和card,card的id即作为主键,又作为外键  // 各村对方的一个对象 public class Person { private Integer id; privat ...

  7. 用paramiko写堡垒机

    paramiko paramiko模块,基于SSH用于连接远程服务器并执行相关操作. 基本用法 SSHClient 基于用户名密码连接: 基础用法: import paramiko # 创建SSH对象 ...

  8. SharePoint 2013 搜索高级配置

    SharePoint2013里面的搜索配置. 1.首先,新建页面,用于搜索, 2.添加搜索框.搜索结果部件: 选择<搜索>类别,找到”搜索框”.”搜索结果”两个部件,添加到页面: 3.配置 ...

  9. 使用SecureCRT工具部署项目

    总结下我的Java开发过程的一些知识点: 我要上线某个项目,此时我需要给测试人员发送安全扫描文件,等待测试人员完成项目的扫描之后才可以完成上线: 1 将项目打成war包.比如implgtyy.war文 ...

  10. oracle 新增字段

    alter table shop_procategory add (category_ORDER_FIELD number(10) default '0' not null);comment on c ...