Vue04_事件绑定_methods

v-on:事件名="表达式"

methods: 定义回调函数 

    
    


    

        
        event binding
    

click button

 

简写  v-on:  替换为@

例：v-on:click 简写为 @click

    
    


    

        event binding
    

click the button

 

回调函数被调用时会传一个参数 => 当前发生的事件 event 

    
    


    

        event binding
    

 click the button

 

如果回调函数需要传参数，那么将无法获取事件对象 event

此时需要 $enent 占位符，event 对象将被传到 $event 所占的位置

例：event binding

事件对象将被传到第一个形参的位置

    
    


    

        event binding
    

 

 

 

 

回调函数中的this 是当前的vue对象

    
    


    

        event binding
    

 click the button

 

 

methods 中的方法可以用vue对象直接访问

 

methods 中的方法可以用vue对象直接访问

如何实现

    
    



    event binding
    event binding

//定义一个类
class Vue {
    //定义构造函数
    constructor(option){
        //获取所有的属性名
        let propertys = Object.keys(option.data);
        //添加代理属性
        propertys.forEach(
            /* ()=> {} 形式为箭头函数 其内没有this ,会从上一级作用域寻找 this 变量
             function(){} 中的this 为调用该方法的对象，此处箭头函数中的this 从上一级作用域找到的 this 是 constructor 创建的对象
               */
             (propertyName,index) => {
                 //不以$ _ 开始的属性名 做数据代理
                 let firstChar = propertyName.charAt(0);
                 if( firstChar != '_' && firstChar !='$' ){
                     Object.defineProperty(this,propertyName, {
                         get() {
                             return option.data[propertyName];
                         },
                         set(val) {
                             option.data[propertyName] = val;
                         }
                     });
                 }
            }
        );

        //获取 methods 中的所有方法名
        let methodsNames = Object.keys(option.methods);
        methodsNames.forEach(
            (methodName,index) =>
            {
                //为 当前 vue 对象 扩展一个方法
                this[methodName] = option.methods[methodName];
            }
        );

    }
}