vue中的事件修饰符、按键修饰符、系统修饰符、鼠标按钮修饰符

事件修饰符

事件修饰符还可以串联 @click.stop.prevent = "handle"

1.stop

阻止点击事件冒泡。等同于event.stopPropagation()

2.prevent

阻止默认事件发生

3.capture

当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。

4.passive

不拦截默认事件，每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上passive就是为了告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作。

这里一般用在滚动监听，@scoll，@touchmove 。因为滚动监听过程中，移动每个像素都会产生一次事件，每次都使用内核线程查询prevent会使滑动卡顿。我们通过passive将内核线程查询跳过，可以大大提升滑动的流畅度。

5.self

加了self元素的事件，只有自身触发才会执行回调，不执行冒泡过来的事件。

6.once

只触发一次回调

7.native

监听组件根元素的原生事件，在父组件中给子组件绑定一个原生的事件，不加'. native'事件是无法触 发，可理解为把一个vue组件转化为一个普通的HTML标签，并且该修饰符对普通HTML标签是没有任何作用。

按键修饰符

.exact修饰符允许你控制由精确的系统修饰符组合触发的事件，eg:@click.ctrl="handle"，如果同事按下Alt，也会触发handle()

v-on:keyup.enter 回车键
.tab tab键
.delete 含delete和backspace键
.esc：返回键
.space: 空格键
.up：向上键
.down：向下键
.left：向左键
.right：向右键
……

系统修饰符

v-on:click.shift 按住shift再点击
.alt
.ctrl
.meta

鼠标按钮修饰符

.left
.right
.middle

自定义按键修饰符别名

main.js 中

import Vue from 'vue'
Vue.config.keyCodes = {
  f2: 113,
};

页面使用

<input type="text" @keyup.f2="handleF2()" />'

特殊修饰符

.lazy：在改变后才触发（也就是说只有光标离开input输入框的时候值才会改变）
<input v-model.lazy="msg" />
.number：将输出字符串转为Number类型
<input v-model.number="val" />
.trim：自动过滤用户输入的首尾空格
<input v-model.trim="text" />

参考文章：
https://www.mozzie.cn/#/frontend/vue
https://blog.csdn.net/weixin_45621662/article/details/104862244