Directives personnalisées
Enregistrez des directives globales et locales avec des hooks de cycle de vie comme mounted et updated afin d’encapsuler la logique de manipulation du DOM en dehors des composants.
Directives personnalisées est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Que sont les directives ?
Les directives sont une logique réutilisable de manipulation du DOM, attachée aux éléments grâce au préfixe v-. Exemples intégrés : v-if, v-for, v-model et v-show. Les directives personnalisées vous permettent de créer les vôtres.
Cas d'utilisation : mise au point automatique
Une directive peut encapsuler de petites opérations de manipulation du DOM qui ne justifient pas la création d'un composant conteneur.
<template>
<input v-focus>
</template>
<script setup>
const vFocus = {
mounted: (el) => el.focus()
};
</script>Enregistrement local d'une directive
Dans <script setup>, déclarez les directives avec le préfixe v : Vue les enregistre automatiquement localement.
<script setup>
const vColor = {
mounted: (el, binding) => {
el.style.color = binding.value;
}
};
</script>
<template>
<p v-color="'red'">Hello</p>
</template>Enregistrement global d'une directive
Utilisez app.directive(name, definition) pour rendre une directive disponible partout.
// main.ts
const app = createApp(App);
app.directive('focus', {
mounted: (el) => el.focus()
});
app.mount('#app');Accroches du cycle de vie d'une directive
Les directives disposent d'accroches qui reprennent le cycle de vie des composants : created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount et unmounted.
const vColor = {
beforeMount(el, binding) {
el.style.color = binding.value;
},
updated(el, binding) {
el.style.color = binding.value;
}
};L'objet binding
Les accroches reçoivent un objet binding : value, oldValue, arg, modifiers et instance.
<p v-pin:bottom.left="200">Pinned</p>
// binding inside the directive:
// { value: 200, oldValue: ..., arg: 'bottom', modifiers: { left: true } }Exemple concret : v-click-outside
Une directive courante : appeler un gestionnaire lorsque l'utilisateur clique en dehors de l'élément.
const vClickOutside = {
mounted(el, binding) {
el._handler = (e) => {
if (!el.contains(e.target)) binding.value(e);
};
document.addEventListener('click', el._handler);
},
unmounted(el) {
document.removeEventListener('click', el._handler);
}
};
// Usage:
<div v-click-outside="closeMenu">...</div>Exemple concret : v-tooltip
Attachez une info-bulle Tippy/Popper via une directive : vos modèles restent ainsi clairs.
import tippy from 'tippy.js';
const vTooltip = {
mounted(el, binding) {
el._tippy = tippy(el, { content: binding.value });
},
updated(el, binding) {
el._tippy?.setContent(binding.value);
},
unmounted(el) {
el._tippy?.destroy();
}
};v-debounce : limiter les événements de saisie
Ajoutez un mécanisme anti-rebond autour du gestionnaire @input d'un champ de saisie avec une directive personnalisée.
const vDebounce = {
mounted(el, binding) {
let timer;
el.addEventListener('input', () => {
clearTimeout(timer);
timer = setTimeout(() => binding.value(el.value), 300);
});
}
};
<input v-debounce="search">Directive, composant ou composable
Composables : logique avec état (données, références). Composants : structure d'interface réutilisable avec leur propre modèle. Directives : comportement DOM pur sur un élément existant. Choisissez une directive lorsqu'aucun modèle ni balisage n'est nécessaire.
Considérations de performance
Les directives s'exécutent à chaque mise à jour. Gardez-les légères. Pour les opérations coûteuses, conditionnez-les à binding.value !== binding.oldValue afin d'éviter le travail inutile.
Vérification rapide
Quelle est la différence entre l'utilisation d'une directive Vue et celle d'un composant Vue pour ajouter un comportement ?
Récapitulatif : directives personnalisées
Logique DOM réutilisable préfixée par v. Enregistrez-la localement (constante vName dans script setup) ou globalement (app.directive). Accroches du cycle de vie : mounted, updated et unmounted. binding fournit value, oldValue, arg et modifiers. Utilisez les directives pour un comportement DOM pur (focus, click-outside, info-bulle, anti-rebond). Les composants servent au balisage ; les composables, à la logique avec état ; les directives, à enrichir le DOM.
Questions Fréquemment Posées
La leçon « Directives personnalisées » est-elle gratuite ?
Oui — le texte complet de « Directives personnalisées » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Directives personnalisées » ?
Enregistrez des directives globales et locales avec des hooks de cycle de vie comme mounted et updated afin d’encapsuler la logique de manipulation du DOM en dehors des composants. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Directives personnalisées » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- provide() et inject() pour l’injection de dépendances
- Composants asynchrones et Suspense
- Directives personnalisées
- Système de plugins : app.use()