• {{ product }}

Enumeración de propiedades Enumeración de propiedades V-FOR PARA OBJETOS Hemos visto cómo mostrar una enumeración de productos de nuestra lista de la compra con la directiva v-for y en este ejercicio veremos cómo mostrar un listado de las propiedades de un objeto de nuestra instancia Vue. Tenemos una propiedad dentro de la instancia Vue que es un objeto que representa la información de uno de los posts de nuestro blog y que queremos renderizar. post: { title: ‘Nuevo artículo’, date: ‘24/03/2019’, author: ‘Ramón’, } 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.

• {{ key }}: {{ value }}

• {{ index + 1 }} => {{ key }}: {{ value }}

Filtros 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

• {{ product | productName }} /li>

Renderizar solo una vez 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 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]:

Directivas personalizadas Directivas personalizadas DEFINIENDO UNA DIRECTIVA GLOBAL Vue permite la creación y registro de nuevas directivas a las que podremos dotar el comportamiento personalizado que queramos. Las directivas personalizadas en Vue como el resto suelen empezar por v- y el nombre de la directiva. Como primer ejemplo empezaremos definiendo una directiva muy simple que cambie el color del texto renderizado. De esta forma tendríamos una declaración tal que así:

Aprendiendo Vue!

Directivas personalizadas II Directivas personalizadas II DIRECTIVAS CON ARGUMENTOS Hemos visto cómo crear una directiva personalizada muy sencilla y en este nuevo ejercicio haremos una pequeña variación para que sea algo más genérica. Veíamos que para definir nuevos colores teníamos que crear nuevas directivas pero si tenemos que crear una para cada color… vaya lío, ¿no? Lo ideal es que pudiéramos indicarlo de alguna forma y solo mantener una directiva y, para conseguirlo, sería genial poder tener una única directiva y pasarle un argumento con el color. ¡Esto es lo que vamos a hacer en este ejercicio!