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>
  • 相关阅读:
    Outlook同步问题
    Excel下三角图解的绘制
    数据库,SQL,万恶之源?
    新年第一篇
    ArcGIS的GeoProcessing的原理及实现(1)
    如何在多个文件中查找需要的信息
    关于GIS门户(GIS Portal)的概念
    2004总结
    MapViewControl更新
    GCDPlot 0.22 介绍
  • 原文地址:https://www.cnblogs.com/zhouxiaohouer/p/7905801.html
Copyright © 2011-2022 走看看