• 事件双向绑定原理


    事件

    案例:

      vue的事件绑定原理:改变图片的背景颜色问题来实现这个框架的使用方法,

      new Vue({

        el:"",

        data:{},

        methord:{},

        computed:{}   计算属性的使用:用于大量基于数据模型的计算,但并不是每一次渲染都发生更改,计算属性就会将数据直接返回,这样提高计算效率。

        mounthd:{}

    })

    我们在事件绑定的时候传入参数:比如点击事件,@click=“funname($event,index)”

     

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <input type="text" name="" id="input" value="" />
            <h1></h1>
            <h3 id="username"></h3>
            <h4 id="age"></h4>
            
            <script type="text/javascript">
                var inputText = document.querySelector('#input')
                var h1 = document.querySelector('h1')
                var h3 = document.querySelector('#username')
                var age = document.querySelector('#age')
                
                inputText.oninput = function(){
                    var value =  inputText.value
                    h1.innerHTML = value;
                }
                
                
                var obj = {
    //                name:'张三',
                    age:14,
                    set name(value){
    //                    console.log(value)
                        this._name = value
                        h3.innerHTML = this._name
                    },
                    get name(){
                        return this._name
                    },
                    
                }
                
                console.log(obj)
                //setter,getter//es6,es2015标准
                //在给对象属性赋值,或者是获取对象属性的时候,会调用setter、getter两个方法
            </script>
        </body>
    </html>
    数据双向绑定

     

     

     

     

     

     

  • 相关阅读:
    postgresql客户端连接错误的解决方法【转】
    在游戏开发中使用管理类的目的和作用
    Unity3D对象池
    yield的作用
    Unity延迟和重复调用方法
    Unity的Asset Store商店下载文件路径
    C#委托和事件详解
    C#一个关于委托和事件通俗易懂的例子
    C#委托和事件定义和使用
    C#委托和事件
  • 原文地址:https://www.cnblogs.com/wuzaipei/p/9496504.html
Copyright © 2020-2023  润新知