Cómo crear directivas personalizadas en Vue

Las directivas son construcciones de programación que especifican cómo los intérpretes y compiladores deben procesar las entradas para una operación. Las directivas de Vue amplían la funcionalidad de los elementos HTML en las plantillas de Vue, lo que permite la manipulación directa del DOM.

Puede usar directivas en Vue para agregar detectores de eventos, entre otras operaciones. Adjuntará atributos adicionales a elementos HTML para usar directivas en su aplicación.

La estructura de las directivas de Vue

Las directivas en Vue tienen un v- prefijo para distinguirlos de los atributos HTML regulares. El v- prefix le dice al compilador de Vue que el atributo es una directiva de Vue para que pueda procesar y aplicar el comportamiento de esa directiva al elemento HTML.

He aquí un ejemplo que demuestra el uso de la v-mostrar atributo para mostrar el contenido de un h2 elemento:

Vue.js tiene muchas más directivas integradas como unión en v, v-siy v-en lo que le permite realizar tareas como el enlace de datos, la representación condicional, el manejo de eventos y más.

Definición de directivas personalizadas en Vue

Puede definir directivas personalizadas para agregar funciones nuevas y reutilizables para sus aplicaciones Vue.js. La creación de directivas personalizadas requiere dos pasos principales. Primero, registrará la directiva local o globalmente. Luego, definirá el comportamiento de la directiva con enlaces de ciclo de vida.

Registro de directivas personalizadas

Puede registrar una directiva personalizada en Vue local o globalmente, según su alcance previsto. Sin embargo, es una práctica más común registrar directivas globalmente. Esto garantiza que las directivas estén disponibles en todas partes dentro de su aplicación Vue.

Puede registrar directivas personalizadas localmente si tiene la intención de usar la directiva personalizada dentro de un componente Vue simple. Así es como puede registrar un v-cambiar de color directiva localmente:

Este bloque de código demuestra el registro local de una directiva personalizada en un componente de Vue. Define el v-cambiar de color directiva como un objeto en caso de camello cambiarColor.

Para registrar su directiva en un alcance global, diríjase a la principal.js archivo en la raíz del directorio de su aplicación y defínalo allí:

Este programa registra una directiva personalizada global usando el directiva de aplicación método. llama directiva de aplicación para registrar el cambiar de color directiva en la aplicación y luego utiliza la app.mount método para montar la aplicación en un elemento HTML con el ID aplicación.

Puede elegir entre las opciones globales y locales para registrar directivas personalizadas según las necesidades de su aplicación.

Definición del comportamiento de una directiva

Puede definir directivas personalizadas como objetos que contiene ganchos de ciclo de vida. Estos enlaces de ciclo de vida definen el comportamiento de la directiva y reciben el elemento al que está vinculada la directiva.

Algunos ejemplos de ganchos de ciclo de vida son creado, montadoy actualizado. Cada uno de estos ganchos proporciona funcionalidad para interactuar con el componente en una etapa específica.

Puedes usar el montado gancho de ciclo de vida para acceder al elemento HTML de un componente en el modelo de objeto de documento (DOM) después de que el compilador Vue.js monte la aplicación. Por el contrario, el actualizado El enlace del ciclo de vida puede realizar actualizaciones adicionales a los componentes después de haber reestructurado el componente.

Así es como puede definir un objeto que contiene varios enlaces de ciclo de vida para una directiva Vue:

const directiveObject = {
    mounted(el, binding, vnode) {
    },
    
    updated(el, binding, vnode) { 
    }
}
app.directive('changecolor', directiveObject)
 

Las directivas personalizadas pueden tener el mismo comportamiento para el montado y actualizado ganchos, sin necesidad de otros ganchos de ciclo de vida. Además, muchas directivas personalizadas que creará requerirán solo la montado y actualizado manos.

En tales casos, es común definir directivas como funciones en lugar de objetos con ganchos de ciclo de vida:

app.directive('changecolor', (el, binding, vnode) => {
    const message = 'Are you sure you want to change the color?' 
    el.addEventListener('click', () => {
        if (confirm(message)) {
            el.style.color = binding.value
             || "#" + Math.random().toString().slice(2, 8);
        }
    })
})
 

Este bloque de código define una directiva global personalizada con la cadena cambiar de color como primer argumento. El segundo argumento es una función abreviada que define el comportamiento de la directiva.

Como su nombre lo indica, el v-cambiar de color directiva cambia el color de cualquier elemento HTML al que lo adjunte. La directiva puede cambiar el color del elemento HTML aleatoriamente con un clic.

El el El parámetro representa el elemento HTML que adjuntó a la directiva. El vinculante El parámetro es un objeto que contiene propiedades que definen cómo aplicar la directiva. El vinculante.valor El parámetro le permite seleccionar un color predeterminado al crear la aplicación Vue. El vnodo El parámetro contiene información sobre el nodo virtual Vue.js asociado con el elemento.

El cambiar de color La directiva utiliza un detector de eventos de JavaScript para capturar el evento que se desencadena cuando hace clic en el elemento HTML. El confirmar() El método muestra un cuadro de diálogo que le pide que confirme si desea cambiar el color del elemento al azar.

Para probar la directiva creada, configure una aplicación Vue similar a la siguiente:

Observe que este código asigna el color rojo hacia h2 etiqueta pero sin color a la h3 etiqueta. Cuando obtenga una vista previa de su aplicación Vue en un navegador, debería verse así:

Haciendo clic en ambos hola vue y Aprender directivas personalizadas notará que la etiqueta establecida en rojo seguirá siendo roja, pero la etiqueta sin valor asignado cambiará a un color aleatorio.

Esto sucederá después de que confirme su elección, como se muestra a continuación:

Libere el poder de personalización de Vue

Las directivas personalizadas brindan acceso de bajo nivel al DOM, lo que le permite crear funcionalidad en diferentes componentes de la aplicación Vue, lo que mejora la escalabilidad de su aplicación. Siguiendo los pasos del artículo, puede crear directivas personalizadas para facilitar el proceso de desarrollo de su aplicación.

Vue lanzó recientemente la versión 3.3 con características adicionales que mejoran la personalización y reutilización de su aplicación. Comprender estas características puede llevar su destreza de desarrollo a otro nivel.