Vue指令之v-on的缩写和事件修饰符

Posted 2021-02-19 junlinsky

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue指令之v-on的缩写和事件修饰符相关的知识，希望对你有一定的参考价值。

Vue指令之v-on的缩写和事件修饰符

事件修饰符:

.stop阻止冒泡

冒泡机制是指，先触发当前元素的事件，再触发包裹当前元素的元素的事件。
比如，div内有一个按钮，它们都绑定了单击事件，当单击按钮时会先触发按钮的click后触发div的click。

使用.stop可阻止冒泡如<button @click.stop="btnHandler">无冒泡

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .inner {
            height: 150px;
            background-color: pink;
        }
    </style>
</head>
<div id="app">
    <div class="inner" @click="divHandler">
        <button @click="btnHandler">有冒泡</button>
        <button @click.stop="btnHandler">无冒泡</button>
    </div>
</div>

<body></body>
<script>
    var vm = new Vue({

            el: "#app",
            data: {},
            methods: {
                divHandler() {
                    alert(‘div‘);
                },
                btnHandler() {
                    alert(‘btn‘);
                }
            }
        }

    );
</script>

</html>

.prevent阻止默认事件

html一些标签有默认的事件，比如a 标签
使用.prevent修饰事件可以阻止标签的默认事件

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<div id="app">
    <a href="https://www.baidu.com/" @click="href">去百度</a>
    <br />
    <a href="https://www.baidu.com/" @click.prevent="href">去不了百度</a>
</div>

<body></body>
<script>
    var vm = new Vue({

            el: "#app",
            data: {},
            methods: {
                href() {
                    alert(‘去百度‘);
                }
            }
        }

    );
</script>

</html>

.capture 添加事件侦听器时使用事件捕获模式

捕获机制与冒泡机制相反，指先触发最外层的事件，再触发内层事件。
在外层事件使用.capture修饰会捕获标签内部的事件。

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .inner {
            height: 150px;
            background-color: pink;
        }
    </style>
</head>
<div id="app">
    <div class="inner" @click.capture="divHandler">
        <button @click="btnHandler">捕获机制</button>
    </div>
</div>

<body></body>
<script>
    var vm = new Vue({

            el: "#app",
            data: {},
            methods: {
                divHandler() {
                    alert(‘div‘);
                },
                btnHandler() {
                    alert(‘btn‘);
                }
            }
        }

    );
</script>

</html>

.self只当事件在该元素本身(比如不是子元素)触发时触发回调

在外层标签的事件中使用该修饰符修饰则事件不能通过冒泡机制触发

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .inner {
            height: 150px;
            background-color: pink;
        }
    </style>
</head>
<div id="app">
    <div class="inner" @click="divHandler">
        <button @click="btnHandler">有冒泡</button>
        <button @click.stop="btnHandler">无冒泡</button>
    </div>

    <br />
    <div class="inner" @click.self="divHandler">
        <button @click="btnHandler">冒泡机制失效</button>
    </div>
</div>

<body></body>
<script>
    var vm = new Vue({

            el: "#app",
            data: {},
            methods: {
                divHandler() {
                    alert(‘div‘);
                },
                btnHandler() {
                    alert(‘btn‘);
                }
            }
        }

    );
</script>

</html>

.once事件只触发1次

事件修饰符是可以串联的

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .inner {
            height: 150px;
            background-color: pink;
        }
    </style>
</head>
<div id="app">
    <!--这样串联起来只会阻止第一次点击的默认事件-->
    <a href="https://www.baidu.com/" @click.prevent.once="href">去百度</a>
    <input type="button" @click.once="href" value="不串联" />
</div>

<body></body>
<script>
    var vm = new Vue({

            el: "#app",
            data: {},
            methods: {
                href() {
                    alert(‘再点一次去百度‘);
                }
            }
        }

    );
</script>

</html>

以上是关于Vue指令之v-on的缩写和事件修饰符的主要内容，如果未能解决你的问题，请参考以下文章