}
Ahora lo que tenemos que hacer es usar la directiva v-for con el siguiente formato, descomponiendo el objeto en sus propiedades en pares clave-valor.
<ul>
<li v-for=”(value, key) in post” v-blue>
{{ key }}: {{ value }}
</li>
</ul>
También podríamos usar el índice en esta descomposición, si lo necesitáramos, de la siguiente manera:
<ul>
<li v-for=”(value, key, index) in post”
style= “list-style-type:none;” v-blue>
{{ index + 1 }} => {{ key }}: {{ value }}
</li>
</ul>
Podemos ver el resultado de la inspección del objeto en la imagen [1] y para seguir jugando con nuestro ejemplo meter un nuevo atributo y ver cómo se renderiza perfectamente cuando guardamos. [2]
Filtros
MODIFICADORES DE VALOR
Vamos a imaginarnos que tenemos nuestra interfaz que renderiza la lista de la compra que hemos realizado en anteriores ejercicios. Hemos sacado la aplicación que muestra la lista de la compra pero los usuarios se quejan de que se muestran en letras minúsculas y ellos quieren que se vea bien grande y se muestre en letras mayúsculas aun cuando ellos los introduzcan en minúsculas.[1]
Podremos modificar este comportamiento con una herramienta que pone a nuestra disposición Vue: los filtros.
Definiremos un filtro que pase a mayúsculas cada valor que se le pase en este caso de la siguiente forma:
Vue.filter(‘productName’, function(value){
if(!value) return ‘’
value = value.toString();
return value.toUpperCase();
});
Y en la declaración HTML lo haremos de la siguiente forma
<ul>
<li v-for=”product in shoppingList”>
{{ product | productName }}
/li>
</ul>
Esta notación es el típico pipe que es muy común y que en este caso se podría leer algo así como “a este valor la aplico esta función o transformación”.[2]
Renderizar solo una vez
DIRECTIVA V-ONCE
En caso de que necesitemos mostrar un único valor cuando carguemos la página haremos uso de una directiva especial llamada v-once. Esta directiva asegura que un elemento solo tomará un valor durante el renderizado y, en el caso de que la página se vuelva a renderizar, considerará al elemento como un elemento estático que no se tomará en cuenta de nuevo.
Una razón por la que se puede marcar un elemento con la directiva v-once sería optimizar el rendimiento en la actualización de datos. El contenido del elemento que se renderice una sola vez podría ser costoso.
En este ejemplo vemos cómo se renderiza una sola vez aquello que tengamos dentro de la variable incluida en el input [1].
Si posteriormente a la carga modificamos el contenido del input y, por tanto, el contenido de la variable podemos comprobar cómo no se renderiza de nuevo el contenido de nuestro título [2].
Mouse move
DIRECTIVA V-ON:MOUSEMOVE
En esta ocasión vamos a ver dentro de las directivas para capturar eventos del DOM aquella que nos permite filtrar los generados cuando el ratón se mueve por encima de uno de nuestros componentes.
Estamos hablando de la directiva v-on acompañado del evento mousemove [1]:
<div class=”mousearea” v-on:mousemove=”move”></div>
A este div le daremos unas dimensiones mediante la clase CSS mousearea [2]:
.mousearea {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
Enlazaremos el evento con una función de la instancia para ir modificando las coordenadas mientras el ratón está en movimiento. Estas coordenadas las guardaremos y las mostraremos en otro div diferente como resultado.
methods: {
move:function(event){
this.mouseX = event.clientX;
this.mouseY = event.clientY;
}
}
<div class=”result”>{{mouseX}} - {{mouseY}}</div>
A medida que se captura el movimiento del ratón se ejecuta la función y vamos refrescando las variables de la instancia que se renderizarán en nuestra página [3].
Directivas personalizadas
DEFINIENDO
