zoukankan      html  css  js  c++  java
  • 事件双向绑定原理

    事件

    案例:

      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>
    数据双向绑定

     

     

     

     

     

     

  • 相关阅读:
    【Linux】linux系统管理---好用的一些开源工具
    【转载】超级系统工具Sysdig,比 strace、tcpdump、lsof 加起来还强大
    Redis 主从复制
    Redis 持久化之RDB和AOF
    Redis 快速入门
    EasyUI 树菜单
    Nginx 搭建图片服务器
    vsftpd 安装
    Nginx 安装部署
    Mybatis3 快速入门
  • 原文地址:https://www.cnblogs.com/wuzaipei/p/9496504.html
Copyright © 2011-2022 走看看