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í:
<h1 v-red>Aprendiendo Vue!</h1>
En la que modificaremos el color del título a rojo tal y como indica la propia directiva. El código necesario en Javascript para definir la directiva sería el siguiente:
Vue.directive(“red”, function(el, binding, vnode) {
el.style.color = “red”;
});
Este código se ejecutará en el bind que es una función que se llama solo una vez cuando se enlaza la primera vez la directiva al elemento. Siendo más estrictos podríamos escribirlo así y con más funciones en función de cuando se quiere ejecutar el código.
Vue.directive(“red”, {
bind: function(el, binding, vnode) {
el.style.color = “red”;
}
});
Poniendo todo junto en el ejercicio como resultado tendríamos nuestros textos cambiados a color rojo ya que modificamos la propiedad color del estilo del elemento [1].
Para seguir jugando con nuestro ejemplo podríamos definir otra directiva con el color azul y aplicarla al otro texto y ver el resultado[2].
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!
<h1 v-color:blue>{{message}}</h1>
<p v-color:red> Usando la directiva personalizada v-color:arg! </p>
Declaramos la nueva directiva como v-color pero además le pasamos como argumento el color deseado de forma que colorearemos diferente cada texto según el argumento dado.
Si vamos a la definición podremos hacer algo como esto:
Vue.directive(“color”, function(el, binding, vnode) {
el.style.color = binding.arg;
console.log(binding);
});
El objeto binding guarda muchas propiedades como el nombre de la directiva, el valor, los modificadores, etc., y entre estas propiedades también podemos obtener el argumento [1]. Es este argumento el que recuperaremos y con el que podremos modificar la propiedad color del estilo del elemento [2].
Directivas personalizadas III
UTILIZANDO MODIFICADORES
En este nuevo ejercicio utilizaremos más propiedades de las directivas, hasta hora hemos visto como crear una directiva que cambia el color de un texto. Una muy simple con un comportamiento estático modificando el estilo del texto y otra un poco más avanzada en la que introducimos un parámetro.
En esta ocasión introduciremos el uso de los modificadores, que son simplemente nuevos decoradores que se le pueden añadir o no a la directiva.
Volviendo a las modificaciones de estilo de los textos, un buen ejemplo sería decidir el formato en función de ciertos modificadores. Para ello crearemos la directiva v-format que podrá recibir diferentes modificadores que cambien el estilo del texto del elemento.
Los modificadores se declaran a partir de un punto y seguido al nombre de la directiva u otro modificador. Este podría ser un ejemplo de declaración:
<h1 v-format.bold.underline.highlight>{{message}}</h1>
Para el código Javascript tendríamos algo como lo siguiente:
Vue.directive(“format”, function(el, binding, vnode) {
const modifiers = binding.modifiers; if (modifiers.underline) {
el.style.textDecoration = “underline”;
}
if (modifiers.bold) {
el.style.fontWeight = “bold”;
}
if (modifiers.highlight) {
el.style.background = “#eaeaea”;
}
});
En el objeto binding tenemos los modificadores [1] que pueden haberse aplicado y que podremos consultar y aplicar en caso de que existan [2].
Directivas personalizadas IV
DIRECTIVAS EN LA INSTANCIA
Hasta ahora hemos visto cómo crear y declarar nuestras directivas personalizadas de forma global pero en este ejercicio podremos ver cómo se definen de forma local dentro de una instancia o componente Vue.
Para ello simplemente tendremos que ir al código javascript de nuestra instancia y añadir un nuevo objeto directives con una sintaxis ligeramente diferente a la que hemos visto hasta ahora.
En este ejemplo condensaremos varias de las directivas de los ejercicios anteriores añadiéndolas en este apartado con sus correspondientes funciones.
En la declaración
