码云 Vue3教程 2021-06-23

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

AI 概述

按钮的基本绑定事件直接用表达式实现事件中的 event 对象单参数/多参数的传递总结一下：一个按钮调用两个方法总结一下：可能你会觉的 Vue 中的绑定事件非常简单，和原生 JavaScript 对比，确实是简化了很多，但里边还是有很多你需要注意的点的，特别是事件修饰符这部分的内容还是相当多的。我们将用两...

文章目录隐藏

按钮的基本绑定事件
直接用表达式实现
事件中的 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>
    ` 
})

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

直接用表达式实现

你还可以使用更简单的方法，不在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，进行传递参数，然后在方法上正常接收就可以了。

一个按钮调用两个方法

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

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

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

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

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

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

总结一下：

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

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

以上关于19. [基础]Vue绑定事件详讲-方法和参数的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 0 赏

给作者打赏，鼓励TA抓紧创作！

微信

支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

Vue3 Vue3教程 vue3相关事件

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 19. [基础]Vue绑定事件详讲-方法和参数