Vue使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些JS代码。
比如 v-on:click="methodName" 或使用缩写方式 @click="methodName"
<div id="basic-event"> <button @click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div>
Vue.createApp({ data() { return { counter: 0 } } }).mount('#basic-event')
不推荐直接把 JavaScript 代码写在 v-on 指令中，通常我们是给它提供一个可执行方法名称。
例如：
<div id="event-with-method"> <!-- `greet` 是在下面定义的方法名 --> <button @click="greet">Greet</button> </div>
Vue.createApp({ data() { return { name: 'Vue.js' } }, methods: { greet(event) { // `methods` 内部的 `this` 指向当前活动实例 alert('Hello ' + this.name + '!') // `event` 是原生 DOM event if (event) { alert(event.target.tagName) } } } }).mount('#event-with-method')
处理事件的方法会自动获得event事件本身作为参数。
除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法（实际上就是给方法提供参数）：
<div id="inline-handler"> <button @click="say('hi')">Say hi</button> <button @click="say('what')">Say what</button> </div>
Vue.createApp({ methods: { say(message) { alert(message) } } }).mount('#inline-handler')
有时也需要在其中访问原始的 DOM 事件，可以用特殊变量 $event 把它传入方法：
<button @click="warn('Form cannot be submitted yet.', $event)"> Submit </button>
// ... methods: { warn(message, event) { // 现在可以访问到原生事件 if (event) { event.preventDefault() } alert(message) } }
事件处理程序中可以有多个方法，这些方法由逗号运算符分隔：
<!-- 这两个 one() 和 two() 将执行按钮点击事件 --> <button @click="one($event), two($event)"> Submit </button>
// ... methods: { one(event) { // 第一个事件处理器逻辑... }, two(event) { // 第二个事件处理器逻辑... } }
在事件处理程序中调用
event.preventDefault()阻止事件的默认行为，或event.stopPropagation()阻止事件向上传播，是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个需求，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
.stop.prevent.capture.self.once.passive<!-- 阻止单击事件继续传播 --> <a @click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form @submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a @click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form @submit.prevent></form> <!-- 点击事件将只会触发一次 --> <a @click.once="doThis"></a> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --> <div @click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div @click.self="doThat">...</div>
使用修饰符时，顺序很重要， v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成 --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <div @scroll.passive="onScroll">...</div>
这个 .passive 修饰符尤其能够提升移动端的性能。
不要把
.passive和.prevent一起使用，因为.prevent将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive会告诉浏览器你不想阻止事件的默认行为。
前面都是针对鼠标点击事件的介绍。除此之外，我们往往还需要监听键盘事件。
Vue 也设计了为 v-on 或者 @ 在监听键盘事件时的按键修饰符：
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input @keyup.enter="submit" />
你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 类型名来作为修饰符，比如：
<input @keyup.page-down="onPageDown" />
在上述示例中，事件方法只会在 $event.key 等于 'PageDown' 时被调用。
kebab-case 类型名是普适的，但Vue 为最常用的键提供了别名：
.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right可以用下面的修饰符来实现仅在按下相应控制键时才触发鼠标或键盘事件的监听器。
.ctrl.alt.shift.meta在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。
例如：
<!-- Alt + Enter --> <input @keyup.alt.enter="clear" /> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div>
请注意功能修饰键与常规按键不同，在和
keyup事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住ctrl的情况下释放其它按键，才能触发keyup.ctrl。而单单释放ctrl不会触发事件。
.exact 修饰符.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 --> <button @click.ctrl="onClick">A</button> <!-- 有且只有 Ctrl 被按下的时候才触发 --> <button @click.ctrl.exact="onCtrlClick">A</button> <!-- 没有任何系统修饰符被按下的时候才触发 --> <button @click.exact="onClick">A</button>
.left.right.middle这些修饰符会限制事件方法仅响应特定的鼠标按钮。