19 一个按钮调用两个方法,事件中的event对象

野性酷女 2023-10-06 20:32 4阅读 0赞

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

*  按钮的基本绑定事件
 *  直接用表达式实现
 *  事件中的event对象
 *  单参数/多参数的传递
 *  一个按钮调用两个方法

可能你会觉的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://unpkg.com/vue@next" ></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>
        ` 
    })

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

![在这里插入图片描述][7193832c4ef74d8da5eb0793f5eb853a.gif_pic_center]

<!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://unpkg.com/vue@next" ></script>
    </head>
    <body>
        <div id="app"></div>
    </body>
    <script>
        const app=Vue.createApp({
         
        data(){
        
            return{
        
                count:0
            }
        },
        methods:{
        
            addCountClick(){
        
                this.count++;
            },
        },
        template:`
            <div>目前已点报名的小伙伴数量{
         {count}}.</div>
            <button @click="addCountClick">增加一位小伙伴</button>
            ` 
        })
        const vm=app.mount("#app")
    
    </script>
    
    </html>

## 直接用表达式实现 ##

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

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

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

## 事件中的event对象 ##

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

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

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

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

console.log(event.target)

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
这看起来更见的简单了，保持代码的精简，是一个程序员应有的追求，但这样灵活性也会比较差。

## 单参数/多参数的传递 ##

先来看传入单独的参数，比如现在每次点击小伙伴的增量不再是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，进行传递参数，然后在方法上正常接收就可以了。

<!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://unpkg.com/vue@next" ></script>
    </head>
    <body>
        <div id="app"></div>
    </body>
    <script>
    const app=Vue.createApp({
         
        data(){
        
            return{
        
                count:0
            }
        },
        methods:{
        
            addCountClick(num,event){
        
                this.count+=num;
                console.log(event.target)
            },
        },
        template:`
            <div>目前已点报名的小伙伴数量{
         {count}}.</div>
            <button @click="addCountClick(2,$event)">增加一位小伙伴</button>
            ` 
        })
    const vm=app.mount("#app")
    
    </script>
    </html>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]

## 一个按钮调用两个方法 ##

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

先写两个方法 `handleBtnClick1 和 handleBtnClick2` ，每个方法里的业务逻辑，就是弹出一个`alert`。代码如下：

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

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

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

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

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

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

<!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://unpkg.com/vue@next" ></script>
    </head>
    <body>
        <div id="app"></div>
    </body>
    <script>
    const app=Vue.createApp({
         
        data(){
        
            return{
        
                count:0
            }
        },
        methods:{
        
            //...
            handleBtnClick1(){
        
                alert(1)
            },
            handleBtnClick2(){
        
                alert(2)
            },
        },
        template:`
            <button @click="handleBtnClick1(),handleBtnClick2()">增加一位小伙伴</button>
            ` 
        })
    const vm=app.mount("#app")
    
    </script>
    </html>

![在这里插入图片描述][b7521393fa564d2a8c503b9b3bb02900.gif_pic_center]

[7193832c4ef74d8da5eb0793f5eb853a.gif_pic_center]: https://img-blog.csdnimg.cn/7193832c4ef74d8da5eb0793f5eb853a.gif#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/6a3317bf621c42b594d4c44055ad7d5e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/e1b81e62e9ed4f97a6c82a191c0fdf49.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/45e7c6a0aace46caaddc34b6007084ac.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[b7521393fa564d2a8c503b9b3bb02900.gif_pic_center]: https://img-blog.csdnimg.cn/b7521393fa564d2a8c503b9b3bb02900.gif#pic_center