Seguimos aprendiendo VueJS, y tras una introducción, un primer ejemplo, y avanzar un poco más, toca experimentar con los eventos en VueJS. En el ejemplo de hoy, aprenderemos a cumplimentar los métodos que soporta el objeto Vue, cómo están relacionados los “data” y “methods” mediante “this”, y cómo trabajar con eventos.
Ejecución de eventos en VueJS
Lo primero que hay que conocer es que necesitamos incluir v-on:evento=”funcion_evento” para generar un evento, pero también puede ser acortado con un @evento=”funcion_evento”.
<!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 src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.min.js"></script>
<script>
let app2 = new Vue({
el: '#main',
data: {
valor: 100
},
methods: {
simple() {
this.valor = 10;
}
}
})
</script>
Y el resultado es:
eventos con VueJS
que al pulsar el boton, se convierte en:
Eventos en VueJS
La creación de eventos es por tanto, bastante sencilla, si bien el código a ejecutar en el evento está definido en “methods“. En este caso, el evento click. Hay que observar que el propio javascript genera con el evento un objeto que es enviado a la función, y puede servir para más cosas (lo veremos en el segundo ejemplo).
Más sobre eventos en VueJS
En el segundo ejemplo vamos a usar las 2 posibles notaciones para los eventos, haciendo un contador de Likes! Pondremos un boton para Sumar, y otro para Quitar al hacer click, y se irá mostrando el resultado. Si hacemos doble click (evento dblclick), la adición o sustración de click se hace de 10 en 10.
Por otro lado, también vamos a crear un cuadrado, donde queremos mostrar las coordenadas del ratón al recorrerlo (nos lo da el objeto event generado por el propio Javascript), y al hacer click queremos que cambie de color. Para ello, se ha incluido también un pequeño código en 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;
}
El código completo del segundo ejemplo es:
<!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 src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.min.js"></script>
<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>
Vamos por partes. Cómo siempre, se asigna al evento Vue un DIV con el que trabajar. Los datos se van incluyendo en data, donde hemos creado valor (para el contador de Likes), x, y y red (para el cambio de color del cuadrado).
Respecto a los métodos, se crean suma(inc) y resta(inc), donde la variable inc es el número de salto. El número de salto viene incluido en el código HTML, en la llamada al evento. Cuando se hace click se llama a suma(1), mientras que cuando se hace doble click se llama a suma(10). Lo mismo para los no me gusta.
Por último, para el cuadrado, se ha generado un botón que al pulsar, se cambia de color. Se gestiona todo desde la variable red, y la función que se ejecuta al lanzar el evento es cambiacolor. Para asociar la propiedad, se ha hecho utilizando un objeto: v-bind:class=”{red: red}”. En concreto,se hace la vinculación a la propiedad class dependiendo del valor de red.
Sinceramente, una forma muy elegante.
eventos en VueJS
Modificadores de eventos
Por último, es posible incluir modificadores de eventos, por ejemplo, que solo se permita un click. Para ello, hay que incluir .once tal que así: v-on:click.once=”funcion_once”. También se puede incluir .prevent para ejecutar “preventDefault()” del evento de Javascript. Sin duda, una característica muy interesante aportada, de fácil ejecución
Seguimos aprendiendo VueJS!!