13.Vue事件监听，事件修饰符，按键监听，精准监听

我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。用法为 v-on:click="methodName" 或使用简单写法 @click="methodName"

要想传递原生的DOM事件的话，需要借助Vue的内置变量 $event 。

事件绑定还支持多方法调用，只需要将方法使用, 隔开即可。

请看代码
导入Vue

<script src="https://unpkg.com/vue@next"></script>

<div id="app">
	<button @click="sayHi()">say Hi</button>
	<button @click="seeThis($event)">传递DOM事件</button>
	<button @click="one(), two()">多事件</button>
</div>

const app = {
	methods: {
		sayHi() {
			console.log("Hi")	
		},
		seeThis(t) {
			console.log(t)
		},
		one() {
			console.log("one")
		},
		two() {
			console.log("two")
		}
	}
}

Vue.createApp(app).mount('#app')

效果图：

事件修饰符

Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

.stop 阻止事件继续冒泡
.prevent 阻止默认事件
.capture 捕获事件
.self 当前元素
.once 只执行一次
.passive 被动执行

事件修饰符可以链式调用，但是链式调用的时候一定要注意事件修饰符的顺序。

按键修饰符

Vue 允许为 v-on 或者 @ 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input @keyup.enter="submit" />

可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为修饰符。

<input @keyup.page-down="onPageDown" />

在上述示例中，处理函数只会在 $event.key 等于 'PageDown' 时被调用。

按键别名

常用按键

Vue 为最常用的键提供了别名：

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

系统修饰符

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

.ctrl
.alt
.shift
.meta

系统修饰符联合按键一起使用：

案例：

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

鼠标按键修饰符

.left
.right
.middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

.exact 准确修饰

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>