Explicación detallada de la función app.directive() de Vue3

Vue3 全局 APIAPI global de Vue3

app.directive()es una función muy poderosa que permite a los desarrolladores definir directivas globales personalizadas.

Las directivas son una funcionalidad especial proporcionada por Vue para manipular directamente los elementos del DOM, medianteapp.directive()puedes definir tus propias directivas y usarlas en toda la aplicación.

1. ¿Qué es una directiva?

Una directiva es un atributo especial en Vue que comienza conv-el prefijo. Vue incluye algunas directivas comunes, comov-if、v-for、v-bindetc. Estas directivas nos ayudan a manipular los elementos del DOM de manera más conveniente.

Por ejemplo,v-ifla directiva puede decidir si renderizar un elemento según el valor de una expresión:

Ejemplo

<div v-if="isVisible">Mostrar contenido</div>

CuandoisVisibleParatruecuando,divel elemento se renderiza; de lo contrario,divel elemento no se renderiza.

2. Directivas personalizadas

Además de las directivas integradas, Vue también nos permite definir nuestras propias directivas. Las directivas personalizadas se pueden usar para manejar operaciones específicas del DOM, como el enfoque automático, la escucha de desplazamiento, etc.

En Vue3, podemos medianteapp.directive()función para registrar una directiva global.

3. Uso básico de app.directive()

app.directive()La función acepta dos parámetros:

  • Nombre de la directiva: define el nombre de la directiva, asegúrate de no incluirv-el prefijo.
  • Objeto de la directiva: un objeto que contiene las funciones hook de la directiva, utilizado para definir el comportamiento de la directiva.

3.1 Registrar una directiva simple

Supongamos que necesitamos definir una directiva que, cuando el elemento se inserte en el DOM, se enfoque automáticamente en él. Podemos implementarlo así:

Ejemplo

import { createApp } from 'vue';

const app = createApp({});

app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

app.mount('#app');

En este ejemplo, definimos una directiva llamadafocusCuando el elemento se inserta en el DOM,mountedla función hook será llamada,el.focus()hará que el elemento obtenga el foco automáticamente.

3.2 Usar directivas personalizadas

Al usar directivas personalizadas en la plantilla, debes agregarv-el prefijo:

Ejemplo

<input v-focus />

Cuando se carga la página,inputel elemento obtiene el foco automáticamente.

4. Funciones hook de las directivas

Las directivas personalizadas pueden contener múltiples funciones hook, utilizadas para ejecutar operaciones específicas en diferentes etapas del ciclo de vida. Las funciones hook comunes incluyen:

  • mounted: se invoca cuando el elemento de la directiva se inserta en el DOM.
  • updated: se invoca cuando el componente de la directiva se actualiza.
  • unmounted: se invoca cuando el elemento de la directiva se elimina del DOM.

4.1 Ejemplo: escuchar eventos de desplazamiento

Supongamos que necesitamos ejecutar ciertas acciones cuando el usuario desplaza la página, podemos definir unascrolldirectiva:

Ejemplo

app.directive('scroll', {
  mounted(el, binding) {
    const handler = binding.value;
    el.addEventListener('scroll', handler);
  },
  unmounted(el, binding) {
    const handler = binding.value;
    el.removeEventListener('scroll', handler);
  }
});

En este ejemplo,mountedla función hook se usa para agregar un escuchador de eventos de desplazamiento,unmountedla función hook se usa para eliminar el escuchador.

4.2 Usar la directiva de desplazamiento

Ejemplo

<div v-scroll="onScroll" style="height: 200px; overflow-y: scroll;">
<p>Contenido de desplazamiento...</p>
</div>

Define en el componenteonScrollel método:

Ejemplo

methods: {
  onScroll(event) {
    console.log('El usuario se está desplazando', event);
  }
}

Cuando el usuario desplazadivel elemento,onScrollse llamará al método.

5. Parámetros y modificadores de las directivas

Las directivas personalizadas pueden aceptar parámetros y modificadores. Los parámetros son la parte después de los dos puntos del nombre de la directiva, y los modificadores son la parte después del punto del nombre de la directiva.

5.1 Ejemplo: usar parámetros y modificadores

Supongamos que necesitamos definir unacolordirectiva, que establece el color de fondo del elemento según el parámetro:

Ejemplo

app.directive('color', {
  mounted(el, binding) {
    const color = binding.arg || 'red';
    const modifiers = binding.modifiers;
    if (modifiers.bold) {
      el.style.fontWeight = 'bold';
    }
    el.style.backgroundColor = color;
  }
});

Usar en la plantilla:

Ejemplo

<div v-color:blue.bold>Color de fondo azul y texto en negrita</div>

En este ejemplo,bluees el parámetro de la directiva,boldes el modificador.

Vue3 全局 APIAPI global de Vue3

Otras extensiones