Vue gives us a really easy way to attach event handlers to elements using the v-on directive. With standard HTML elements, we can listen for any native DOM event:
<template>
<div>
<button v-on:click="clickHandler()">Click me!</button>
<form v-on:submit="submitHandler()">
<input type="text" />
</form>
</div>
</template>
Here, we are listening for a native click event on a standard HTML button, and invoking the clickHandler method each time it is clicked. We are also listening for the form's submit event to be fired, and intercepting it with the submitHandler method. You've probably noticed that we already saw some button click examples earlier when looking at some of the other directives in Vue. However, we didn't use the v-on syntax like we did here, and instead we used the @ shorthand notation. Here's the same example again using @click and @submit instead:
<template>
<div>
<button @click="clickHandler()">Click me!</button>
<form @submit="submitHandler()">
<input type="text" />
</form>
</div>
</template>
When writing event handler functions in jQuery, we often find ourselves needing to prevent the default event behavior or stopping the event from propagating up through the DOM. In order to do this, we would normally receive the native DOM event as an argument to the event handler function. This is also possible with Vue, as the native event is passed to the handling function, by default, as the only argument:
<template>
<div>
<button @click="clickHandler">Click me!</button>
</div>
</template>
<script>
export default {
name: 'events',
methods: {
clickHandler (event) {
event.preventDefault()
event.stopPropagation()
}
}
}
</script>
If you've written a lot of jQuery in the past, then this will feel right at home for you. However, it's not the only way to achieve the same result, and Vue gives us a much nicer way through the use of modifiers:
<template>
<div>
<button @click.prevent.stop="clickHandler">Click me!</button>
</div>
</template>
It should be fairly self-explanatory as to what's happening here, but adding the .stop modifier is a shorthand way of calling event.stopPropagation(), and adding the .prevent modifier is a shorthand way of calling event.preventDefault(). There are a number of other modifiers available to us, including but not limited to the following:
- .native: This is used for listening to the native events on the component's root element
- .{keyCode}: This is used for listening to specific keyboard key presses, for example, @keyup.13
- .{keyAlias}: This is also used for listening to specific keyboard key presses, for example, @keyup.enter
- .left, .middle, or .right: This is used for listening to specific mouse button clicks
Notice how we also chained the prevent and stop modifiers in the preceding example. This is perfectly valid in Vue.
Event handling in Vue is incredibly flexible and powerful. We can attach as many v-on directives as we wish, but we can also attach multiple handlers using a single directive by making use of the object syntax:
<template>
<div v-on="{ click: clickHandler, mouseover: hoverHandler }"></div>
</template>
Here, we are listening for both a click and hover event on a single div element. We can add as many properties to this object as we wish, depending on how many events we need to listen for.