Creación de directivas personalizadas en Vue.js

Las directivas son atributos especiales con el prefijo v- . El trabajo de una directiva es aplicar de forma reactiva efectos secundarios al DOM cuando cambia el valor de su expresión. Vue.js proporciona una amplia gama de directivas para su uso. Probablemente ya haya utilizado las directivas v-if, v-repeat, v-model y v-show.

En este artículo, voy a explicar las partes de una directiva y lo que está disponible para usar. Luego, le mostraré cómo crear una amplia gama de directivas personalizadas para que pueda aplicar sus necesidades de programación directamente a los elementos DOM. Así que comencemos a discutir qué se incluye con una directiva.

Nombre de la directiva

La directiva personalizada más básica solo tiene un nombre. No acepta argumentos ni tiene modificadores. Sin pasar un valor, esto no sería muy flexible, pero aún podría tener alguna funcionalidad del elemento DOM.

Un ejemplo con el que puede estar familiarizado es la versión más básica de una directiva es v-else . A continuación, se muestra un ejemplo de una directiva personalizada que crearemos en breve:

Transferencia de valores a la directiva

Puede pasar un valor a una directiva personalizada. A continuación se muestra un ejemplo:

En este ejemplo, la directiva v-if se muestra si la propiedad de datos isVisible es verdadera. Sabemos que esto busca una propiedad de datos porque está entre comillas. Si, en cambio, quisiéramos pasar una cadena como valor a la directiva, haría lo siguiente:

Argumentos

Las directivas personalizadas pueden tomar un “argumento” denotado por dos puntos después del nombre de la directiva. A continuación se muestra un ejemplo:

En el ejemplo anterior, el nombre de la directiva personalizada es fijo . El argumento es inferior .

Las directivas solo pueden admitir un argumento .

Modificadores

Los modificadores son sufijos especiales indicados por un punto que indican que una directiva debe estar vinculada de alguna manera especial. Los modificadores controlan cómo se comporta la directiva. Aquí hay un ejemplo de una directiva personalizada que crearemos más adelante:

En el ejemplo anterior, el modificador. subrayado le dice a la directiva v-format que aplique un subrayado al texto.

Puede utilizar varios modificadores en una directiva encadenándolos. Aquí hay un ejemplo:

En el ejemplo anterior, el texto aparecerá en negrita, resaltado y subrayado.

Creación de directivas personalizadas

Ahora comprende los conceptos básicos de una directiva en Vue.js. Además del conjunto predeterminado de directivas enviadas en el núcleo, Vue también le permite registrar sus propias directivas personalizadas. Creemos nuestras propias directivas personalizadas.

En su base, podemos crear una directiva global usando Vue.directive y dándole un nombre. A continuación, se muestra un ejemplo de cómo crear una directiva personalizada con el nombre pegajoso .

Cuando queremos usar esta directiva personalizada en un elemento DOM, se verá así:

Ahora que hemos creado nuestra primera directiva personalizada, ahora necesitamos crear el código detrás de ella. Antes de escribir ese código, debemos comprender qué valores nos proporciona Vue para usar en nuestra directiva personalizada.

Ganchos para directivas

Vue proporciona una serie de ganchos para directivas personalizadas. Cada gancho tiene la opción de algunos argumentos. Estos son los ganchos que están disponibles:

Cada uno de estos tiene argumentos el , vinculantes y vnode disponibles. Estos argumentos son:

el : el elemento sobre el que se asienta la encuadernación

enlace : un objeto que contiene los argumentos que se pasan a los ganchos. Hay muchos argumentos disponibles, incluidos nombre, valor, valor antiguo, expresión, arg y modificadores.

vnode : le permite hacer referencia directamente al nodo en el DOM virtual si es necesario.

Tanto el enlace como el vnode deben tratarse como de solo lectura.

update y componentUpdated ambos exponen un argumento adicional llamado oldvnode. El argumento oldvnode se usa para diferenciar entre el valor anterior pasado y el valor más nuevo.

Vincular y actualizar son los más útiles de los cinco.

Obtenga el código

Si desea ver todas estas directivas personalizadas en acción, puede bifurcar este entorno de pruebas de código que he creado. Todas las directivas personalizadas que crearemos se encuentran en el archivo main.js. Simplemente elimine el comentario del número de demostración para ver el código.

Demostración n. ° 1 v-sticky

Si está siguiendo el código en la zona de pruebas, esta es la demostración n. ° 1 que se encuentra en el archivo main.js. La directiva v-sticky se ha aplicado a & lt; app-navigation & gt ;. Cuando te desplazas, la navegación permanece fija en la pantalla.

Escribamos el comportamiento que queremos que tenga nuestra directiva v-sticky. Cuando esta directiva se aplica a un elemento DOM, queremos que ese elemento quede fijo en la pantalla. Aquí está el código personalizado para nuestra directiva v-sticky:

Analicemos lo que hay en ese código. Estoy usando Vue.directive para crear una nueva directiva global llamada “ pegajosa “. Después del nombre, tenemos una función que tiene los tres argumentos de los que hablamos anteriormente. En la función, tomo el elemento al que se ha aplicado la directiva y obtengo su estilo y luego su posición. Lo estoy configurando como fijo.

