by Sai gowtham

How to handle the events in Vue

In this tutorial, we are going to learn about event handling in Vue.js with the help of examples.

Vue offers us a special directive called v:on which helps us to register and listen to the dom events, so that whenever an event is triggered the method passed to that event is invoked.

The syntax of the v:on directive.

<!-- v:on:eventname="methodname" -->

<button v:on:click="handleClick">Click</button>

In the above code, we are listening to the click event on the button so that whenever a user is clicked on the button, it invoked the handleClick method.

Counter example

<template>
   <div>
      <h1>{{num}}</h1>
      <button  v-on:click="increment">Increment</button>   </div>
</template>

<script>
   export default{
       data:function(){
           return{
               num:0
           }
       },
       methods:{
           increment:function(){
               this.num=this.num+1
           }
       }
   }
</script>

Passing arguments to the Event handler

Sometimes, Event handler methods can also accept arguments let’s see an example.

<template>
   <div>
       <h1>{{num}}</h1>
       <!-- argument 10 is passed to the `increment method -->
      <button  v-on:click="increment(10)">Increment By 10</button>   </div>
</template>

<script>
   export default{
       data:function(){
           return{
               num:0
           }
       },
       methods:{
           //parameter `value`
           increment:function(value){
               this.num =this.num+value
           }
       }
   }
</script>

Here we created an increment method with one parameter value so that we are passing 10 as an argument to the increment() method.

Acessing default event object

To access the default event object in methods, we need to use a special $event variable offered by the vue.

<template>
   <!-- we are passing a $event variable -->
  <input placeholder="name" v-on:onchange="handleChange($event)" /></template>

<script>
 export default{
     methods:{
         handleChange:function($event){
             console.log($event.target.value)
         }
     }
 }
</script>

Accessing both

we can also access both the event object and arguments inside the event handler method like this.

<template>
   <!-- we are passing argument plus $event variable  -->
  <button v-on:click="hitMe('You hitted me',$event)">    Hit me Hard  </button></template>

<script>
 export default{
     methods:{
         handleChange:function(message,$event){
             $event.preventDefault()
             console.log(message)
         }
     }
 }
</script>

Shorthand syntax

There is also a shorthand syntax for listening to the dom events.

 <!--short hand syntax @eventname="method" -->
<button @click="handleClick"></button>

  <!-- long hand syntax -->
<button v-on:click="handleClick"></button>

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2021 (Beginner + Advanced)
JavaScript - The Complete Guide 2021 (Beginner + Advanced)
64,026 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
152,857 students enrolled
48.5 hours of video content
View Course