19. [基础]Vue绑定事件详讲-方法和参数

可能你会觉的Vue中的绑定事件非常简单,和原生JavaScript对比,确实是简化了很多,但里边还是有很多你需要注意的点的,特别是事件修饰符这部分的内容还是相当多的。我们将用两节文章的篇幅,讲解Vue3.x中的绑定事件和它相关的种种。第一节先来介绍一下绑定事件的基本用法。

按钮的基本绑定事件

现在的需求是这样的,只要小伙伴点击按钮,我们就会增加报名数量,这看起来非常的刺激。在开始编码前我们需要一个纯净的页面。

新建一个页面Demo19.html,然后复制下面这段代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo19</title>
    <script src="https:[email protected]" ></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    const app=Vue.createApp({ 
    data(){
        return{
            count:0
        }
    },
    methods:{},
    template:`
      <div>目前已点报名的小伙伴数量{{count}}.</div>
      <button>增加一位小伙伴</button>
        ` 
    }) 
    const vm=app.mount("#app")

</script>

</html>

可以先简单的看一下这段代码,在模板(template)里边有一个<div>显示了目前的报名小伙伴数量,数量是在data中定义的变量count。然后有一个按钮<button>。现在要做的就是每点击一下按钮,让数量加1。到这里小伙伴可以不先向下看,自己先写一下。

先在methods里写一个方法,我这里给方法起名字叫addCountClick( ),代码如下:

methods:{
    addCountClick(){
        this.count++;
    },
},

然后在button上绑定这个响应事件。

template:`
    <div>目前已点报名的小伙伴数量{{count}}.</div>
    <button @click="addCountClick">增加一位小伙伴</button>
    ` 
})

这时候你可以打开浏览器预览一下效果,当你点击按钮时,”小伙伴”的数量就会不断增加。

点击按钮时,"小伙伴"的数量就会不断增加

直接用表达式实现

你还可以使用更简单的方法,不在methods中写任何的响应方法,而是使用表达式来编写。

<button @click="count++">增加一位小伙伴</button>

这看起来更见的简单了,保持代码的精简,是一个程序员应有的追求,但这样灵活性也会比较差。

事件中的event对象

在编写响应事件时,是可以接受一个event参数的,这个参数就是关于响应事件的一些内容。我们直接打印出event,你会发现内容比较多,其实这些参数还是值得一看的,在工作中有时真的会用到。

methods:{
    addCountClick(event){
        this.count++;
        console.log(event)
    },
},

这时候你可以打开浏览器,然后打开控制台查看一下效果。可以看到event的内容非常多,想直观看到是那个DOM元素触发事件,可以使用target属性。

console.log(event.target)

单参数/多参数的传递

先来看传入单独的参数,比如现在每次点击小伙伴的增量不再是1,而是2,就可以这样来编写。

methods:{
    addCountClick(num){
        this.count+=num
    },
},
template:`
        //.....
    <button @click="addCountClick(2)">增加一位小伙伴</button>
    ` 
})

有参数的情况下使用event

这时候你还想使用event参数,那需要如何编写呢,方法是参数增加$event

methods:{
    addCountClick(num,event){
        this.count+=num;
        console.log(event.target)
    },
},
template:`
    <div>目前已点报名的小伙伴数量{{count}}.</div>
    <button @click="addCountClick(2,$event)">增加一位小伙伴</button>
    ` 
})

总结一下:

在有多个参数的情况下,要继续使用event,需要在调用的地方使用$event,进行传递参数,然后在方法上正常接收就可以了。

一个按钮调用两个方法

在有些复杂的需求中,是需要点击一个按钮,同时执行两个方法的。

先写两个方法handleBtnClick1handleBtnClick2,每个方法里的业务逻辑,就是弹出一个alert。代码如下:

methods:{
    //...
    handleBtnClick1(){
        alert(1)
    },
    handleBtnClick2(){
        alert(2)
    },
},

在模板的按钮中可以这样使用这两个方法:

<button @click="handleBtnClick1(),handleBtnClick2()">增加一位小伙伴</button>

这里需要注意的是:调用方法的时候,要加括号上(),如果不加,调用是无效的。

总结一下:

如果想在模板中一次触发两个事件方法,需要 用,逗号,把事件隔开,然后每个事件后边必须加括号上()才能起作用。

本文就先到这里了,下节继续讲解绑定事件的修饰符。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 19. [基础]Vue绑定事件详讲-方法和参数

发表评论

前端开发相关广告投放 更专业 更精准

立即查看 联系我们