Más adelante aplicaremos un modificador a esta directiva personalizada.

Demostración n. ° 2 v-naranja

La siguiente directiva personalizada que crearemos es v-orange. Esta directiva establecerá el color del texto en naranja. Aquí está el código de esta directiva:

Podemos aplicar esta directiva al mensaje que se muestra en el componente HelloWorld. Una vez que se aplica, el mensaje de bienvenida ahora es naranja.

Demostración n. ° 3 v-color

La directiva anterior no es muy versátil. Si quisiera que el texto fuera azul en lugar de naranja, tendría que escribir otra directiva personalizada. Vamos a crear una nueva directiva personalizada llamada v-color. Esta directiva personalizada tomará un valor que se le pasará. Este valor es el color que queremos que se aplique al mensaje de bienvenida.

Anteriormente mencioné que el enlace es un objeto que contiene los argumentos que se pasan a la directiva. Un elemento contenido en ese objeto es el valor que se pasa. Lo usaremos en nuestro código para establecer el texto en ese valor.

Ahora nuestra directiva es mucho más flexible. Puede pasar cualquiera de las cadenas de colores conocidas como “rojo” o “azul”, así como pasar un color hexadecimal válido como # ffff00. Aquí hay una imagen de nuestra nueva directiva v-color que se aplica tres veces. La primera vez que el color es rojo, la segunda vez que el color es azul y la última vez que el color es amarillo usando el código hexadecimal de # ffff00.

Demostración n. ° 4 v-sticky con un argumento

Puede proporcionar un argumento a una directiva personalizada. Modificaremos nuestro código v-sticky que creamos anteriormente para aceptar un argumento. La mayoría de los sitios web tienen navegación en la parte superior de la pantalla y un pie de página en la parte inferior de la pantalla.

Usaremos el argumento para decirnos si la navegación debe fijarse en la parte superior o inferior de la pantalla. El objeto de enlace contendrá un valor llamado arg que contiene el argumento que pasamos a nuestra directiva personalizada.

Para simplificar las cosas, si no se pasa ningún argumento a la directiva, asumo que la navegación debe fijarse en la parte superior de la pantalla. Si recibo un argumento, la navegación se fija en la parte inferior de la pantalla.

Para distinguir entre la navegación superior e inferior, agregué un color de fondo gris a la navegación superior y color tostado a la navegación inferior. Aquí está el código:

Después de aplicar nuestra directiva personalizada actualizada a la navegación y al pie de página, se ve así.

Demostración n. ° 5 de formato v con modificadores

Puede agregar tantos modificadores como desee a una directiva personalizada. Vamos a crear una nueva directiva personalizada llamada formato . Esta directiva personalizada aceptará uno o más de estos modificadores:

El argumento vinculante es un objeto. Este objeto contiene todos los modificadores de la directiva personalizada. Los modificadores de la vinculación también son un objeto. El objeto contendrá una clave para cada modificador que se haya aplicado. Usaremos esto para aplicar diferentes formatos de texto. Aquí está el código:

En el código anterior, obtenemos el objeto modificadores y lo asignamos a la variable llamada modificadores. Luego, verificamos todos los modificadores posibles que admitimos. Si ese modificador está presente, aplicamos la decoración de texto correspondiente.

Hemos aplicado el modificador subrayado a la palabra guía . Hemos aplicado el modificador negrita a las palabras configurar / personalizar . Apliqué el modificador resaltado a las palabras comprobar .

Para demostrar que puede aplicar varios modificadores a una directiva personalizada, apliqué los tres modificadores al texto Complementos CLI instalados .

Así es como se ve.

Demo # 6 v-hook-demo que muestra los ganchos del ciclo de vida

Anteriormente hablé sobre los enlaces de ciclo de vida que están disponibles para usted en su directiva personalizada. Si desea que su directiva personalizada funcione según un enlace de ciclo de vida, deberá utilizar un formato diferente para su código. En lugar de usar una función después del nombre de la directiva personalizada, tendrá un objeto. Las claves de ese objeto serán uno o más de los ganchos de ciclo de vida disponibles.

En la zona de pruebas de código, agregué código a la vista Acerca de . El código tiene un botón. Al hacer clic en el botón, el número se actualiza.

En el componente HelloWorld , he aplicado el componente v-hook-demo al primer div.

Aquí está el código para el componente v-hook-demo.

Si actualiza la pantalla y mira su consola, notará que se implementaron los enlaces de ciclo de vida bind y insertados . Si va a la página Acerca de y hace clic en el botón, verá que se implementa el enlace del ciclo de vida componentUpdated .

Conclusión

Este artículo le brinda una descripción general de los elementos que componen una directiva en Vue.js. Después de esa introducción, lo guiaré a través de seis ejemplos de creación de una directiva personalizada. Estos ejemplos muestran una directiva personalizada básica, una directiva a la que se le pasa un valor, una directiva que usa argumentos y finalmente una directiva que usa modificadores. El último ejemplo muestra los ganchos del ciclo de vida disponibles.

Espero que haya disfrutado de este artículo. Deje un comentario si tiene alguna pregunta o desea dejar un comentario.

Otro artículo que le podría gustar