04.Vue3.x中的事件方法详解、事件监听、方法传值、事件对象、多事件处理程序、事件修饰符、按键修饰符

事件对象

有时候我们还需要在内联语句处理程序中访问原始Dom事件。你可以使用特殊$event变量将其传递给方法

1.单个参数

逻辑

export default {
   
    name:"App",
    data() {
   
        return {
   
            msg:"你好Vue"
        }
    },
    methods:{
   
        eventFn(e){
   
            console.log(e);
            // e.srcElement dom节点也可以使用e.target
            // e.srcElement.style.background='red';
            e.target.style.background='red';
            console.log(e.target.dataset.aid);// 获取自定义属性
        }
    }
}

模板

<button data-aid="zws" @click="eventFn($event)">事件对象</button>

2.多个参数

export default {
   
    name:"App",
    data() {
   
        return {
   
            msg:"你好Vue"
        }
    },
    m