事件处理
事件监听
通过 v-on
指令监听事件。
<button v-on:click="submit">提交</div>
v-on
还可以简写成 @
。
<button @click="submit">提交</div>
事件处理方法
内联:
模板<template>
中,无需使用this
就可以访问实例的属性或方法。
<button v-on:click="() => {}">提交</div>
// or
<button v-on:click="value = '具体的值'">提交</div> // 单个语句可以使用第二种写法。
在 methods
定义方法:
methods
用于存储可以复用的方法,这些方法可以在Vue
实例的模板中使用。methods
中的方法可以通过this
关键字访问到当前的Vue
实例。
<template>
<button @click="submit">提交</button>
</template>
<script>
export default {
methods: {
submit() {
console.log("submit");
console.log(this, "this"); // 当前 Vue 实例。
}
}
}
</script>
事件传参:
- 什么都不传,默认接收到
event
事件对象。
<template>
<button @click="submit">提交</button>
</template>
<script>
export default {
methods: {
submit(event) {
console.log(event, "event")
}
}
}
</script>
- 传递参数后,如果还需要使用到事件对象,需要在模板中传入
$event
。
<template>
<button @click="submit('Hi!', $event)">提交</button>
</template>
<script>
export default {
methods: {
submit(msg, event) {
console.log(msg, "msg");
console.log(event, "event")
}
}
}
</script>
内置的事件修饰符
v-
开头的就是指令。在指令中
:
后面的是参数,例如:v-bind:href
,这个href
就是指令参数。在指令中
.
后面就是修饰符,例如:v-on:click.stop
,这个stop
就是修饰符。一个指令中可以同时出现
指令参数
和修饰符
。
内置修饰符:
.stop
.prevent
.capture
.self
.once
.passive
使用:
<!-- 阻止事件冒泡 -->
<button v-on:click.stop="submit">点击</button>
<!-- 阻止默认行为 -->
<form v-on:submit.prevent="submit">
<button>点击</button>
</form>
<!-- 只有修饰符 -->
<form v-on:submit.prevent>
<button>点击</button>
</form>
<!-- 只执行一次 -->
<button @click.once="submit">点击</button>
<!-- 只有在 event.target 是当前元素自身,才会触发 Click 事件。(不接受冒泡和捕获的影响) -->
<div @click.self="submit"></div>
修饰器可以多个:
<!-- 右键触发点击并且禁止默认行为 -->
<button @click.right.prevent="submit">点击</button>
内置按键修饰器
在监听键盘事件时 Vue
实现了一些内置的键盘修饰器。
.enter
.tab
.delete
(捕获“删除”和“退格”键).esc
.space
.up
.down
.left
.right
最常见的就是 @keyup.enter
,监听键盘回车动作。
<input @keyup.enter="submit">
内置鼠标按键修饰器
.left
.right
.middle
系统修饰键
注意:
修饰键
和修饰符
不一样,仅在按下相应修饰键
时才触发鼠标或键盘事件的监听器。
.ctrl
.alt
.shift
.meta
<!-- Ctrl + Click -->
<button v-on:click.ctrl="submit">点击</button>
需要按着 ctrl
键,点击按钮才会触发事件函数。
转载自:https://juejin.cn/post/7236988255072469047