Vue.js provides a powerful and straightforward way to handle events in your web applications through the v-on directive. This directive allows you to respond to various user actions, such as clicks, inputs, or mouse movements. In this article, we'll explore the v-on directive and how it can be applied in different scenarios.
Example 1. Toggle visibility with v-on: click
Let's start with a simple example where we toggle the visibility of a lightbulb image when a button is clicked. The v-on:click directive is used to listen for the click event and toggle the light data property.
<div id="app">
<div id="lightOn">
<div v-show="lightOn"></div>
<img src="img_lightBulb.svg">
</div>
<button v-on:click="lightOn = !lightOn">Switch light</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
lightOn: false
}
}
})
app.mount('#app')
</script>
In this example, clicking the "Switch light" button toggles the visibility of the lightbulb.
Example 2. Counting keystrokes with v-on: input
The V-On: Input directive allows us to respond to input events, such as keystrokes in a text field. In this example, we count the number of keystrokes in a text input field.
<div id="app">
<input v-on:input="inpCount++">
<p>{{ 'Input events occurred: ' + inpCount }}</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
inpCount: 0
}
}
})
app.mount('#app')
</script>
As you type in the input field, the count of input events increases.
Example 3. Dynamic background color with v-on: mouse move
The v-on: mouse move directive allows us to respond to mouse movement over an element. In this example, the background color of a <div> changes dynamically based on the mouse movement.
<div id="app">
<p>Move the mouse pointer over the box below</p>
<div v-on:mousemove="colorVal=Math.floor(Math.random()*360)"
v-bind:style="{backgroundColor:'hsl('+colorVal+',80%,80%)'}">
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
colorVal: 50
}
}
})
app.mount('#app')
</script>
As you move the mouse over the box, the background color changes dynamically.
Example 4. Event handling in a v-for Loop
Vue allows you to use the v-on directive inside a v-for loop. In this example, we create a list of foods and handle the click event on each list item to change the source of an image.
<div id="app">
<img v-bind:src="imgUrl">
<ol>
<li v-for="food in manyFoods" v-on:click="imgUrl=food.url">
{{ food.name }}
</li>
</ol>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
imgUrl: 'img_salad.svg',
manyFoods: [
{name: 'Burrito', url: 'img_burrito.svg'},
{name: 'Salad', url: 'img_salad.svg'},
{name: 'Cake', url: 'img_cake.svg'},
{name: 'Soup', url: 'img_soup.svg'}
]
}
}
})
app.mount('#app')
</script>
Vue.js handles different events, from simple button clicks to dynamic responses based on mouse movements and user inputs.
By leveraging v-on along with other Vue.js features like methods and modifiers, developers can enhance the responsiveness of their applications and provide users with an engaging experience. As you delve deeper into Vue.js, exploring more advanced techniques and combining them with other directives, such as v-if and v-for, opens up endless possibilities for creating feature-rich and user-friendly interfaces. Incorporating these event-handling concepts into your Vue.js projects not only streamlines development but also contributes to building modern, reactive, and efficient web applications.
Sharing 3 exercises that are designed to reinforce your understanding. See the attachment.