Las directivas son atributos especiales que se ponen en las etiquetas HTML y que les dan cierta funcionalidad. Todas comienzan por v-.
Las más comunes son:
v-text: es equivalente a hacer una interpolación ({{ … }}). Muestra el valor en la etiqueta. Los dos ejemplos siguientes son equivalentes:
<p v-text="mensaje"></p>
<p>{ { mensaje }}</p>
v-once: igual pero una vez renderizado no cambia lo mostrado en la vista aunque cambie el valor de la variablev-html: permite que el texto que se muestra contenga caracteres HTML que interpretará el navegador (al usar la interpolación las etiquetas HTML son escapadas). Internamente hace un .innerHTML del elemento mientras que v-text (y { {...}}) hacen un .textContentv-bind: para asignar el valor de una variable a un atributo de una etiqueta HTML (no entre la etiqueta y su cierre como hace la interpolación). Por ejemplo si tenemos la variable estado cuyo valor es error y queremos que un span tenga como clase ese valor haremos:
<span v-bind:class="estado">...
El resultado será: <span class="error">. La directiva v-bind: se puede abreviar simplemente como : (<span :class="estado">)
v-model: permite enlazar un input a una variable (la hemos visto en el capítulo anterior). Tiene 3 modificadores útiles.
.lazy: em lugar de actualizar el valor al pulsar cada tecla (onInput) lo hace al perder el foco (onChange).number: convierte el contenido a Number.trim: elimina los espacios al principio y al final del textov-if: renderiza o no el elemento que la contiene en función de una condiciónv-show: similar al v-if pero siempre renderiza el elemento (está en el DOM) y lo que hace es mostrarlo u ocultarlo (display: none) en función de la condición. Es mejor si el elemento va a mostrarse y ocultarse a menudo porque no tiene que volver a renderizarlo cada vezv-for: repite el elemento HTML que contiene esta etiqueta para cada elemento de un arrayv-on: le pone al elemento HTML un escuchador de eventos (ej <button v-on:click="pulsado">Pulsa</button>. La directiva v-on: se puede abreviar como @, por ejemplo <button @click="pulsado">Pulsa</button>.Lo que enlazamos en una directiva o una interpolación puede ser una variable o una expresión Javascript. Ej.:
<p>{ { name }}</p>
<p>{ { 'Cómo estás ' + name }}</p>
<p>{ { name=='root'?'Hola Administrador':'Hola ' + name }}</p>
Esta directiva permite renderizar o no un elemento HTML en función de una variable o expresión.
El checkbox está enlazado a la variable marcado (a la que al inicio le hemos dado el valor true, por eso aparece marcado por defecto) y los párrafos se muestran o no en función del valor de dicha variable.
La directiva v-else es opcional (puede estar sólo el v-if) pero si la ponemos el elemento con el v-else debe ser el inmediatamente siguiente al del v-if (su nextElementSibling).
NOTA: Los ejemplos de esta página son todos de Vue2. Recordad que en Vue3 es todo igual excepto la forma de crear la instancia Vue que sería:
const app = Vue.createApp({
data: () => ({
marcado: true,
})
}).mount('#app');
También se pueden enlazar varios if else con v-else-if:
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
| Haz el ejercicio del tutorial de Vue.js |
Esta directiva repite el elemento HTML en que se encuentra una vez por cada elemento del array al que se enlaza.
See the Pen v-for by Juan Segura (@juanseguravasco) on CodePen.
La directiva v-for recorre el array todos y para cada elemento del array crea una etiqueta <li> y carga dicho elemento en la variable elem a la que podemos acceder dentro del <li>.
Además del elemento nos puede devolver su índice en el array: v-for="(elem, index) in todos" ....
Vue es más eficiente a la hora de renderizar si cada elemento que crea v-for tiene su propia clave, lo que se consigue con el atributo key. Podemos indicar como clave algún campo único del elemento o el índice:
<... v-for="(item) in todos" :key="item.id" ...>
o
<... v-for="(item, index) in todos" :key="index" ...>
Pasar una key en cada v-for es recomendable ahora pero será obligatorio al usarlo en componentes así que conviene usarlo siempre.
También podemos usar v-for para que se ejecute sobre un rango (como el típico for (i=0; i<10; i++)):
<span v-for="i in 10" :key="i">{ { i }}</span>
NOTA: No se recomienda usar v-for y v-if sobre el mismo elemento. Si se hace siempre se ejecuta primero el v-if.
| Haz el ejercicio del tutorial de Vue.js |
Esta directiva captura un evento y ejecuta un método como respuesta al mismo.
See the Pen v-for by Juan Segura (@juanseguravasco) on CodePen.
El evento que queremos capturar se pone tras el carácter : y se indica el método que se ejecutará.
Fijaos en el método delTodos() que para hacer referencia desde el objeto Vue a alguna variable o método se le antepone this.
Se puede pasar un parámetro a la función escuchadora:
<button v-on:click="pulsado('prueba')">Pulsa</button>
pulsado(valor) {
alert(valor);
}
Esta directiva se usa mucho así que se puede abreviar con @. El código equivalente sería:
<button @click="pulsado('prueba')">Pulsa</button>
| Haz el ejercicio del tutorial de Vue.js |
A un evento gestionado por una directiva v-on podemos añadirle (separado por .) un modificador. Alguno de los más usados son:
Ejemplo:
<form @submit.prevent="enviaForm">
En el caso de eventos de teclado (keydown, keyup) podemos usar modificadores para indicar qué tecla concreta queremos capturar. Algunos de los más comunes son: .enter, .tab, .delete, .esc, .space, .up, .down, .left, .right, .ctrl, .alt, .shift, .meta, .exact (para que no se capturen otras teclas modificadoras junto a la indicada), .f1, .f2, …, .f12, etc.
Ejemplo:
<input @keyup.enter="busca">
Y en el caso de eventos de ratón (click, dblclick, mouseup, mousedown) podemos usar .left (botón izquierdo), .right (botón derecho), .middle (botón central), .self (sólo se lanza si el evento se produce en este elemento y no en alguno de sus hijos), etc.
Ejemplo:
<div @click.right="menuContextual">
Vamos a hacer una aplicación para gestionar una lista de cosas a hacer. Cada cosa a hacer tiene un título y puede estar hecha o no.
Debe aparecer la lista de cosas a hacer con:
Además queremos que:
Puedes ver una solución al problema planteado en:
See the Pen Untitled by Juan Segura (@juanseguravasco) on CodePen.
Cosas a comentar:
También puedes descargarte el repositorio con el código fuente de este ejemplo.