前端培训丁鹿学堂：每天5分钟，了解vue3vue中事件的使用 1.定义在methods中 2.在页面中通过@符号+事件名

vue中事件的使用

1.定义在methods中

 methods:{
    add(){
       console.log(123)
    }
}

2.在页面中通过@符号+事件名调用

 <span :id="dataId" @click="add">你好，{{name}}</span>

vue的事件修饰符

事件修饰符是vue提供的一些快捷的对事件进行处理的。

阻止默认事件： @click.prevent="add"

vue的事件参数

vue的事件中如果不传递参数，默认第一个是事件e对象，如果带参数的同事还要获取事件对象，则第一个参数设置为$event

 <span  @click="add($event,'zhangsan')">你好，{{name}}</span>
 // ...
 methods:{
    add(e,name){
       console.log(name)
    }
}

vue事件中的this指向

vue事件中的this，指向vue的实例。并且vue对data做了处理。所以我们在事件中可以直接通过this获取data中的数据。

data(){
    return {
        title:'hello，vue',
        name:'张三',
        dataId:'oDiv'
    }
},
methods:{
    add(){
        cosnole.log(this.title)
    }
}

发布于 2022-07-01 12:15