第8天 | 14天搞定Vue3.0，事件处理(详细)

myzbx 2025-09-18 04:58 2 浏览

在JavaScript语言中，当用户与UI组件交互时，UI组件能够激发一个相应事件。例如，用户按动按钮、滚动文本、移动鼠标或按下按键等，都将产生一个相应的事件。

Vue3.0使用v-on指令(缩写为@符号)来监听DOM事件，并在触发事件时执行一些 JavaScript函数。语法为 v-on:click="函数名" 或@click="函数名"。

8.1 事件处理

如果你有看过前面的章节，应该知道响应用户操作事件的函数是放在methods里面的。为了省点代码，绑定事件，我就不用v-on了，而用其缩写的@，不懂得偷懒的程序员，不是好工程师啊。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue3.0计算属性</title>
    <script src="vue.global.js"></script>
</head>
<body>
<span id="app">
<button @click="say">老陈说</button>
</span>
<script>
    Vue.createApp({
        data() {
        },

        methods: {
            say() {
               alert("老陈说，爱编程的人真酷!")
            }
        },
    }).mount("#app")
</script>
</body>
</html>

输出结果(按下按钮)

8.2 传递参数

Vue事件绑定，除了支持直接绑定到一个方法外，也可以在内联JavaScript语句中调用方法。说白了，就是可以直接在函数中传递参数。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue3.0计算属性</title>
    <script src="vue.global.js"></script>
</head>
<body>
<span id="app">
<button @click="say('老陈说')">老陈说</button>
<br/><br/>
<button @click="say('老头说')">老头说</button>
</span>
<script>
    Vue.createApp({
        data() {
        },

        methods: {
            say(title) {
                alert(title + "，爱编程的人真酷!")
            }
        },
    }).mount("#app")
</script>
</body>
</html>

输出结果(按下按钮)

8.3 事件来源

如果界面上有多个按钮或表单，你想根据用户的不同操作，响应不同的事件，这时你可以通过监听事件源的方式进行处理。在软件系统中，我们常常见到的打开、保存、导出、打印等多个按钮在同一个功能菜单时，就可以用这种方式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue3.0计算属性</title>
    <script src="vue.global.js"></script>
    <style>
        .menu {
            border: 1px solid darkgreen;
            width: 100px;
            height: 150px;
            padding-top: 20px;
            padding-left: 20px;
        }
    </style>
</head>
<body>
<div class="menu" id="app">
    <button name="save" @click="opt">保存</button>
    <br/> <br/>
    <button name="open" @click="opt">打开</button>
    <br/> <br/>
    <button name="print" @click="opt">打印</button>
</div>
<script>
    Vue.createApp({
        data() {
        },
        methods: {
            opt(event) {
                let opt = event.target.name
                let src = event.target.tagName
                alert('知道你点了 ' + opt + ' ' 
                      + src + ',我马上处理.')
            }
        },
    }).mount("#app")
</script>
</body>
</html>

输出结果

细心的人，可能会想到，如果想要监听事件源，又想要传递参数时，Vue又当如何处理，不要急，你想到的，我也想到了，Vue创始人也想到了。传递参数时，将$event参数也传过去就好了。

<div class="menu" id="app">
    <button name="save" @click="opt('保存',$event)">保存</button>
    <br/> <br/>
    <button name="open" @click="opt('打开',$event)">打开</button>
    <br/> <br/>
    <button name="print" @click="opt('打印',$event)">打印</button>
</div>
<script>
    Vue.createApp({
        data() {
        },
        methods: {
            opt(name, event) {
                let opt = event.target.name
                let src = event.target.tagName
                alert('知道你点了 ' + opt + '(' + name + ') '
                    + src + ',我马上处理.')
            }
        },
    }).mount("#app")
</script>

输出结果

8.4 多事件处理

一个操作，多个函数响应，这便是多事件也。在Vue3.0中，这些函数都放在@click里并用逗号分隔即可。这种处理方式，真的很赞，就像你转发分享这篇文章一样。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue3.0计算属性</title>
    <script src="vue.global.js"></script>
    <style>
        .menu {
            border: 1px solid darkgreen;
            width: 100px;
            height: 150px;
            padding-top: 20px;
            padding-left: 20px;
        }
    </style>
</head>
<body>
<div class="menu" id="app">
    <button @click="add(6),sub(3)">加减</button>
</div>
<script>
    let result = 0
    Vue.createApp({

        data() {
        },
        methods: {
            add(num) {
                result += num
            },
            sub(num) {
                result -= num
                alert('一炮双响，结果是：' + result)
            }
        },
    }).mount("#app")
</script>
</body>
</html>

输出结果

8.5 按键修饰符

不知你在用键盘输入多项内容之后，是否有按下回车键的习惯，如果没有，那证明你打字很慢，如果有，那证明你不是程序员，而是打字员(哈哈~~,什么鬼逻辑)。

在较完善的系统中，当用户按下回车键(或其他键)时，都会有响应的。为了解决这个问题，Vue允许为v-on或者@在监听键盘事件时添加按键修饰符。

Vue为最常用的键提供了.enter(回车) 、.tab 、 .delete (捕获“删除”和“退格”键)、.esc(取消) 、.up(上)、.down(下)、.left(左)、.right(右)等。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue3.0计算属性</title>
    <script src="vue.global.js"></script>
    <style>
        .menu {
            border: 1px solid darkgreen;
            width: 100px;
            height: 150px;
            padding-top: 20px;
            padding-left: 20px;
        }
    </style>
</head>
<body>
<div class="menu" id="app">
    <button @keyup.enter="submit" @click="submit" type="submit">确定</button>
</div>
<script>
    let result = 0
    Vue.createApp({
        data() {
        },
        methods: {
            submit() {
                alert('你明明按下了回车键，别耍赖,赶紧分享文章')
            }
        },
    }).mount("#app")
</script>
</body>
</html>

输出结果

好了，有关Vue3.0事件处理的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注今日头条：老陈说编程。我在分享Python，前端、Java和App方面的干货。关注我，没错的。

#前端##Vue.js##JavaScript##程序员##Web#

DOM 事件监听程序

上一篇：Vue事件处理详解_vue事件对象的使用
下一篇：【Vue3 基础】05.组件化_vue中组件

第8天 | 14天搞定Vue3.0，事件处理(详细)

8.1 事件处理

8.2 传递参数

8.3 事件来源

8.4 多事件处理

8.5 按键修饰符

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

20个免费音乐音效下载网站，无版权素材商业影片也可用