Vue Events
The v-on directive in Vue is used for event handling, allowing us to trigger events such as button clicks.
HTML elements can be configured to execute specific code in response to specific events. This is known as event handling.
Vue events are user-friendly and will enhance the responsiveness of our page.
Code that is configured to execute on event occurrences is known as a vue method.
You can give more specific instructions on how to respond to an event by using v-on modifiers.
Get started with events
To demonstrate how to click a button to count the number of moose in a forest, let’s start with an example.
We require:
- A button
- v-on on the <button> tag to listen to the ‘click’ event
- Code to make there more moose
- A Vue instance property (variable) that stores the quantity of moose
- Double curly brackets {{}} to indicate the rise in moose population
Example
To add another moose to the forest’s count, click the button. Clicking the button causes the count property to rise.
<div id="app">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Vue Events -" title="Vue Events 1" data-lazy-src="img_moose.jpg"><noscript><img decoding="async" src="img_moose.jpg" alt="Vue Events -" title="Vue Events 1"></noscript>
<p>{{ "Moose count: " + count }}</p>
<button v-on:click="count++">Count moose</button>
</div>
<script data-minify="1" src="https://codingask.com/wp-content/cache/min/1/vue@3/dist/vue.global.js?ver=1730183021" defer></script>
<script>
const app = Vue.createApp({
data() {
return {
count: 0
}
}
})
app.mount('#app')
</script>
Note: One advantage of using Vue is that it automatically updates the number of moose in the <p> tag. If we were using ordinary JavaScript, we would have to write another line of code to update the number the user sees.
Events
‘click’,’mouseover’,’mouseout’, ‘keydown’, and ‘input’ are a few of the frequently used events that can be programmed to run code.
See our HTML DOM Events page for an exhaustive list of events that you can use.
'v-on'
We may design pages that react to user actions thanks to the v-on directive.
The v-on functions by instructing the browser on which event to watch for and what action to take in response to it.
Methods
We can place the code in a Vue method and refer to this method from the HTML property, like thus, if we want to execute more complicated code when an event happens.
<p v-on:click="changeColor">Click me</p>
Event Modifiers
We may use something called event modifiers in addition to v-on and Vue methods to change an event so that it, for instance, only occurs once when a page loads or modify an event like ‘submit’ to stop a form from being submitted.
Learn More
As we can see, there are three methods for using events in Vue that we need to understand:
- The instruction Vue v-on
- Vue techniques
- Modifiers for Vue v-on
