Vue.js et Typescript: Le Guide Complet des Templates et Directives Essentielles

1. Syntaxe des templates : l’ADN de Vue.js

Vue utilise une syntaxe HTML étendue qui permet de déclarer de manière intuitive comment les données doivent être affichées à l’écran.

• Interpolation avec {{ }} : affichez n’importe quelle variable ou expression JavaScript directement dans votre HTML

<p>Bonjour, {{ utilisateur }} !</p>

• Binding d’attributs avec v-bind (raccourci :) : liez dynamiquement des attributs comme src, class, disabled, etc.

<img :src="avatarUrl" />
<button :disabled="enCours">Envoyer</button>

• Binding d’événements avec v-on (raccourci @) : réagissez aux clics, soumissions, touches du clavier, etc.

<button @click="ajouterTache">Ajouter</button>
<form @submit.prevent="soumettre">...</form>

Ces trois outils forment la base de toute interface interactive en Vue.

2. Le système de réactivité : ref() et reactive()

Vue 3 introduit un système de réactivité basé sur des fonctions JavaScript pures. Plus besoin de magie obscure : tout est explicite.

ref() : utilisé pour les valeurs primitives (nombre, chaîne, booléen).

const compteur = ref(0)
compteur.value++ // Accès via .value dans le script

→ Dans le template, utilisez directement {{ compteur }} (pas de .value).

reactive() : idéal pour les objets et tableaux. Toutes les propriétés deviennent réactives automatiquement.

const utilisateur = reactive({ nom: 'Alice', age: 30 })
utilisateur.age = 31 // Accès direct, sans .value

💡 Règle simple :

• Valeur simple ? → ref()

• Objet structuré ? → reactive()

3. Directives essentielles pour le rendu conditionnel et les listes

• v-if / v-else : affiche ou supprime un élément du DOM selon une condition. Idéal pour les changements rares.

• v-show : masque un élément avec display: none. Parfait pour les bascules fréquentes.

v-for : boucle sur un tableau pour générer une liste d’éléments.

<li v-for="tache in taches" :key="tache.id">
  {{ tache.texte }}
</li>

→ N’oubliez jamais :key pour aider Vue à suivre les changements !

• v-model : la pierre angulaire des formulaires. Crée une liaison bidirectionnelle entre un champ et une variable.

  <input v-model="email" />

  → Quand l’utilisateur tape, email se met à jour. Quand email change en code, le champ se met à jour.

Modificateurs : améliorez le comportement avec des suffixes comme .prevent, .trim, .number, .lazy, etc.

<form @submit.prevent="soumettre">...</form>
<input v-model.trim="nom" />

4. Ateliers pratiques : apprendre en codant

Pour ancrer ces concepts, deux projets concrets vous guident pas à pas :

1. Une liste de tâches (Todo List)

   • Ajouter/supprimer des tâches

   • Marquer comme terminée avec un clic

   • Filtrer les tâches (toutes, actives, terminées)

   • Compter les éléments restants
     → Met en œuvre v-for, v-if, v-model, computed, et la réactivité.

2. Un formulaire de contact simple

   • Champs pour le nom, l’email et un message

   • Validation en temps réel (email valide, message non vide)

   • Bouton désactivé tant que le formulaire est invalide

   • Message de confirmation après soumission
     → Illustre v-model, les conditions réactives, et l’UX moderne.

5. Propriétés calculées avec computed

Au lieu de recalculer une valeur à chaque rendu, computed met en cache le résultat et ne le recalcule que si ses dépendances changent.

const taches = ref([...])
const tachesTerminees = computed(() =>
 taches.value.filter(t => t.termine).length)

→ Plus performant, plus lisible, et entièrement réactif.

🧪 Pourquoi TypeScript ?

Tous les exemples utilisent TypeScript, ce qui permet :

• De détecter les erreurs au moment de l’écriture

• D’avoir une auto-complétion précise dans l’IDE

• De documenter naturellement la structure des données (ex: interface Tache)

🚀 Conclusion

Cette semaine vous donne les clés pour construire n’importe quelle interface utilisateur moderne avec Vue.js 3. Vous comprenez non seulement comment faire, mais aussi pourquoi — ce qui vous rendra autonome très rapidement.

Que vous souhaitiez créer un tableau de bord, une application de gestion, ou un simple formulaire, ces bases vous suivront dans tous vos projets.

Accédez au cours complet, avec code exécutable, explications pas à pas et bonnes pratiques :
👉 https://devinsto.com/formations/vuejs/07-templates-vue