Vue事件处理方法
通常，当我们为 Web 开发用户界面时，我们希望自定义 DOM 事件 的行为以提供更丰富的用户体验。 表单提交、按钮点击甚至滚动都有相关的 DOM 事件，这些事件可以被我们的代码监听和处理。 无论我们是想阻止还是改变这些事件的默认行为，我们都需要监听它们并使用这些事件来实现我们想要的行为。
Vue 提供了 v-on 指令，它允许我们通过提供事件名称来侦听和自定义 HTML 元素上的 DOM 事件。 例如，v-on:click 允许我们使用 click DOM 事件。 查看 Mozilla 的 DOM 事件的完整列表 以获得更多可能性。
内联事件处理
使用 v-on 指令，我们可以监听 button 上的 click 事件，并增加一个简单的计数器来跟踪点击量。 通过向 v-on 指令提供 JavaScript 代码，只要触发 click 事件，我们就可以让它在我们的组件 的上下文中执行 。
内联方法组件.vue
<template>
<div>
<h2>InlineMethodComponent</h2>
<button v-on:click="clicked += 1">
Clicked {{ clicked }} times
</button>
</div>
</template>
<script>
export default {
name: 'InlineMethodComponent',
data: function () {
return {
clicked: 0
}
}
}
</script>
组件方法
现在我们能够处理 DOM 事件，我们将要开始实现变得更加复杂的逻辑。 在 v-on 指令中添加一堆复杂的逻辑是非常麻烦和不好的做法。 幸运的是，Vue 允许我们在组件上定义事件处理 methods。 我们需要做的就是将组件方法的名称传递给 v-on 指令：
简单方法组件.vue
<template>
<div>
<h2>SimpleMethodComponent</h2>
<button v-on:click="log">
Click Me
</button>
</div>
</template>
<script>
export default {
name: 'SimpleMethodComponent',
methods: {
log() {
console.log('Button clicked!');
}
}
}
</script>
内联方法调用
有时我们希望能够将信息传递给我们的方法调用，甚至可以使用 DOM 事件 本身。 除了将 method 的名称传递给 v-on 指令，我们还可以将调用传递给 method 本身，传递我们想要的任何信息。 我们还可以使用包含 DOM 事件本身的特殊变量 $event。
内联方法调用组件.vue
<template>
<div>
<h2>InlineMethodCallComponent</h2>
<button v-on:click="log('clicked!', $event)">
Click Me
</button>
</div>
</template>
<script>
export default {
name: 'InlineMethodCallComponent',
methods: {
log(msg, event) {
console.log(event.target.tagName, msg);
}
}
}
</script>
事件方法修饰符
有时我们想修改甚至阻止 DOM 事件 的默认行为。 Vue 为我们提供了一些修饰符，我们可以将这些修饰符链接到我们提供给 v-on 指令的事件名称。
例如，如果我们有一个 form 包含一个类型为 Submit 的 button，用户的点击会刷新页面。 对于单页应用程序 (SPA)，我们希望避免整页重新加载。 为此，我们可以链接 .prevent 修饰符，通过调用 event.preventDefault() 来防止事件重新加载页面。 .stop 修饰符还通过调用通常需要在自定义事件处理程序中调用的 event.stopPropagation() 来完全停止 DOM 事件的默认行为。
MethodCallModifiersComponent.vue
<template>
<div>
<h2>MethodCallModifiersComponent</h2>
<form
v-on:submit.stop.prevent="log('clicked!', $event)">
<button type="Submit">
Click Me
</button>
</form>
</div>
</template>
<script>
export default {
name: 'MethodCallModifiersComponent',
methods: {
log(msg, event) {
console.log(event.target.tagName, msg);
}
}
}
</script>
事件方法键修饰符
有时我们有由键盘按下触发的 DOM 事件。 Vue 为我们提供了为基于键的事件量身定制的事件修饰符。
例如，如果我们有一个 input 元素，我们可以监听 Enter 和 Esc 的按键。 通过自定义此行为，我们可以允许 Enter 调用我们的 log() 方法并允许 Escape 为用户提供一种快速重置输入的方法。
MethodCallKeyModifiersComponent.vue
<template>
<div>
<h2>MethodCallKeyModifiersComponent</h2>
<input
placeholder="Press Enter"
v-on:keyup.esc.stop="clear"
v-on:keyup.enter.stop="log"
/>
</div>
</template>
<script>
export default {
name: 'MethodCallKeyModifiersComponent',
methods: {
log(event) {
console.log(
event.target.tagName,
event.type,
event.key,
event.target.value
);
},
clear(event) {
event.target.value = '';
}
}
}
</script>
包起来
多亏了 v-on 指令，我们能够以无痛的方式拦截和自定义 DOM 事件 的行为。 由于这些事件与单个组件相关联，我们不必担心告诉我们的事件处理程序停止侦听 - 当组件被销毁时它们会被销毁。 没有清理！
