1. vuejs-event-handling

Vue.js Event Handling

Vue.js is a progressive framework for building user interfaces. One of its important features is event handling. In Vue.js, we can handle DOM events or custom events with the v-on: directive. Event handling in Vue.js can be done using methods or inline statements.


The syntax for handling events with v-on: directive is as follows:

    <button v-on:click="method1">Click Me</button>
    <button v-on:mouseover="method2">Hover Me</button>

The above code demonstrates the use of v-on: directive for handling click and mouse-over events.


    <button v-on:click="sayHello">Click Me</button>

export default {
  methods: {
    sayHello() {

In this example, we have defined a method called sayHello() and attached it to the click event of a button.


When the "Click Me" button is clicked, an alert with the message "Hello!" will be displayed.


In Vue.js, event handling is done with the v-on: directive. The v-on: directive is used to give a method or statement to handle a particular event. The syntax of the directive is v-on:event, where "event" represents a DOM event or a custom event.

Vue.js provides two ways to handle events: by using methods or inline statements. In the method approach, a method is defined in the Vue component to handle the event and then attached to the respective event using v-on: directive. Whereas in the inline statement approach, the event handling logic is directly written in the template using the v-on: directive.


Event handling in Vue.js is a fundamental feature that helps to add functionality to the user interface. Using event handling, we can create interactive and responsive applications. Some common use cases of event handling include:

  • Updating a component's state when an event occurs
  • Responding to user input, such as mouse clicks or keyboard input
  • Triggering animations, AJAX requests, or other side effects based on the user's input

Important Points

  • Vue.js provides an easy way to handle events using v-on: directive.
  • In Vue.js, event handling can be done using methods or inline statements.
  • The v-on: directive is used to bind an event listener to an element.


Vue.js's event handling feature is a fundamental part of building user interfaces. The v-on: directive is used to handle both DOM and custom events. By using methods or inline statements, we can define an event handler that will be executed when a particular event occurs. With event handling, we can create interactive and responsive applications that provide a superior user experience.

Published on: