跳到主要内容

认识

2023年04月22日
柏拉文
越努力，越幸运

一、认识​

v-on, 缩写为 @。 绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

二、修饰符​

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

2.1 事件修饰符​

事件修饰符 如下:

  • .stop: 调用 event.stopPropagation(), 阻止单击事件继续传播

  • .prevent: 调用 event.preventDefault(), 阻止默认事件

  • .capture: 添加事件侦听器时使用 capture 模式, 使用事件捕获模式

  • .self: 只当事件是从侦听器绑定的元素本身触发时才触发回调

  • .once: 只触发一次回调

  • .passive: 以 { passive: true } 模式添加侦听器, 尤其能够提升移动端的性能。

.stop事件

<a v-on:click.stop="doThis"></a>

<!-- 缩写 -->
<a @click.stop="doThis"></a>

.prevent事件

<form v-on:click.prevent="onSubmit"></form>

<!-- 缩写 -->
<form @click.prevent="onSubmit"></form>

.capture

<div v-on:click.capture="doThis">...</div>

<!-- 缩写 -->
<div @click.capture="doThis">...</div>

串联事件修饰符

<a v-on:click.stop.prevent="doThat"></a>

<!-- 缩写 -->
<a @click.stop.prevent="doThat"></a>

2.2 按键修饰符​

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

  • keyup.enter: 只有在 key 是 Enter 时调用

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

  • keyup.page-down: 只有在 key 是 page-down 时调用

    <input v-on:keyup.page-down="onPageDown">

  • keyup.tab

  • keyup.delete

  • keyup.esc

  • keyup.space

  • keyup.up

  • keyup.down

  • keyup.left

  • keyup.right

  • 自定义按键修饰符别名: 通过全局 config.keyCodes 对象自定义按键修饰符别名

    // 可以使用 `v-on:keyup.f1`
    Vue.config.keyCodes.f1 = 112

2.3 系统修饰符​

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

  • .ctrl

    <div v-on:click.ctrl="doSomething">Do something</div>

  • .alt

    <input v-on:keyup.alt.67="clear">

  • .shift

  • .meta

2.4 鼠标按钮修饰符​

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

  • .left

  • .right

  • .middle