<!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. Marionettejs

    Marionette是牵线木偶的意思,这个库是对Backbone的一次更高层次封装.这样的封装有两个目标: 减少重复的工作,提高使用Backbonejs时的生产效率给复杂应用页面提供更多的结构,以支撑 ...

  2. Operating System-Thread(4) 线程的调度激活机制（Scheduler Activations）

    本文主要介绍线程的调度激活机制(Scheduler Activations),主要内容: 调度激活机制简介 上行调用(upcall) 中断处理(Interrupt) 一. 调度激活机制简介 上一篇文章 ...

  3. Erlang generic standard behaviours -- summary

    gen_server 相关的片段分析得也差不多了, 这篇作为一个简要的总结.这一系列相关的分析暂且告一段落(之后如有必要,还会回来的 ^^ ),下一个系列主要是以pool 相关, 包括但不仅限于开源项 ...

  4. 【转】 Pro Android学习笔记（五四）：调试和分析（2）：View层次结构

    目录(?)[-] 帮助性能分析 帮助精简UI设计 对于模拟器上的应用(非真实设备),可以查看Hierarchy View,如下图: 帮助性能分析 当我们选择某个view时,我们可以看到measurin ...

  5. Go语言命令行操作命令详细介绍

    转自:http://www.jb51.net/article/56781.htm Go 命令 Go语言自带有一套完整的命令操作工具,你可以通过在命令行中执行go来查看它们: 图 Go命令显示详细的信息 ...

  6. 3 K8s安裝ELK+filebeat

    1 Filebeat: apiVersion: v1 kind: Service metadata: name: XX spec: ports: - name: http port: targetPo ...

  7. 通过能别的主机连接yum库

    本地有两台主机,分别为:192.168.2.131/24和192.168.2.132/24,本地yum源只能连接互联网: 这两台设备的虚拟机配置如下: 现有一台主机:172.16.254.88/16可 ...

  8. svn、git等比较---总结

    免费的版本控制系统: CVS:集中式的版本控制系统,必须联网,速度慢,CVS作为最早的开源而且免费的集中式版本控制系统,直到现在还有不少人在用.由于CVS自身设计的问题,会造成提交文件不完整,版本库莫 ...

  9. （cdh）hive 基础知识 名词详解及架构

    过程 启动 hive 之后出现的 CLI 是查询任务的入口,CLI 提交任务给 Driver Driver 接收到任务后调用 Compiler,Executor,Optimizer 将 SQL 语句转 ...

  10. Java 常见注解

    @Retention 1.RetentionPolicy.SOURCE —— 这种类型的Annotations只在源代码级别保留,编译时就会被忽略2.RetentionPolicy.CLASS —— ...