Vue3.0学习笔记-绑定事件

最新推荐文章于 2024-07-08 22:26:45 发布

petit_wu

最新推荐文章于 2024-07-08 22:26:45 发布

阅读量1.8k

点赞数

分类专栏： vue 文章标签： vue javascript vue.js html

本文链接：https://blog.csdn.net/petit_wu/article/details/114298695

版权

本文详细介绍了Vue3.0中如何绑定事件，包括直接使用表达式、绑定单个或多方法、传递参数以及使用事件修饰符如stop、prevent、capture、self、once和passive等，还提到了按键和鼠标修饰符的用法。

摘要由CSDN通过智能技术生成

方法和参数

1、直接使用表达式实现

<button @click="count++">直接使用表达式实现</button>

2、绑定单个方法；没有参数调用不需要括号；响应事件可以接受一个event参数，调用时不需要传递；

methods:{
    addCountClick(){
        this.count++;
    },
    addCountClick2(event){
        this.count++;
        console.log(event);
        console.log(event.target);
    },
},
template:`
    <div>调用响应事件,目前数量{
  {count}}.</div>
    <button @click="addCountClick">调用响应事件</button>
    <button @click="addCountClick2">调用响应事件，接受event参数</button>
    ` 
})

3、绑定单个方法，传递参数；如果要使用event参数，需要通过$event显式调用；

methods:{
    addCountClickArg(num){
        this.count++;
    },
    addCountClickArg2(num,event){
        this.count++;
        console.log(event);
        console.log(event.target);
    },
},
template:`
    <div>调用响应事件-带参数,目前数量{
  {count}}.</div>
    <button @click="addCountClickArg(3)">调用响应事件-带参数</button>
    <button @click="addCountClickArg2(5,$event)">调用响应事件-带参数，接受event参数</button>
    ` 
})

4、一个按钮调用两个方法，通过逗号分隔，调用时无论是否有参数都需要带括号

methods:{
    handleBtnClick1(){
        alert(1)
    },
    handleBtnClick2(){
        alert(2)
    },
},
template:`
    <button @click="handleBtnClick1(),handleBtnClick2()">一个按钮调用两个方法</button>
    ` 
})

事件修饰符

冒泡事件：在JavaScript中有嵌套的DOM元素时，两个都有绑定事件，JS会自动向上