Vue.js 学习笔记 五 常用的事件修饰符

介绍几个常用的事件修饰符

直接上代码

<div id="divApp">
        <div class="divColor" v-on:click="clickDiv">
            <!--正常情况下因为按钮是放在div里的，所以点击按钮的时候，后续还会触发div的click事件，这叫冒泡-->
            <!--事件修饰符stop可以只触发当前事件，阻止冒泡，只触发绑定的事件-->
            <input type="button" value="点我！" v-on:click.stop="clickBtn" />
        </div>

        <br />
        <!--一个a标签，点击时应该会跳转到百度-->
        <!--可以用事件修饰符.prevent来阻止默认事件的触发，只触发绑定的事件-->
        <!--.once事件修饰符，可以让事件只触发一次，并且事件修饰符也可以组合使用-->
        <a href="https://www.baidu.com" target="_blank" v-on:click.prevent.once="noLink">跳转到百度</a>

        <br />
        <br />
        <!--正常情况下因为按钮是放在div里的，所以点击按钮的时候，后续还会触发div的click事件，这叫冒泡-->
        <!--如果不想用冒泡的方式触发，也可以用捕获方式，即先触发div的click,再触发按钮的click-->
        <!--事件修饰符.capture，可以让指定的事件按捕获方式触发-->
        <div class="divColor" v-on:click.capture="clickDiv">
            <input type="button" value="点我！" v-on:click="clickBtn" />
        </div>

        <br />
        <br />
        <!--正常情况下因为按钮是放在div里的，所以点击按钮的时候，后续还会触发div的click事件，这叫冒泡-->
        <!--如果想各自触发各自的，不用冒泡或者捕获方式-->
        <!--事件修饰符.self，可以让指定的事件只被当前元素触发-->
        <!--因为这里只嵌套了2个DOM元素，所以看起来效果和.stop一样-->
        @*举个例子，如果外面再嵌套一层div，按钮使用stop的话，则只触发按钮的点击事件
           如果不用stop,在最外面的div的click事件上加上self,点击按钮的话，会触发按钮点击事件并冒泡触发中间
            的div的点击事件，也就是说，self只能影响当前元素。
            *@
        <div class="divColor" v-on:click.self="clickDiv">
            <input type="button" value="点我！" v-on:click="clickBtn" />
        </div>
    </div>

JS代码

<script>
        var v = new Vue({
            el: '#divApp',
            data: {
                msg: '我是data中的msg属性哦',
            },
            methods: {
                clickDiv() {
                    alert("clickDiv");
                },
                clickBtn() {
                    alert("clickBtn");
                },
                noLink() {
                    alert("我没跳转哦");
                }
            }
        })

    </script>

详细的解释都在注释中，方便定位理解。

上一篇

Vue.js 学习笔记 四 用一，二，三的知识做个跑马灯