Explication détaillée de la fonction app.directive() de Vue3

Vue3 全局 APIVue3 API globale

app.directive()est une fonction très puissante qui permet aux développeurs de définir des directives globales personnalisées.

Les directives sont une fonctionnalité spéciale fournie par Vue, utilisée pour manipuler directement les éléments DOM. En utilisantapp.directive(), vous pouvez définir vos propres directives et les utiliser dans toute l'application.

1. Qu'est-ce qu'une directive ?

Les directives sont des attributs spéciaux dans Vue qui commencent parv-. Vue dispose de quelques directives couramment utilisées intégrées, telles quev-if、v-for、v-bindetc. Ces directives peuvent nous aider à manipuler les éléments DOM plus facilement.

Par exemple,v-ifla directive peut décider si un élément doit être rendu en fonction de la valeur d'une expression :

Exemple

<div v-if="isVisible">afficher le contenu</div>

QuandisVisibleesttruewhendivl'élément sera rendu ; sinon,divl'élément ne sera pas rendu.

2. Directives personnalisées

En plus des directives intégrées, Vue nous permet également de définir nos propres directives. Les directives personnalisées peuvent être utilisées pour gérer des opérations DOM spécifiques, telles que le focus automatique, l'écoute du défilement, etc.

Dans Vue3, nous pouvons utiliser laapp.directive()fonction pour enregistrer une directive globale.

3. Utilisation de base de app.directive()

app.directive()La fonction accepte deux paramètres :

  • Nom de la directive :Définissez le nom de la directive. Notez qu'il ne doit pas inclure lev-préfixe.
  • Objet de directive :Un objet contenant des fonctions de hook de directive, utilisé pour définir le comportement de la directive.

3.1 Enregistrer une directive simple

Supposons que nous devions définir une directive qui met automatiquement le focus sur l'élément lorsqu'il est inséré dans le DOM. Nous pouvons l'implémenter comme ceci :

Exemple

import { createApp } from 'vue';

const app = createApp({});

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

app.mount('#app');

Dans cet exemple, nous définissons une directive nomméefocusdirective. Lorsque l'élément est inséré dans le DOM, lamountedfonction de hook sera appelée, etel.focus()fera automatiquement prendre le focus à l'élément.

3.2 Utilisation de directives personnalisées

Lorsque vous utilisez une directive personnalisée dans un template, vous devez ajouter lev-préfixe :

Exemple

<input v-focus />

Lorsque la page se charge, lainputélément obtiendra automatiquement le focus.

4. Fonctions de hook de directive

Les directives personnalisées peuvent avoir plusieurs fonctions de hook pour effectuer des opérations spécifiques à différentes étapes du cycle de vie. Les fonctions de hook incluent :

  • mounted: appelée lorsque la directive est insérée dans le DOM.
  • updated: appelée lorsque le composant de la directive se met à jour.
  • unmounted: appelée lorsque l'élément de la directive est retiré du DOM.

4.1 Exemple : Écoute des événements de défilement

Supposons que nous devions effectuer certaines opérations lorsque l'utilisateur fait défiler la page. Nous pouvons utiliser unescrolldirective :

Exemple

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);
  }
});

Dans cet exemple, lamountedfonction hook est utilisée pour ajouter un écouteur d'événement de défilement, et launmountedfonction hook est utilisée pour supprimer l'écouteur.

4.2 Utilisation de la directive Scroll

Exemple

<div v-scroll="onScroll" style="height: 200px; overflow-y: scroll;">
<p>Contenu du défilement...</p>
</div>

Définissez laonScrollméthode dans le composant :

Exemple

methods: {
  onScroll(événement) {
    console.log('L’utilisateur fait défiler', event);
  }
}

Lorsque l'utilisateur fait défiler ladivélément,onScrollla méthode sera appelée.

5. Paramètres et modificateurs de directive

Les directives personnalisées peuvent accepter des paramètres et des modificateurs. Les paramètres sont la partie après les deux-points dans le nom de la directive, et les modificateurs sont la partie après le point dans le nom de la directive.

5.1 Exemple : Utilisation des paramètres et des modificateurs

Supposons que nous devions définir unecolordirective qui définit la couleur d'arrière-plan de l'élément en fonction du paramètre :

Exemple

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;
  }
});

Utilisez-le dans le template :

Exemple

<div v-color:blue.bold>La couleur d'arrière-plan est bleue, la police est en gras</div>

Dans cet exemple, lablueest le paramètre de la directive, etboldest le modificateur.

Vue3 全局 APIVue3 API globale

Autres extensions