Vue Js Events

Posted on  by admin

# Introduction

VueJS Useful Resources. Selected Reading. v-on is the attribute added to the DOM elements to listen to the events in VueJS.

The following code is used to assign a click event for the DOM element. There is a shorthand for v-on, which means we can also call the event as follows −.

On the click of the button, it will call the method ‘displaynumbers’, which takes in the event and we have consoled the same in the browser as shown above.

Custom Events

We will now check one more event mouseover mouseout. In the above example, we have created a div with width and height as 100px.

It has been given a background color red.

On mouseover, we are changing the color to green, and on mouseout we are changing the color back to red.

Hence, during mouseover, a method is called changebgcolor and once we move the mouse out of the div, a method is called originalcolor. This is done as follows −.

# Streaming your event

Two events - mouseover and mouseout - is assigned to the div as shown above. We have created a styleobj variable and given the required style to be assigned to the div. The same variable is binded to the div using v-bind:style = ”styleobj”. In changebgcolor, we are changing the color to green using the following code.

Using the stylobj variable, we are changing the color to green. Similarly, the following code is used to change it back to the original color. This is what we see in the browser.

When we mouseover, the color will change to green as shown in the following screenshot.

# Organizers' Handbook

Vue has event modifiers available on v-on attribute. Following are the modifiers available −. Allows the event to execute only once. We need to add dot operator while calling the modifiers as shown in the syntax above.

Let us use it in an example and understand the working of the once modifier. In the above example, we have created two butttons.

The button with Click Once label has added the once modifier and the other button is without any modifier.

  • This is the way the buttons are defined.
  • The first button calls the method “buttonclickedonce” and the second button calls the method “buttonclicked”.
  • There are two variables defined in the clicknum and clicknum1.
  • Both are incremented when the button is clicked.
  • Both the variables are initialized to 0 and the display is seen in the output above.
  • On the click of the first button, the variable clicknum increments by 1.
  • On the second click, the number is not incremented as the modifier prevents it from executing or performing any action item assigned on the click of the button.
  • On the click of the second button, the same action is carried out, i.e.
  • the variable is incremented.

On every click, the value is incremented and displayed.

Following is the output we get in the browser.

# Getting Started

If we click the clickme link, it will send an alert as “Anchor tag is clicked” and it will open the link https://www.google.com in a new tab as shown in the following screenshots. Now this works as a normal way, i.e. the link opens up as we want. In case we don’t want the link to open up, we need to add a modifier ‘prevent’ to the event as shown in the following code.

  1. Once added, if we click on the button, it will send an alert message and will not open the link anymore.

  2. The prevent modifier prevents the link from opening and only executes the method assigned to the tag. On the click of the link, it will display the alert message and does not open the url anymore.

  3. VueJS offers key modifiers based on which we can control the event handling. Consider we have a textbox and we want the method to be called only when we press Enter.

We can do so by adding key modifiers to the events as follows.
The key that we want to apply to our event is V-on.eventname.keyname (as shown above).