vue学习小计-事件修饰符

事件修饰符

1> .stop

.stop含义: 用于阻止事件冒泡

.stop用法:

<div @click='函数1' style='width:200px;height:200px;background:#000'>
	<input type='button' value='按钮' @click.stop='函数2'>
</div>

如上代码,如果没有使用.stop, 点击按钮的时候, 就会先触发函数2, 然后触发函数1, 这就是事件冒泡了,添加了.stop, 点击按钮的时候, 就只会触发函数2, 不会触发函数1

2> .prevent

.prevent含义: 用于阻止默认行为

.prevent用法:

<a href='https://www.baidu.com' @click.prevent='函数'></a>

如以上代码,如果没有.prevent,点击a标签,就会执行函数和href里的跳转,添加.prevent后,就不会执行href里的网址跳转了,只会执行函数

3> .capture

.capture含义: 用于实现捕获触发事件

.capture用法:

<div @click.capture='函数1' style='width:200px;height:200px;background:#000'>
	<input type='button' value='按钮' @click='函数2'>
</div>

如上代码,如果没有使用.capture, 点击按钮的时候, 就会先触发函数2, 然后触发函数1, 添加了.capture, 点击按钮的时候, 就只会先触发函数1, 然后触发函数2

4> .self

.self含义: 只有点击自身时候,才会触发事件

.self用法:

<div @click.self='函数1' style='width:200px;height:200px;background:#000'>
	<input type='button' value='按钮' @click='函数2'>
</div>

如上代码,如果没有使用.self, 点击按钮的时候, 就会先触发函数2, 然后触发函数1, 添加了.self, 点击按钮的时候, 就只会先触发函数2,只有点击div盒子本身,才会触发函数1

5> .once

.once含义: 使用于只触发一次事件

.once用法:

<a href='https://www.baidu.com' @click.prevent.once='函数'></a>