下面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
自訂事件
到目前為止，我們一直在討論如何處理本機事件。但是Vue是一個基於元件的框架，所以我們可以讓元件發出它自己的事件嗎？ 是的，這可能非常有用。假設希望子元件將資料傳送到父元件。我們無法在此處使用道具，因為道具資料僅在父級到子級之間傳遞，而在其他方面則不行。ParentComponent | | (data travels down via props, never up) v ChildComponent
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}`);
}活动巴士
如上所述，子组件可以将事件发送到父组件。但是，如果您希望组件将事件发送到层次结构中的任何其他组件怎么办？例如，同级，祖父母等。
为此，我们可以使用一种称为事件总线的模式。在这里，我们创建了一个单独的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");
});
}
}相关推荐：
更多编程相关知识，请访问：编程入门！！
以上是詳解vue.js中如何處理事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
