zoukankan      html  css  js  c++  java
  • vue数据绑定原理

    来点基础知识:

    属性值是函数的属性叫方法。

    对象就是属性和方法的集合。

    我们来谈谈属性。

    属性表面上来看就好像是键值对

    var 我是对象 = {
    	我是属性名:'我是属性值'
    }
    console.log(我是对象.我是属性名)//我是属性值
    

      然后来介绍下一个增改属性的方法Object.defineProperty()

    Object.defineProperty(我是对象,'我是新增属性',{
        // 这个对象是用来修饰属性的,即属性的特征属性
        // 就是我们看到的属性值
        value:'我是新增属性的属性值',
        // 这个新增属性是否可以被删或者是否可以再次设置这个属性特征对象。
        configurable:true | false,
        // 是否可以被枚举到
        enumerable:true | false,
        // 是否只读
        writable:true | false,
        // 以下是重点:
        // 读取该属性值时触发get函数
        get:function() {},
        // 修改该属性值时出发set函数
        set:function(value) {}
    })
    

      介绍完毕。

    下面来动手实现下vue的数据绑定。

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <input id="input" type="text" placeholder="写点东西试试">
        <p id="text"></p>
    <script type="text/javascript">
    var obj ={
        name:'hhh'
    }
    Object.defineProperty(obj,'name',{
        set:function(value) {
            document.getElementById('text').innerText = value
            document.getElementById('input').value = value
        }
    })
    document.getElementById('input').addEventListener('keyup',function(event) {
            obj.name = event.target.value
    
    })
    </script>
    </body>
    </html>
  • 相关阅读:
    NOIP2011 D1T1 铺地毯
    NOIP2013 D1T3 货车运输 倍增LCA OR 并查集按秩合并
    POJ 2513 trie树+并查集判断无向图的欧拉路
    599. Minimum Index Sum of Two Lists
    594. Longest Harmonious Subsequence
    575. Distribute Candies
    554. Brick Wall
    535. Encode and Decode TinyURL(rand and srand)
    525. Contiguous Array
    500. Keyboard Row
  • 原文地址:https://www.cnblogs.com/zhouxiaohouer/p/7905801.html
Copyright © 2011-2022 走看看