Vue.js Events

Facebooktwitterredditpinterestlinkedinmailby feather

Vue.js Events

We can use the v-on directive to listen to DOM Events in Vue.js when we triggered them. Here, we are going to discuss the events which are used in the Vue.js.

Click Event

The click event is used to show the output whatever we have done. We can use the following syntax to apply a click event for the DOM element.

Syntax:

Example: This example explains how we can use the click event in the Vue.js application.

Index.html

Main.js

Output: After executing the above code, we will get the output, as shown below:

Vue.js Events

When we click on the “Click Here” button, it shows the output, as shown in the below screenshot.

Vue.js Events

Here, we can also apply the mouseover and mouseout. The mouseover event calls the change method, whereas the mouseout event calls the original method.

Now, let’s take an example to understand how these methods work in the Vue.js application.

Index.html

Main.js

Output: After executing this code, we will get the output, as shown below:

Vue.js Events

In the above example, we have seen that the background color of the screen is blue. When we move our cursor on the blue output, the mouseover event instantly calls the changecolor method. This method immediately changes the background color. When we remove our cursor from the output, the mouseout event calls the originalcolor that again changes the color in its original color.

Vue.js Events

Event Modifiers

The Vue.js framework has many event modifiers, which can be used with the v-on attribute. These event modifiers are as follows:

.once

This event modifier allows the event to execute only a single time. We need to apply a dot operator when we call the modifiers in the application.

Syntax:

Example: This example explains how we can use a dot once (.once) event in the Vue.js.

Index.html

Main.js

Output: After executing this code, we will get the output, as shown below:

Vue.js Events

In the above example, there are two click buttons. First, when we click on the “Click Here” button, it executes the event only once. On the other hand, when we click on the “Click On” button, it executes the event to infinite time.

Vue.js Events

.prevent

A common pattern in JavaScript applications is to manage a form submit manually instead of using the native features. For doing this, it is required to use the native preventDefault method of the submit event before executing the form handling code; otherwise, the page will be redirected until it is completed. We can use the following syntax for understanding the .prevent event modifier.

Synatx:

Example: This example explains how we can use the .prevent event modifier in the Vue.js application.

Index.html

Main.js

Output: After executing this code, we will get the output, as shown below:

Vue.js Events

In the above example, we have seen that there is a “Click Here” link. When we click on that link, it will show an alert message, but the link will not open. The .prevent modifier prevents the link from opening and executes the method assigned to the tag.

Vue.js Events

On the other hand, if we do not use the .prevent modifier in the html file, the link will open after showing the alert message, as shown below.

Index.html

Output: After executing this code, we will get the output, as shown below:

Vue.js Events

After clicking on the “Ok” button, it opens a new tab, as shown below:

Vue.js Events

Key Modifiers

Vue.js allows us to add the key modifiers with the v-on attribute for listening to the key events. When listening to the keyboard events, we need to check for specific keys.

Syntax:

We can directly use any valid key names exposed through the keyboard.Event.key as modifiers by converting them to Kebab-case.

Syntax:

Example: This example explains how we can use the Key modifiers in the Vue.js Events.

Index.html

Main.js

Output: After executing this code, we will get output, as shown below:

Vue.js Events

In the above screenshot, we can see that there is a textbox. When we enter some content and press an enter key, it immediately shows the output on the screen.

Vue.js Events
Facebooktwitterredditpinterestlinkedinmailby feather