Vue基础学习笔记 --- 事件处理、事件修饰符、按键修饰符_vue 怎样接收函数里面的多个默认参数-优快云博客

本文链接：https://blog.youkuaiyun.com/MImi_0612/article/details/125697271

本文详细介绍了Vue中事件处理的用法，包括v-on或@的语法，以及如何传递参数。同时，深入讲解了事件修饰符如.stop、.prevent、.once、.capture、.self和.passive的作用，强调了它们在阻止事件传播和处理性能上的影响。此外，还提及了按键修饰符的应用，如.enter、.tab等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件处理：v-on

格式：v-on:事件名=“函数名” 或者 v-on:事件名=“函数名（参数）”

所写的时候 @事件名=“函数名” 或者 @事件名=“函数名（参数）”

如果函数不穿参数的时候，默认传event，代表原生的DOM事件，当调用的函数有多个参数传入的时候，需要使用原生DOM事件，要通过$event作为实参来传；

用于监听DOM事件
案例：

<body>
    <div id="app">
        <button v-on:click="say">say:{{msg}}</button>
        <button @click="say2('hello',$event)">按钮</button>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "hello"
            },
            methods: {
                say() {
                    console.log(this.msg);
                },
                say2(txt, event) {
                    console.log(txt, event);
                }
            }
        })
    </script>
</body>