Directives personnalisées - les bases

Bienvenue au Centre de commandement de NOVA LAB ! Année 2087 - les interfaces de la station spatiale exigent un contrôle précis des éléments du DOM. Vue propose des directives personnalisées (Custom Directives) qui te permettent de manipuler directement les éléments à un niveau plus bas que les templates.

Qu'est-ce qu'une directive personnalisée ?

Vue dispose de directives intégrées : v-if, v-for, v-model, v-show. Mais tu peux aussi créer les tiennes ! Les directives personnalisées donnent un accès direct à l'élément du DOM - quelque chose que tu ne peux pas obtenir avec les templates seuls.

Les directives sont un excellent outil quand tu as besoin de :

• mettre automatiquement le focus sur un input
• gérer les clics en dehors d'un élément
• charger les images en lazy-loading
• créer des tooltips personnalisées

Enregistrement global : app.directive()

1const app = createApp(App)
2
3app.directive('focus', {
4  mounted(el) {
5    el.focus()
6  }
7})

Maintenant tu peux utiliser v-focus dans n'importe quel composant :

1<template>
2  <input v-focus placeholder="Auto-focus!" />
3</template>

Enregistrement local

Dans un composant, tu peux enregistrer une directive localement :

1<script setup>
2const vHighlight = {
3  mounted(el) {
4    el.style.backgroundColor = '#00ff88'
5    el.style.padding = '4px 8px'
6    el.style.borderRadius = '4px'
7  }
8}
9</script>
10
11<template>
12  <span v-highlight>Texte important</span>
13</template>

Convention importante : dans <script setup>, une directive locale doit avoir un nom commençant par v (par ex. vHighlight), et dans le template tu l'utilises sous la forme v-highlight (le camelCase est converti en kebab-case).

Hooks du cycle de vie d'une directive

Les directives ont des hooks similaires au cycle de vie d'un composant :

• created - avant que les attributs de l'élément soient liés
• beforeMount - avant que l'élément soit inséré dans le DOM
• mounted - l'élément est déjà dans le DOM (le plus souvent utilisé)
• beforeUpdate - avant la mise à jour du composant parent
• updated - après la mise à jour du composant parent
• beforeUnmount - avant le retrait du DOM
• unmounted - élément retiré du DOM

1app.directive('log', {
2  mounted(el) {
3    console.log('Element added to DOM:', el.tagName)
4  },
5  updated(el) {
6    console.log('Element updated:', el.tagName)
7  },
8  unmounted(el) {
9    console.log('Element removed:', el.tagName)
10  }
11})

Forme abrégée d'une directive

Si tu n'as besoin que de mounted et updated avec la même logique, tu peux utiliser la forme abrégée - une fonction au lieu d'un objet :

1app.directive('color', (el, binding) => {
2  el.style.color = binding.value
3})

C'est équivalent à :

1app.directive('color', {
2  mounted(el, binding) {
3    el.style.color = binding.value
4  },
5  updated(el, binding) {
6    el.style.color = binding.value
7  }
8})

1<script setup>
2import { ref } from 'vue'
3
4// Directive locale v-focus
5const vFocus = {
6  mounted(el) {
7    el.focus()
8  }
9}
10
11// Directive locale v-highlight
12const vHighlight = {
13  mounted(el, binding) {
14    el.style.backgroundColor = binding.value || 'rgba(0, 255, 136, 0.15)'
15    el.style.padding = '4px 8px'
16    el.style.borderRadius = '4px'
17  },
18  updated(el, binding) {
19    el.style.backgroundColor = binding.value || 'rgba(0, 255, 136, 0.15)'
20  }
21}
22
23// Directive locale v-color (forme abrégée)
24const vColor = (el, binding) => {
25  el.style.color = binding.value || '#00ff88'
26}
27
28const searchQuery = ref('')
29const showPanel = ref(true)
30</script>
31
32<template>
33  <div class="nova-lab">
34    <h1>Directives personnalisées - Les bases</h1>
35
36    <section class="section">
37      <h2>v-focus - Focus automatique</h2>
38      <input
39        v-focus
40        v-model="searchQuery"
41        placeholder="Saisis une commande de station..."
42        class="input"
43      />
44      <p class="hint">Cet input reçoit le focus automatiquement</p>
45    </section>
46
47    <section class="section">
48      <h2>v-highlight - Surlignage</h2>
49      <p v-highlight>Surlignage par défaut (vert)</p>
50      <p v-highlight="'rgba(0, 180, 216, 0.2)'">Surlignage cyan</p>
51      <p v-highlight="'rgba(231, 76, 60, 0.2)'">Surlignage rouge</p>
52    </section>
53
54    <section class="section">
55      <h2>v-color - Forme abrégée</h2>
56      <p v-color="'#00ff88'">Texte vert</p>
57      <p v-color="'#00b4d8'">Texte cyan</p>
58      <p v-color="'#e74c3c'">Texte rouge</p>
59    </section>
60  </div>
61</template>
62
63<style scoped>
64.nova-lab {
65  background: #0a0e27;
66  color: #c0c0c0;
67  min-height: 100vh;
68  padding: 20px;
69  font-family: monospace;
70}
71h1 { color: #00ff88; margin-bottom: 20px; }
72h2 { color: #00b4d8; font-size: 16px; margin-bottom: 10px; }
73
74.section {
75  background: rgba(0, 180, 216, 0.05);
76  border: 1px solid rgba(0, 180, 216, 0.2);
77  padding: 15px;
78  border-radius: 8px;
79  margin-bottom: 15px;
80}
81
82.input {
83  background: rgba(0, 255, 136, 0.05);
84  border: 1px solid #00ff88;
85  color: #00ff88;
86  padding: 10px 16px;
87  border-radius: 6px;
88  font-family: monospace;
89  font-size: 14px;
90  width: 100%;
91  box-sizing: border-box;
92}
93.input:focus {
94  outline: none;
95  box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
96}
97.hint {
98  color: #666;
99  font-size: 12px;
100  margin-top: 6px;
101}
102</style>