En Vue podemos capturar todos los eventos que genera el DOM (clic de un botón, presión de una tecla, toma de foco de un control de un formulario etc.) y para ello tenemos una directiva llamada v-on
La directiva v-on captura todos los eventos, pero podemos ser mas precisos y filtrar cual evento capturar:
v-on:click v-on:dblclick v-on:mouseenter v-on:mouseleave v-on:mousemove v-on:keypress v-on:keyup etc.
Mostrar un botón que tenga como etiqueta un 0. Cada vez que se haga clic sobre el mismo incrementar en 1 y actualizarlo en pantalla.
<!doctype html>
<html>
<head>
<title>Prueba Vue</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="aplicacion">
<button v-on:click="contador = contador + 1">El contador vale:{{contador}}</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app=new Vue({
el: '#aplicacion',
data:{
contador: 0
}
})
</script>
</body>
</html>
Definimos la directiva v-on:click y dentro de la misma implementamos el algoritmo, es decir incrementamos el atributo contador definido en el modelo y como sabemos al modificar un atributo del modelo se actualiza en la visto donde se lo utiliza, en este caso {{contador}}:
<button v-on:click="contador = contador + 1">El contador vale:{{contador}}</button>
Esto se puede realizar de esta forma debido a que el algoritmo propiamente dicho es elemental, pero que pasa si dicho algoritmo implican varias operaciones, en esas circunstancias debemos definir un método en nuestro objeto y llamarlo desde la vista:
<!doctype html>
<html>
<head>
<title>Prueba Vue</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="aplicacion">
<button v-on:click="incrementar">El contador vale:{{contador}}</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app=new Vue({
el: '#aplicacion',
data:{
contador: 0
},
methods: {
incrementar: function() {
this.contador = this.contador + 1;
}
}
})
</script>
</body>
</html>
Vue dispone de un atributo llamado methods donde debemos definir todos los métodos necesarios para que cumpla su función nuestro objeto app:
var app=new Vue({
el: '#aplicacion',
data:{
contador: 0
},
methods: {
incrementar: function() {
this.contador = this.contador + 1;
}
}
})
Desde la vista llamamos a dicho método haciendo referencia a su nombre:
<button v-on:click="incrementar">El contador vale:{{contador}}</button>
Dentro del método incrementar podemos acceder a todo lo definido en 'data' mediante la palabra clave 'this'.
this almacena la referencia de la instancia del objeto Vue que creamos, es decir el objeto almacenado en la variable app.