专栏首页java闲聊Vue原理—初探双向绑定

Vue原理—初探双向绑定

对于流行的MVVM,本着了解一下的原理,因为自身是做后台的,对js的掌握一般,首先我们要对MVVM有个基本认识,MVVM是Model-View-ViewModel 的缩写,一张图带你了解

a.png

有了基本认识后就可以上手写代码了,不懂没关系,直接复制粘贴,看了运行效果后再回头深究它的实现过程

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>双向绑定1</title>    
</head>
<body>
    <div>
        <input type="text" id = "a"/>
    </div>
    <div>
        <span id="b"></span>    
    </div>
    <script type="text/javascript">
        var obj = {} ;
        Object.defineProperty(obj,'test',{
            set:function(val){
                document.getElementById('a').value = val ;
                document.getElementById('b').innerHTML = val ;
            }
        });
        //添加监听事件 keyup 指定什么条件下触发
        document.addEventListener('keyup',function(e){
            console.log(e) ;
            obj.test = e.target.value ;
        })
    </script>
</body>
</html>

上面有两个重要的方法

Object.defineProperty() 方法直接在一个对象上定义一个新的属性,或者修改一个对象的存在属性,并返回该对象。

addEventListener("指定条件",function(e){}) 添加监听事件

根据控制打印的信息,看如下截图

代码运行后,就可以看到输入框输入的值可以在下方span中显示 这只是一个简单的数据绑定,文章末尾会推荐一个github地址,里面有关于Vue双向绑定的实现,推荐刚入门的可以去看看

github地址Vue双向绑定的简单实现

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SpringBoot Cache 深入

    这上一篇文章中我们熟悉了SpringBoot Cache的基本使用,接下来我们看下它的执行流程

    tanoak
  • Windows10下Dcoker的安装、使用

    tanoak
  • Dom4J5分钟入门Dom4j使用

    tanoak
  • 事件高级

    eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget(目标对象)上,当该对象触发指定的事件时,就会执行事...

    星辰_大海
  • Centos7下Samba服务器配置(实战)

    砸漏
  • 前端开发JavaScript-巩固你的JavaScript

    在javascript中,变量是存储信息的容器,变量存在两种类型的值,即为原始值和引用值。

    达达前端
  • android设计模式应用--解释器模式

    解释器模式的意图为:给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子。解释器模式的结构图如下:

    wust小吴
  • 关于seajs

    虽然已经有很长时间没写JavaScript,但很多时候看到一些应用还是会带着好奇心去研究一下。之前是看腾讯的朋友网,它的webchat做的很不错(虽然ff下有b...

    meteoric
  • 一文带你读懂 SegNet(语义分割)

    这个图是SegNet演示效果,来源是作者上传到YouTube的一个视频 (https://www.youtube.com/watch?v=CxanE_W46ts...

    AI研习社
  • 2.2.5 HTML5程序调试

    假设有一个网页,由debug.html何debug.js构成,其中debug.html内容如下:

    周星星9527

扫码关注云+社区

领取腾讯云代金券