Propriété directives de Vue 3

Vue3 选项式 APIVue3 API des options

Dans Vue.js,directivesest la propriété utilisée pour enregistrer des directives locales. Grâce àdirectivesles développeurs peuvent définir et utiliser des directives personnalisées dans le composant actuel, permettant ainsi d'obtenir des opérations ou des comportements DOM spécifiques. Cet article expliquera en détaildirectivesla fonctionnalité, l'utilisation et les cas d'application pratiques de la propriété.

Les directives sont une fonctionnalité spéciale de Vue.js, utilisée pour manipuler directement les éléments DOM. Vue fournit de nombreuses directives intégrées (telles quev-if、v-for、v-bindetc.), et permet également aux développeurs dedirectivesdéfinir des directives personnalisées via la propriété. Les directives personnalisées peuvent être enregistrées localement dans un composant, ce qui les rend effectives uniquement au sein de ce composant.

Utilisation de base de la propriété directives

Dans Vue3,directivesla propriété est un objet, où les clés sont des noms de directive et les valeurs sont des objets contenant des fonctions de hook de directive. Les fonctions de hook couramment utilisées incluent :

  • mounted: Appelée lorsque l'élément lié est inséré dans le DOM.
  • updated: Appelée lorsque le composant parent de l'élément lié est mis à jour.
  • unmounted: Appelée lorsque l'élément lié est retiré du DOM.

Voici un exemple simple montrant comment définir et utiliser une directive personnalisée :

Exemple

<template>
  <div v-custom-directive>Ceci est un exemple de directive personnalisée</div>
</template>

<script>
export default {
  directives: {
    // Définir la directive personnalisée
    customDirective: {
      mounted(el) {
        // Lorsque l'élément est inséré dans le DOM, définir la couleur d'arrière-plan sur jaune
        el.style.backgroundColor = 'yellow';
      },
      updated(el) {
        // Lorsque le composant est mis à jour, définir la couleur du texte en rouge
        el.style.color = 'red';
      }
    }
  }
};
</script>

Analyse de code

  1. directivespropriété: Dansscriptviadirectivesla propriété définit une directive nomméecustomDirectivedirective
  2. Fonctions de hook：mountedLa fonction de hook est exécutée lorsque l'élément est inséré dans le DOM, définissant la couleur d'arrière-plan sur jaune;updatedLa fonction de hook est exécutée lorsque le composant est mis à jour, définissant la couleur du texte en rouge.
  3. Utilisation de la directive: Danstemplateviav-custom-directiveutilisez cette directive.

Scénarios d'application des directives personnalisées

Les directives personnalisées sont très utiles dans les scénarios suivants:

  1. Manipulation du DOM: Par exemple, mettre le focus sur un champ de saisie, modifier les styles d'un élément, etc.
  2. Intégration de bibliothèques tierces: Intégrer des bibliothèques tierces (telles quehighlight.js、Chart.js) avec des composants Vue.
  3. Écoute d'événements: Ajout d'écouteurs d'événements spécifiques aux éléments pour implémenter des comportements complexes.

Vue3 选项式 APIVue3 API des options

Autres extensions