We continue learning Vue JS, and after an introduction, a first example, and a little more progress, it’s time to experiment with events in VueJS. In today’s example, we will learn how to fill in the methods supported by the Vue object, how the “data” and “methods” are related through “this“, and how to work with events.
Exacution of events in Vue
The first thing you must know is that you need to include v-on:event=”event_function” in order to get ready for an event, but you can use a shorthand by writting @event=”event_function”.
<!DOCTYPE html><html><title>ManejandoDatos.es - VueJS Eventos</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="estilo.css" rel="stylesheet" /><body><div id="main"><h3>{{valor}}</h3><button v-on:click="simple">Cambiar a 10</button></div></body></html><script>let app2 = new Vue({el: '#main',data: {valor: 100},methods: {simple() {this.valor = 10;}}})</script>And the result is:
when clickking on the button, it happends the magic:
The creation of events is therefore quite simple, although the code to be executed in the event is defined in “methods“. In this case, the click event. It is necessary to observe that the Javascript itself generates with the event an object that is sent to the function, and can serve for more things (we will see it in the second example).
More about events in Vue
In the second example we are going to use the 2 possible notations for the events, making a counter of Likes! We will put a button to Add, and another one to Remove when clicking, and the result will be shown. If we double click (dblclick event), the addition or subtraction of click is done 10 by 10.
On the other hand, we are also going to create a square, where we want to show the coordinates of the mouse when moving it (the event object generated by Javascript itself gives it to us), and when clicking we want it to change color. To do this, we have also included a small code in CSS:
#canvas {
width: 400px;
height: 400px;
padding: 200px 20 px;
text-align: center;
border: 1px solid #333;
}
.red {
color: #f53c0d;
background: #eeb264;
}
.blue {
color: #000099;
background: #62628a;
}
The full code for this second example is:
<!DOCTYPE html><html><title>ManejandoDatos.es - VueJS Eventos</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="estilo.css" rel="stylesheet" /><body><div id="main"><h3>Me gustan ... {{valor}}</h3><button v-on:click="suma(1)" @dblclick="suma(10)">Me gusta - Like</button><button @click="resta(1)" v-on:dblclick="resta(10)">No me gusta - Don't Like</button><div id="canvas" @mousemove="mover" v-bind:class="{red: red}" @click="cambiacolor">{{x}}, {{y}}</div><button @click="cambiacolor">Cambia color - Change color</button></div></body></html><script>let app = new Vue({el: '#main',data: {valor: 10,x: 0,y: 0,red: false},methods: {suma(inc) {this.valor += inc;},resta(inc) {this.valor -= inc;},mover(event) {this.x = event.offsetX;this.y = event.offsetY;},cambiacolor() {this.red = !this.red}}})</script>Let’s go by parts. As usual, the Vue event is assigned a DIV to work with. The data is included in data, where we have created value (for the Likes counter), x, y and red (for the color change of the square).
Regarding the methods, addition(inc) and subtraction(inc) are created, where the variable inc is the jump number. The jump number is included in the HTML code, in the event call. When clicked sum(1) is called, while when double clicked sum(10) is called. The same for the dislikes.
Finally, for the square, we have generated a button that changes color when pressed. Everything is managed from the variable red, and the function that is executed when the event is triggered is cambiacolor. To associate the property, it has been done using an object: v-bind:class=”{net: red}”. Specifically, the binding is made to the class property depending on the value of red.
Honestly, a very elegant way.
Event Modifers
Lastly, it is possible to include modifiers on events as an example, only allowing one click. To do that, you need to add the .once such as: v-on:click.once=”funcion_once”. You can use also .prevent to execute “preventDefault()” of the event in Javascript. Undoubtedly, a very interesting and easy to implement feature.
Let’s keep on learning Vue JS!!