Vue.js – Event Handling using v-on directive

Hey guys 👋🏻,
In this post, let us talk about Event Handling in Vue.js using the v-on directive.

For this post we will understand✔ Event Handling using v-on

✔ One Code Example

Event Handling

For user interactions we can use a special directive called as v-on to attach event listeners that perform some code or invoke methods on our Vue instances. Let us see an example :

Example

Let us define some logic to reverse text on the click of some button. So the steps are :

1. Create a text data property
2. Define a reverseText method to reverse the text.
3. Render it in the template.

Let us see the code for same :

So to attach an event on the button, we use the v-on directive and listen for the click event for the buttons – one is to reverse the text and other two buttons are for incrementing and decrementing some counter reactive property. Let us define the script where we house all our business logic for the component.

So this was all I wanted to cover about Event Handling.

Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.