Vue.js Events
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:
<button v-on:click = “displaynumbers”> Button Name </button>
Example: This example explains how we can use the click event in the Vue.js application.
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Vue.js Events</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>Multiply Numbers: 16 * 8</h1></br>
<button v-on:click = "displaynumbers">Click Here</button>
<h1>Total: {{total}}</h1>
</div>
</body>
</html>
Main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
var vm = new Vue({
el: '#app',
data: {
num1: '16',
num2 : '8',
total : ''
},
methods : {
displaynumbers : function(event) {
console.log(event);
return this.total = this.num1 * this.num2;
}
}
});
Output: After executing the above code, we will get the output, as shown below:
When we click on the “Click Here” button, it shows the output, as shown in the below screenshot.
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
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Vue.js Events</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div v-bind:style = "styleobj" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"> </div> </body> </html>
Main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
var vm = new Vue({
el: '#app',
data: {
styleobj : {
width:"200px",
height:"150px",
backgroundColor:"blue"
}
},
methods : {
changebgcolor : function() {
this.styleobj.backgroundColor = "yellow";
},
originalcolor : function() {
this.styleobj.backgroundColor = "blue";
}
}
});
Output: After executing this code, we will get the output, as shown below:
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.
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:
<button v-on:click.once = “buttonclicked”>Button Name</button>
Example: This example explains how we can use a dot once (.once) event in the Vue.js.
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Vue.js Events</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">Click Here</button><br/>
<h1> Output:{{numx}}</h1>
<br/>
<button v-on:click = "buttonclicked" v-bind:style = "styleobj">Click On</button><br/>
<h1> Output:{{numy}}</h1>
</div>
</body>
</html>
Main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
var vm = new Vue({
el: '#app',
data: {
numx : 4,
numy : 8,
styleobj: {
backgroundColor: 'red',
cursor: 'pointer',
padding: '10px 17px',
verticalAlign: 'center',
}
},
methods : {
buttonclickedonce : function() {
this.numx++;
},
buttonclicked : function() {
this.numy++;
}
}
});
Output: After executing this code, we will get the output, as shown below:
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.
.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:
<form v-on:submit.prevent= “formHandler”> </form>
Example: This example explains how we can use the .prevent event modifier in the Vue.js application.
Index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Vue.js Events</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <a href = "https://www.tutorialandexample.com/" v-on:click.prevent = "clickhere" target = "_blank" v-bind:style = "styleobj">Click Here</a> </div> </body> </html>
Main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
var vm = new Vue({
el: '#app',
data: {
styleobj: {
color: 'blue',
marginLeft: '25px',
fontSize: '40px'
}
},
methods : {
clickhere : function() {
alert("Are you sure to open this site");
}
}
});
Output: After executing this code, we will get the output, as shown below:
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.
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
<div id="app"> <a href = "https://www.tutorialandexample.com/" v-on:click.prevent = "clickhere" target = "_blank" v-bind:style = "styleobj">Click Here</a> </div>
Output: After executing this code, we will get the output, as shown below:
After clicking on the “Ok” button, it opens a new tab, as shown below:
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:
<input type= “text” v-on:keyup.enter= “showinput”>
We can directly use any valid key names exposed through the keyboard.Event.key as modifiers by converting them to Kebab-case.
Syntax:
<input type= “text” v-on:keyup.page-down= “onPageDown>
Example: This example explains how we can use the Key modifiers in the Vue.js Events.
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Vue.js Events</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type = "text" v-on:keyup.enter = "showvalue" v-bind:style = "styleobj" placeholder = "Details"/>
<h3> {{details}}</h3>
</div>
</body>
</html>
Main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
var vm = new Vue({
el: '#app',
data: {
details:'',
styleobj: {
width: "40%",
padding: "14px 20px",
margin: "10px",
boxSizing: "border-box"
}
},
methods : {
showvalue : function(event) {
this.details=event.target.value;
}
}
});
Output: After executing this code, we will get output, as shown below:
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.
