目录
Vue当中的事件修饰符目的:
为了更纯粹的数据逻辑,vue提供了很多事件修饰符,来代替处理一些 DOM 事件细节。 主要是用来和事件连用,决定事件出发的条件或者用来阻止事件的触发机制
事件冒泡:
提到修饰符需要先介绍一下事件冒泡:
事件冒泡,当事件发生后,这个事件就要开始传播(从里到外或者从外到里)为什么要传播呢?. 因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上。. 例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身可能不能处理这个事件,事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中(例如我们给按钮的onclick属性赋一个函数的名字,就是让这个函数去处理该按钮的click事件),或者按钮的父级绑定有事件函数,当该点击事件发生在按钮上,按钮本身并无处理事件函数,则传播到父级去处理。
什么意思呢,举个例子:
我设定大的div里有一个点击事件,按钮有一个点击事件,但是点击小的div也会触发div点击事件,点击div里的按钮会触发两个事件,这就是事件冒泡,修饰符就是为了避免事件冒泡的
代码:
<style>
#aa{width: 300px;height: 300px;background-color: red;}
#app {width: 600px;height: 600px;background-color: green;}
</style>
<div id="app" @click="divClick">
<div id="aa" @click="aaClick">
<button @click="btnClick">按钮</button>
</div>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el : "#app",
data:{},
methods:{
btnClick() {
alert("button被点击了");
},
divClick() {
alert("div被点击了");
},
aaClick() {
alert("aa被点击了");
}
}
});
</script>
事件修饰符:
.stop | 阻止事件冒泡 |
.prevent | 阻止标签的默认行为 |
.once | 只触发一次,加上once之后prevent失效 |
.capture | 捕获冒泡 |
.self | 将事件绑定到自身,只有自身才能触发 |
.passive | 不阻止事件的默认行为 |
怎么应用呢,就是在@click后面直接.修饰符就行:
<button @click.stop=""></button>
用的是上方的样式,下面就只写html和输出结果了:
1.stop:
<div id="app" @click="divClick">
<div id="aa" @click="aaClick">
<button @click.stop="btnClick">按钮</button>
</div>
</div>
这样点击按钮不会触发aaClick和divClick
2.prevent:
<a href="https://www.baidu.com" @click.prevent="aClick">百度一下</a>
某些标签像a标签,他本身是拥有默认事件的,这些事件虽然是冒泡之后开始的,但是不会因为stop而停止,阻止类似于这种本身拥有默认事件的标签,就需要prevent来阻止标签的默认事件
3.once:
<div id="app" @click="divClick">
<div id="aa" @click="aaClick">
<button @click.once="btnClick">按钮</button>
</div>
</div>
加上once修饰符之后事件只触发一次,但是once不影响事件的冒泡,上层事件仍然会触发,并且加上once的事件prevent会失效,页面刷新之后次数会被重置
连续点击的结果就是除了第一次会三个弹窗都出来,剩下的都只会出现除了按钮的另外两个弹窗
4.capture:
<div id="app" @click="divClick">
<div id="aa" @click.capture="aaClick">
<button @click="btnClick">按钮</button>
</div>
</div>
加上.capture修饰符的时候会先触发事件
点击按钮结果就是:先执行aaClick之后执行btnClick最后执行divClick
5.self:
<div id="app" @click="divClick">
<div id="aa" @click.self="aaClick">
<button @click="btnClick">按钮</button>
</div>
</div>
只有自身才能触发
点击按钮结果就是:执行btnClick和divClick,跳过aaClick;
点击中间层aa结果:执行aaClick和divClick,他也不影响事件冒泡
6.passive
.passive是2.3.0 新增的修饰符,是用来告诉浏览器你不想阻止事件的默认行为。
为什么需要告诉浏览器不阻止事件的默认行为?
简单来说,每次事件产生,浏览器都会去查询是否由preventDefault()阻止该次事件的默认动作。我们加上.passive是为了告诉浏览器,不用查询了,我们没有阻止。
所以说,.passive修饰符就是为了提升移动端的性能。在滚动监听,@scoll,@touchmove时,每次使用内核线程查询prevent会使滑动卡顿,使用.passive修饰符跳过内核线程查询,可以大大的提高流畅度。
键盘修饰
顾名思义:就是通过键盘操作事件
用法和事件修饰符一样,举一个小栗子:
<div id="app" @keyup.enter="valid">
<input type="text" v-model="input">
<input type="button" value="提交" @click="valid">
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
input : "",
},
methods: {
valid() {
if(this.input == ""){
alert("用户名不能为空");
}
},
});
</script>
这样就可以通过回车来进行操作了
都有哪些键盘修饰符呢:
- .enter---------回车
- .tab------------tab键
- .delete--------包含delete和backspace和小键盘关闭的小键盘的.
- .esc------------返回键
- .space---------空格键
- .up--------------向上键
- .down----------向下键
- .left--------------向左键
- .right------------向右键