事件处理 在 Vue School 上观看免费视频课程在 Vue School 上观看免费视频课程监听事件 我们可以使用 v-on 指令，我们通常将其简写为 @ 符号，来监听 DOM 事件并在它们被触发时运行一些 JavaScript。用法为 v-on:click="handler" 或使用快捷方式，@click="handler"。
处理器值可以是以下之一
内联处理器：在事件被触发时执行的内联 JavaScript（类似于原生的 onclick 属性）。
方法处理器：指向组件上定义的方法的属性名或路径。
内联处理器 内联处理器通常用于简单情况，例如
jsconst count = ref(0)jsdata() {
return {
count: 0
}
}template
Count is: {{ count }}
在沙盒中尝试在沙盒中尝试
方法处理器 尽管许多事件处理器的逻辑会更复杂，可能无法使用内联处理器实现。这就是为什么 v-on 还可以接受您要调用的组件方法名称或路径。
例如
jsconst name = ref('Vue.js')
function greet(event) {
alert(`Hello ${name.value}!`)
// `event` is the native DOM event
if (event) {
alert(event.target.tagName)
}
}jsdata() {
return {
name: 'Vue.js'
}
},
methods: {
greet(event) {
// `this` inside methods points to the current active instance
alert(`Hello ${this.name}!`)
// `event` is the native DOM event
if (event) {
alert(event.target.tagName)
}
}
}template
在沙盒中尝试
在沙盒中尝试
方法处理器自动接收触发它的原生 DOM 事件对象 - 在上面的示例中，我们能够通过 event.target 访问触发事件的元素。
另请参阅：[事件处理器的类型化](/guide/typescript/composition-api#typing-event-handlers)
另请参阅：[事件处理器的类型化](/guide/typescript/options-api#typing-event-handlers)
方法与内联检测 模板编译器通过检查 v-on 值字符串是否是有效的 JavaScript 标识符或属性访问路径来检测方法处理器。例如，foo、foo.bar 和 foo['bar'] 被视为方法处理器，而 foo() 和 count++ 被视为内联处理器。
在内联处理器中调用方法 除了直接绑定到方法名之外，我们还可以在内联处理器中调用方法。这允许我们传递方法的自定义参数而不是原生事件
jsfunction say(message) {
alert(message)
}jsmethods: {
say(message) {
alert(message)
}
}template
在沙盒中尝试
在沙盒中尝试
内联处理程序中访问事件参数 有时我们还需要在内联处理程序中访问原始DOM事件。您可以使用特殊变量 $event 将其传递到方法中，或者使用内联箭头函数。
template
Submit
Submit
jsfunction warn(message, event) {
// now we have access to the native event
if (event) {
event.preventDefault()
}
alert(message)
}jsmethods: {
warn(message, event) {
// now we have access to the native event
if (event) {
event.preventDefault()
}
alert(message)
}
}事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是一个非常常见的需求。尽管我们可以在方法中轻松完成此操作，但最好是方法只关注数据逻辑，而不是处理DOM事件细节。
为了解决这个问题，Vue为v-on提供了事件修饰符。回想一下，修饰符是以点表示的指令后缀。
.stop.prevent.self.capture.once.passivetemplate
使用修饰符时顺序很重要，因为相关代码是按相同顺序生成的。因此，使用 @click.prevent.self 将阻止元素及其子元素的 click 的默认行为，而 @click.self.prevent 只会阻止元素本身的点击默认行为。
.capture、.once 和 .passive 修饰符与原生 addEventListener 方法的选项相对应。
template
提示
不要同时使用 .passive 和 .prevent，因为 .passive 已经向浏览器表明您 不 想阻止事件的默认行为，如果您这样做，浏览器可能会显示警告。
键修饰符 当监听键盘事件时，我们经常需要检查特定键。Vue允许在监听键盘事件时为 v-on 或 @ 添加键修饰符。
template
您可以直接使用通过 KeyboardEvent.key 提供的任何有效键名作为修饰符，只需将它们转换为短横线命名法即可。
template在上面的示例中，只有当 $event.key 等于 'PageDown' 时，处理程序才会被调用。
键别名 Vue为最常用的键提供了别名
.enter.tab.delete（捕获“Delete”和“Backspace”键）.esc.space.up.down.left.right系统修饰键 您可以使用以下修饰符来触发仅在按下相应的修饰键时才触发的鼠标或键盘事件监听器
.ctrl.alt.shift.meta注意
在Macintosh键盘上，meta键是命令键（⌘）。在Windows键盘上，meta键是Windows键（⊞）。在Sun Microsystems键盘上，meta键标记为一个实心菱形（◆）。在某些键盘上，特别是MIT和Lisp机器键盘及其后继产品，例如Knight键盘、space-cadet键盘，meta键被标记为“META”。在Symbolics键盘上，meta键被标记为“META”或“Meta”。
例如
template
请注意，修饰键与普通键不同，并且在使用keyup事件时，它们必须在事件发生时按下。换句话说，keyup.ctrl只有在您在按下ctrl键的同时释放一个键时才会触发。如果单独释放ctrl键，它不会触发。
.exact 修饰符 .exact 修饰符允许控制触发事件所需的精确系统修饰符组合。
template
鼠标按钮修饰符 .left.right.middle这些修饰符将处理程序限制为由特定鼠标按钮触发的事件。