一、事件修饰符

事件修饰符主要用于修饰事件，而我们一般是在click,scroll,submit这三种事件中需要用到这些修饰符。

.stop
.prevent
.capture
.self
.once
.passive

1.stop

其目的就是为了阻止事件传播，触发son事件，防止father事件触发,案例代码如下：

<div class="father" @click="father">
      <div class="son" @click.stop="son"></div>
</div>
father(){
    alert("father事件被触发")
},
son(){
    alert("son事件被触发")
}

2.prevent

用于阻止默认事件，比如<input type="submit" value="提交">会默认提交元素。那么我们给到的案例如下：

//点击结果是跳去npm那个网址
<a href="www.baidu.com" @click.prevent="click">跳转去百度</a>
click() {
   location.href = 'https://www.npmjs.com/'
}
<!-- 提交事件不再重载页面 --> 
<form v-on:submit.prevent="onSubmit"></form>

3.capture

添加事件监听器时使用事件捕获模式，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理，案例如下：

//添加.capture的事件会在捕获阶段执行，而其他方法会在冒泡阶段执行
<div class="father" @click.capture="father">
  <div class="son" @click="son"></div>
</div>
father(){
    alert("father事件被触发")
},
son(){
    alert("son事件被触发")
}

4.self

只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的。案例如下：

//如果点击son事件，则father事件不会被触发，如官网解释：只当在 event.target 是当前元素自身时触发处理函数
<div class="father" @click.self="father">
  <div class="son" @click="son"></div>
</div>
father() {
    alert("father事件被触发")
},
son() {
    alert("son事件被触发")
}

5.once

点击事件将只会触发一次,案例如下：

//button按钮绑定的click事件只触发一次就不会再触发了
<button @click.once="click">点击弹出alert</button>
click() {
    alert('click被触发')
}

6.passive

告诉浏览器你不想阻止事件的默认行为，案例如下

//告诉浏览器没有阻止默认行为的判断,这里即prevent会失效
<a href="www.baidu.com" @click.prevent.passive="click">执行默认行为</a>

二、按键修饰符

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

比如说我们按下回车需要实现点击登录效果同样的效果，那么我们需要用到按键修饰符，但是这里需要注意的是按键修饰符都是作用于input元素的，因为它就叫按键修饰符，而只有input能输入内容，能接受键盘按键。案例如下所示

<input v-on:keyup.enter="submit">

按键码

keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。案例如下：

<input v-on:keyup.13="submit">

三、系统修饰符

系统修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

常用

.ctrl
.alt
.shift
.meta 系统修饰符可以跟事件修饰符链接使用，案例代码如下：

<input v-on:keyup.ctrl.alt.shift.meta.enter="click">
<button v-on:keyup.ctrl.alt.shift.meta.enter="click">无效</button>
<button v-on:click.ctrl.alt.shift.meta="click">ctrl+alt+点击触发</button>

新增.exact

exact 修饰符允许你控制由精确的系统修饰符组合触发的事件只能是这两个按键按下的时候触发，多了键就不行，案例代码如下：

//即使 Alt 或 Shift 被一同按下时也会触发
<button v-on:click.ctrl="onClick">A</button> 
//有且只有 Ctrl 被按下的时候才触发
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

鼠标按钮修饰符

.left
.right
.middle

<button v-on:click.left="click">鼠标左键触发</button>
<button v-on:click.middle="click">鼠标中键触发</button>
<button v-on:click.right="click">鼠标右键触发</button>

vue中的事件处理