事件处理

监听事件

v-on或简写@用于监听DOM事件,并在触发时执行一些JavaScript代码 :

cv-on:click="handler" / @click="handler"

handler可以是一个方法名,也可以是一个表达式,如cv-on:click="count++"。

内联事件处理器

内联事件处理器可以直接在模板中编写,如:

<button @click="count++">Add 1</button>

方法事件处理器

一些稍微复杂的逻辑,使用个内联代码就不够灵活了,这时可以使用方法事件处理器 :

<button @click="increment">Add 1</button>

const count = ref(0)
function increment() {
  count.value++
}

方法事件处理器会自动接收原生DOM事件并触发执行,需要处理时可以在方法中添加参数:

<button @click="increment(5)">Add 5</button>

function increment(value, event) {
  count.value += value
  // `event` 是 DOM 原生事件
  if (event) {
    alert(event.target.tagName)
  }
}

方法与内联事件判断

模板编译器会通过检查v-on的值是否是合法的JavaScript表达式来决定是使用方法还是内联事件处理器。 举例来说,foo、foo.bar和foo['bar']会被视为方法事件处理器,而foo()、count++会被视为内联事件处理器。

在内联处理器中调用方法

除了直接绑定方法名,还可以再内联事件处理器中调用方法

function say(message) {
  alert(message)
}

<button @click="say('hello')">Say hello</button> <button @click="say('bye')">Say bye</button>

在内联事件处理器中访问事件参数

需要在内联事件处理器中访问DOM原生事件时,可以使用$event变量来访问它:

<button @click="warn('Form cannot be submitted yet.', $event)">Submit</button>

function warn(message, event) {
  alert(message)
  // 阻止默认事件
  event.preventDefault()
}

事件修饰符

处理事件时,调用event.preventDefault()或event.stopPropagation()是很常见的需求,Vue提供了一些事件修饰符来简化这些操作。 修饰符可以连缀在事件名之后,如@click.prevent.修饰符可以串联使用,如@click.prevent.stop. Vue提供的时间修饰符包括:

• .stop - 调用event.stopPropagation()
• .prevent - 调用event.preventDefault()
• .self - 只在事件目标是当前元素时触发
• .capture - 添加事件监听器时使用事件捕获模式
• .once - 只触发一次事件监听器
• .passive - 添加事件监听器时使用被动模式,允许浏览器优化滚动性能

<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>

<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>

<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>

<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>

TIP 使用修饰符时要注意顺序,因为代码会以添加的修饰符的顺序执行,比如 @click.prevent.self 会阻止所有的点击,而@click.self.prevent 只会阻止对自身元素的点击。

按键修饰符

通事件修饰符类似,Vue也提供了按键修饰符,用于监听键盘事件,如@keyup.enter、@keyup.space等。 按键修饰符可以连缀在事件名之后,如@keyup.enter。 Vue提供了一些常用的按键修饰符,包括:

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

系统按键修饰符

系统按键修饰符用于监听系统按键,如Ctrl、Alt、Shift等。 系统按键修饰符可以连缀在事件名之后,如@keyup.ctrl.enter。 Vue提供了一些常用的系统按键修饰符,包括:

• .ctrl
• .alt
• .shift
• .meta

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

.exact修饰符

.exact修饰符用于精确匹配按键组合,只有当指定的按键组合被按下时才会触发事件处理器。

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

<!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 仅当没有按下任何系统按键时触发 -->
<button @click.exact="onClick">A</button>

鼠标修饰符

鼠标修饰符用于监听鼠标事件,如@click.left、@click.right等。 .left，.right 和 .middle 这些修饰符名称是基于常见的右手用鼠标布局设定的，但实际上它们分别指代设备事件触发器的“主”、”次“，“辅助”，而非实际的物理按键。