前端学习-超强VUE教程07 事件处理-CSDN博客

本文链接：https://blog.csdn.net/qinjava/article/details/107214660

本文详细介绍了Vue.js中事件处理器的使用方法，包括@click事件的绑定，以及如何通过事件修饰符如.prevent、.stop、.capture、.self、.once来精确控制事件的行为。同时，还讲解了如何使用按键修饰符响应特定键盘输入。

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

vue事件处理器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="box">
     <button @click="handleClick">click1</button>
     <button @click="handleClick()">click2</button>
     <button @click="isshow=!isshow">click3</button>
        <div v-show="isshow">11111111111111111</div>
    </div>

    <script type="text/javascript">
      var app = new Vue({
            el: '#box',
            data: {
                isshow: false
            },
            methods: {
                handleClick(){
                    this.isshow=!this.isshow;
                }
            }
        })
    </script>
</body>

</html>

vue事件修饰符

事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

阻止子类事件触发父类事件冒泡事件

    <ul @click="handleulClick()">
        <li @click.stop="handleliClick()">1111</li>
    </ul>

按键修饰符
.enter => // enter键
.tab => // tab键
.delete (捕获“删除”和“退格”按键) => // 删除键
.esc => // 取消键
.space => // 空格键
.up => // 上
.down => // 下
.left => // 左
.right => // 右