Les directives personnalisées vous permettent d'étendre les fonctionnalités de vos pages Web Vue de manière évolutive et modulaire.
Les directives sont des constructions de programmation qui spécifient comment les interpréteurs et les compilateurs doivent traiter les entrées pour une opération. Les directives Vue étendent les fonctionnalités des éléments HTML dans les modèles Vue, permettant une manipulation directe du DOM.
Vous pouvez utiliser des directives dans Vue pour ajouter des écouteurs d'événements, entre autres opérations. Vous attacherez des attributs supplémentaires aux éléments HTML pour utiliser des directives dans votre application.
La structure des directives Vue
Les directives dans Vue ont un v- préfixe pour les distinguer des attributs HTML normaux. Le v- Le préfixe indique au compilateur Vue que l'attribut est une directive Vue afin qu'il puisse traiter et appliquer le comportement de cette directive à l'élément HTML.
Voici un exemple qui illustre l'utilisation de v-spectacle attribut pour afficher le contenu d'un h2 élément:
"vrai">Bonjour Vue</h2>
Vue.js a beaucoup plus de directives intégrées comme liaison v, v-si, et v-sur, vous permettant d'effectuer des tâches telles que liaison de données, rendu conditionnel, gestion des événements, et plus.
Définir des directives personnalisées dans Vue
Vous pouvez définir des directives personnalisées pour ajouter de nouvelles fonctionnalités réutilisables pour vos applications Vue.js. La création de directives personnalisées nécessite deux étapes principales. Tout d'abord, vous enregistrerez la directive localement ou globalement. Ensuite, vous définirez le comportement de la directive avec des hooks de cycle de vie.
Enregistrement des directives personnalisées
Vous pouvez enregistrer une directive personnalisée dans Vue localement ou globalement, selon sa portée prévue. Cependant, il est plus courant d'enregistrer les directives à l'échelle mondiale. Cela garantit que les directives sont disponibles partout dans votre application Vue.
Vous pouvez enregistrer des directives personnalisées localement si vous avez l'intention d'utiliser la directive personnalisée dans un simple composant Vue. Voici comment vous pouvez enregistrer un v-changer de couleur directive localement :