Vue2基础篇-08-事件修饰符

最新推荐文章于 2024-03-21 20:53:38 发布

Alan0517

最新推荐文章于 2024-03-21 20:53:38 发布

阅读量184

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/Hmj050117/article/details/128218559

版权

Vue2+Ts-基础篇专栏收录该内容

40 篇文章 3 订阅

订阅专栏

1. demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title> 事件修饰符</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<div id="root">
    <!-- 阻止默认事件（常用），比如我只想阻止a标签链接跳转 -->
    <a href="http://www.baidu.com" @click.prevent="showInfo"> 点我跳转百度查询</a>
    <!-- 阻止事件冒泡(常用) -->
    <div @click="showInfo">
        <button @click.stop="showInfo"> 点我提示信息 </button>
    </div>
    <!-- 事件只触发一次(常用) -->
    <button @click.once="showInfo"> 点我提示信息,只弹窗1次 </button>
    <!-- 使用事件的捕获模式 
    如果不加捕获关键字，则按照流程是 先捕获再冒泡，事件是在冒泡阶段处理的，现在我们想在捕获阶段处理，就需要加上关键字 capture
    -->
    <div @click.capture="showMsg(1)">
        div1
        <div @click="showMsg(2)">
            div2
        </div>
    </div>
    <!-- 只有event.target 是当前操作的元素时才触发事件 -->
    <!-- 因为加了self，所以只有event事件调用时才会触发，如果点击里面的button，是button调用，则无法触发 -->
    <div @click.self="showInfo">
        <button @click="showInfo"> 点我触发</button>
    </div>
</div>
<script text="text/javascript">
    new Vue({
        el: "#root",
        methods: {
            showInfo(e) {
                //  e.preventDefault()   //阻止默认事件发生，也可以直接在点击事件上操作 @click.prevent
                alert("你好")
            },
            showMsg(msg) {
                console.log(msg)
            }
        }
    })
</script>
<body>
</body>
</html>

2. 小总结

<!--  小总结：
   Vue中的事件修饰符
   1. prevent: 阻止默认事件(常用);
   2. stop: 阻止事件冒泡(常用)；
   3. once: 事件只触发一次(常用)；
   4. capture: 使用事件的捕获模式
   5. self: 只有event.target 是当前操作的元素才触发事件；
   6. passive: 事件的默认行为立即执行，无需等待事件回调执行完毕；
 -->