Vue框架中的事件修饰符

修饰符	含义
.stop	阻止冒泡
.prevent	阻止默认事件
.capture	添加事件监听器时使用事件捕获模式
.self	只当事件在该元素本身触发事件
once	事件只触发一次

主要代码演示：

由于script代码和css代码一样，在此只写一份：

	<style>
	        .inner{
	            width: 500px;
	            height: 100px;
	            background-color: pink;
	        }
	    </style>
	<script>
	var vm = new Vue({
        el: '#app',
        data:{
        },
        methods:{
            divHandler(){
                console.log("触发了div的点击事件")
            },
            btnHnadler(){
                console.log("触发了按钮的点击事件")
            },
            linkClick(){
                console.log("prevent阻止了link的默认跳转事件")
            }

        }
    });
</script>

---

当没有任何修饰符修饰时

<div id="app">
   <div class="inner" @click = "divHandler">
    
        <input type="button" value="你猜点击会不会冒泡" @click = "btnHnadler">
    </div>
</div>

结果

.stop

<div id="app">
   <div class="inner" @click = "divHandler">
        <!-- 事件修饰符stop可以阻止事件冒泡-->
        <input type="button" value="你猜点击会不会冒泡" @click.stop = "btnHnadler">
    </div>
</div>

结果

.prevent

<div id="app">
<!--事件修饰符prevent可以阻止默认事件-->
   <a href="http://www.baidu.com" @click.prevent = "linkClick">有问题上百度</a>
</div>

结果

.capture

<div id="app">
    <!-- 事件修饰符capture可以捕获触发事件的机制-->
    <div class="inner" @click.capture = "divHandler">
        <input type="button" value="你猜点击会不会冒泡" @click = "btnHnadler">
    </div>
</div>

结果

.self

<div id="app">
   <!--事件修饰符self可以实现只有点击当前元素才会触发事件处理机制-->
    <div class="inner" @click.self = "divHandler">
        <input type="button" value="你猜点击会不会冒泡" @click = "btnHnadler">
    </div>
    </div>
</div>

结果

.once

<div id="app">
   <!--事件修饰符prevent可以阻止默认事件-->
    <!--事件修饰符once只会触发一次事件处理函数-->
    <a href="http://www.baidu.com" @click.prevent.once = "linkClick">有问题上百度</a>
</div>

结果

注： 本次结果需要自己去实验，截图并不能很好的理解含义，只有自己真正动手去做才能体会其中的含义。