Creación de directivas personalizadas en Nuxt.js

Es conveniente crear directivas personalizadas para las funciones que se aplican comúnmente al DOM en varias páginas o componentes.

Se pretende crear un ejemplo de directiva de desplazamiento.

- Resulta útil para la carga de datos al desplazarse, mostrar un mensaje tipo toast al desplazarse, etc., en la pantalla principal o en páginas de detalles.

1. Primero, cree el archivo y regístrelo en el plugin de Nuxt.

Los plugins de configuración de Nuxt ejecutan los archivos definidos cuando se inicializa la aplicación Nuxt para activar ciertas acciones. = Permite utilizar funciones específicas globalmente.

2. Implemente la directiva de desplazamiento.

Se implementa para que el componente pueda pasar la función de devolución de llamada.

3. Ahora, use v-scroll en la página.

Otros

Hay algunos ganchos que se pueden usar al crear una directiva personalizada.

1. bind(el, binding, vnode)
Descripción: Se llama solo una vez cuando la directiva se enlaza por primera vez a un elemento.

Aquí puede realizar la configuración inicial del elemento enlazado.

Argumentos

el: Elemento DOM al que está enlazada la directiva
binding: Objeto que contiene el valor, la expresión y los argumentos de la directiva
vnode: Nodo virtual creado por el compilador de Vue

2. inserted(el, binding, vnode)

Descripción: Se llama cuando el elemento enlazado se inserta en el DOM. Es decir, se utiliza cuando la directiva se agrega realmente al DOM.

* En el código de enlace del evento de desplazamiento, realiza operaciones relacionadas con el DOM en el momento del gancho insertado.

3. update(el, binding, vnode, oldVnode)

Descripción: Se llama cada vez que cambian los atributos o el valor del elemento enlazado.

Sin embargo, todavía está en el estado antes de que se actualicen los componentes secundarios.

Se utiliza cuando es necesario realizar una operación DOM cuando cambia el valor de enlace.

Argumentos

oldVnode: Nodo virtual renderizado previamente

4. componentUpdated(el, binding, vnode, oldVnode)

Descripción: Se llama después de que se actualicen los atributos o el valor del elemento enlazado y todos los componentes secundarios.

Es decir, se realiza en el estado final del DOM. Espera a que cambie el valor del componente secundario antes de ejecutarse.

5. unbind(el, binding, vnode)

Descripción: Se llama cuando la directiva ya no se aplica al elemento y el elemento se destruye.

En este momento, elimina los escuchadores de eventos o realiza tareas de limpieza.

* En el ejemplo personalizado de desplazamiento, el escuchador de eventos se limpia en el momento de la desvinculación.