• 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>
  • 相关阅读:
    仅此一文让你明白ASP.NET MVC 之View的显示
    仅此一文让你明白ASP.NET MVC原理
    MVC4相关Razor语法以及Form表单
    关于jQuery UI 使用心得及技巧
    jQuery编程的最佳实践
    前端不为人知的一面--前端冷知识集锦
    jQuery插件开发精品教程,让你的jQuery提升一个台阶
    常用数据结构及复杂度
    初探12306售票算法
    ajax省市县三级联动
  • 原文地址:https://www.cnblogs.com/zhouxiaohouer/p/7905801.html
Copyright © 2020-2023  润新知