码迷,mamicode.com
首页 > 其他好文 > 详细

事件双向绑定原理

时间:2018-08-18 13:28:06      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:计算   背景颜色   opened   open   tle   rip   head   es2015   oct   

事件

案例:

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

 

 

 

 

 

 

 

事件双向绑定原理

标签:计算   背景颜色   opened   open   tle   rip   head   es2015   oct   

原文地址:https://www.cnblogs.com/wuzaipei/p/9496504.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!