Vue 的事件修饰符

最新推荐文章于 2024-10-10 11:02:42 发布

原创最新推荐文章于 2024-10-10 11:02:42 发布 · 696 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

Vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了Vue中事件修饰符的用法，如.prevent阻止默认行为，.stop防止事件冒泡，.once确保事件只触发一次。在示例中，一个超链接的点击事件被阻止了其默认的页面跳转，展示了事件修饰符在实际应用中的效果。

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

Vue 时间修饰符

知识点：

事件修饰符

@click.prevent=“showInfo” 可以阻止默认事件。

.stop 阻止事件冒泡。

.once 事件只触发一次。

.capture 使用事件的捕获模式。

.self 只有event.target是当前操作的元素时才触发事件。

.passive 事件的默认行为立即执行，无需等待时间回调执行完毕。

需求：一个超链接包裹了一个监听事件，点击之后，阻止原来超链接跳转。

<body>
    <!-- 
        事件修饰符
        @click.prevent="showInfo" 可以阻止默认事件。
              .stop 阻止事件冒泡。
              .once 事件只触发一次。
              .capture 使用事件的捕获模式。
              .self 只有event.target是当前操作的元素时才触发事件。
              .passive 事件的默认行为立即执行，无需等待时间回调执行完毕。
     -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <a href="https://www.baidu.com/" @click.prevent="showInfo">点我提示1</a>
    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el: "#root",
            data() {
                return {
                    name: "百度"
                }
            },
            methods: {
                showInfo(e) {
                    alert("同学你好!")
                },
            }
        })
    </script>

</body>

ps:前三个修饰符比较重要且常用。