下面vue.js教程给大家介绍一下使用vue.js处理事件的方法，希望对大家有一定的帮助。
当您使用Vue构建动态网站时，您很可能希望它能够响应事件。
例如，如果用户单击按钮，提交表单，甚至只是移动鼠标，您可能希望您的Vue网站以某种方式做出响应。
使用Vue处理事件
我们可以通过将v-on指令添加到相关DOM元素来拦截事件。假设我们要处理对按钮元素的点击-我们可以在Vue模板中添加以下内容：
立即学习“前端免费学习笔记（深入）”；
<button v-on:click="clickHandler"></button>
请注意，我们在指令中添加了一个参数，该v-on参数将是我们要处理的事件的名称（在本例中为click）。
然后，我们将表达式绑定到指令，该指令通常是您要用于处理事件的方法。在这种情况下，我们称之为clickHandler。
提示：该v-on指令具有一个方便的速记形式@，可以代替以下形式使用v-on:：<button @click="clickHandler"></button>。
可以处理的事件类型
除了click之外，还可以处理哪些DOM事件？
Vue可以处理任何类型的web或移动本机事件（以及我们稍后将讨论的自定义事件），包括：
submit
keyup
drag
scroll
最常见的DOM事件的列表
事件处理方法
如果将方法绑定到事件处理指令，我们现在可以运行一些自定义代码。
在本示例中，让我们保持简单，只将一条消息记录到控制台，但是您还可以做一些更有趣的事情，例如显示/隐藏另一个元素，增加计数器等。
<div id="app"> <button v-on:click="clickHanlder"></button> </div>
new Vue({
el: "#app",
methods: {
clickHandler () {
console.log("You clicked the button!");
}
}
})事件对象
事件对象将传递给事件处理程序，从而为如何响应事件打开了更多的可能性。这个对象包含很多有用的属性和方法，包括对事件起源的元素（event.target）、事件发生的时间（event.timeStamp）等的引用。
clickHandler (event) {
console.log(`The button was clicked at ${event.timeStamp}.`);
}请注意，此对象是由本机Web API提供的，而不是由Vue提供的，因此它将与您在纯JavaScript中找到的对象相同。为了方便起见，以下是事件接口参考。
事件修饰符
JavaScript应用程序中的一种常见模式是手动处理表单提交，而不是使用本机功能。为此，您需要preventDefault在运行表单处理代码之前使用Submit事件的本机方法，否则页面将在有机会完成之前被重定向。
formHandler (event) {
event.preventDefault();
// form handling logic
}Vue提供了一个事件修饰符来直接从模板执行此操作，而不是在处理程序中手动执行此操作。请注意，修饰符是'.'在指令之后添加的：
<form @submit.prevent="formHandler"></form>
Vue提供了几种不同的事件修饰符，这些修饰符在常见事件处理场景中非常有用：
.stop
.prevent
.capture
.self
.once
.passive
自定义事件
到目前为止，我们一直在讨论如何处理本机事件。但是Vue是一个基于组件的框架，所以我们可以让组件发出它自己的事件吗？
是的，这可能非常有用。 假设希望子组件将数据发送到父组件。 我们无法在此处使用道具，因为道具数据仅在父级到子级之间传递，而在其他方面则不行。
ParentComponent | | (data travels down via props, never up) v ChildComponent
解决方案是让子组件发出事件，并让父组件监听该事件。
为此，请this.$emit("my-event")在希望事件发出时从子组件中调用。例如，假设我们有一个组件DialogComponent，它需要通知其父MainPage它已关闭：
export default {
methods: {
onClose() {
this.$emit("dialog-closed");
}
}
};然后，父组件可以与本地事件完全一样地处理自定义事件。
<div> <dialog-component @dialog-closed="eventHandler" /> </div>
您还可以在自定义事件中发送数据，该数据可以通过处理方法接收：
onClose() {
this.$emit("dialog-closed", { time: Date.now() });
}eventHandler (event, { time }) {
console.log(`Dialog was closed at ${time}`);
}提示：使用kebab-case名称进行自定义事件！HTML不区分大小写，因此，例如myEvent，驼峰事件名称将令人迷惑地myevent位于模板中。因此，最好使用kebab-case my-event，以免造成混淆。
活动巴士
如上所述，子组件可以将事件发送到父组件。但是，如果您希望组件将事件发送到层次结构中的任何其他组件怎么办？例如，同级，祖父母等。
为此，我们可以使用一种称为事件总线的模式。在这里，我们创建了一个单独的Vue实例，以将事件传输到导入该事件的任何组件。
首先，在新的模块文件中创建并导出Vue实例：
import Vue from "vue"; export default new Vue();
接下来，将总线导入到您要发出事件的组件中。您可以使用$emit总线Vue实例的方法。
import eventBus from "./eventBus";
export default {
...
methods: {
myMethod () {
eventBus.$emit("my-event")
}
}
}最后，将总线导入到您想听事件的组件中。然后，您应该在代码中的某个位置设置侦听器。我建议您使用生命周期挂钩，就像created您可以在此处访问组件实例一样。
这是通过$on总线方法完成的，该方法带有两个参数-您要监听的事件和一个回调。
import eventBus from "./eventBus";
export default {
...
created () {
eventBus.$on("my-event", () => {
console.log("my-event called on global event bus");
});
}
}相关推荐：2020年前端vue面试题大汇总（附答案）vue教程推荐：2020最新的5个vue.js视频教程精选
更多编程相关知识，请访问：编程入门！！
