07- Semaine 2 : Syntaxe de Base

5. Templates Vue - Interpolation {{ }} et directives de base

Bienvenue dans la deuxième semaine de votre apprentissage de Vue.js avec TypeScript ! Cette semaine, nous allons explorer la syntaxe de base des templates Vue, en mettant l’accent sur l’interpolation et les directives essentielles. Ces concepts sont fondamentaux pour créer des applications interactives et dynamiques avec Vue.js. Nous veillerons à intégrer TypeScript et le typage pour garantir une meilleure sécurité et une meilleure maintenabilité du code.

---

1. Syntaxe de templating

Les templates Vue sont la structure HTML de vos composants. Ils permettent de lier les données de votre application à l’interface utilisateur de manière déclarative. Avec Vue, vous pouvez :

• Afficher des données dynamiquement.
• Lier des attributs HTML à des variables.
• Gérer les événements utilisateur (comme les clics ou les saisies).

---

2. Interpolation avec {{ }}

L’interpolation est la façon la plus simple d’afficher des données dynamiques dans un template. Elle utilise la syntaxe {{ }} pour insérer des valeurs directement dans le HTML.

---

Règles importantes :

• L’expression à l’intérieur de {{ }} doit être une expression JavaScript simple, pas des déclarations (pas if, pas for, pas let x = …).
• On ne peut pas utiliser l’interpolation dans les attributs HTML (ex : dans href="..."). Pour les attributs, on utilisera v-bind.

Exemple simple :

<template>
    <div>
        <p>Bonjour, {{ nom }} !</p>
    </div>
</template>

<script setup lang="ts">
const nom: string = 'Owen';
</script>

Explication :

• {{ nom }} affiche la valeur de la variable nom (ici, “Owen”).
• Si nom change, le contenu du paragraphe se met à jour automatiquement.

Exemple dans la vie réelle :

Imaginez une application de gestion de tâches où vous affichez le nom de l’utilisateur connecté :

<template>
    <div>
        <h1>Bienvenue, {{ utilisateur.nom }} !</h1>
        <p>Vous avez {{ utilisateur.taches.length }} tâches en cours.</p>
    </div>
</template>

<script setup lang="ts">
interface Utilisateur {
    nom: string;
    taches: string[];
}

const utilisateur: Utilisateur = {
    nom: 'Eva',
    taches: ['Faire les courses', 'Réviser Vue.js'],
};
</script>

L’interface Utilisateur que vous avez définie est une structure de données en TypeScript qui décrit la forme d’un objet représentant un utilisateur. Elle est utilisée pour garantir que les objets de type Utilisateur respectent une certaine structure et contiennent des propriétés spécifiques avec des types bien définis. Voici une explication détaillée de cette interface :

---

a. Définition de l’interface Utilisateur

interface Utilisateur {
    nom: string;
    taches: string[];
}

• interface : Mot-clé en TypeScript pour définir une structure de données.
• Utilisateur : Nom de l’interface.
• nom: string; : Une propriété nommée nom de type string. Elle représente le nom de l’utilisateur.
• taches: string[]; : Une propriété nommée taches de type tableau de chaînes de caractères (string[]). Elle représente une liste de tâches associées à l’utilisateur.

---

b. À quoi sert cette interface ?

Cette interface permet de :

• Garantir la cohérence des données : Tout objet de type Utilisateur doit avoir une propriété nom (une chaîne de caractères) et une propriété taches (un tableau de chaînes).
• Faciliter le développement : Elle aide les développeurs à éviter des erreurs en vérifiant que les objets respectent la structure attendue.
• Améliorer la lisibilité : Elle rend le code plus clair en documentant explicitement la forme des objets Utilisateur.
• Bénéficier de l’autocomplétion : Les éditeurs de code comme VS Code peuvent fournir des suggestions basées sur l’interface, ce qui accélère le développement.

f. En bref

L’interface Utilisateur est un outil puissant pour structurer et valider les données dans vos applications TypeScript. Elle garantit que vos objets respectent une certaine forme, ce qui améliore la qualité et la maintenabilité de votre code. En l’utilisant dans des frameworks comme Vue.js, vous pouvez créer des applications plus robustes et faciles à comprendre.

3. Binding d’attributs avec v-bind

v-bind permet de lier des attributs HTML à des variables ou expressions JavaScript. Par exemple, vous pouvez lier l’attribut src d’une image ou la classe CSS d’un élément.

Syntaxe :

<template>
    <img v-bind:src="urlImage" alt="Description" />
</template>

<script setup lang="ts">
const urlImage: string = 'https://exemple.com/image.jpg';
</script>

Explication :

• v-bind:src lie l’attribut src à la variable urlImage.
• Vous pouvez aussi utiliser la syntaxe raccourcie :src.

Exemple dans la vie réelle :

Dans une application de météo, vous pouvez lier l’icône de la météo à une URL dynamique :

<template>
    <div>
        <img :src="iconeMeteo" alt="Météo actuelle" />
        <p>{{ descriptionMeteo }}</p>
    </div>
</template>

<script setup lang="ts">
const iconeMeteo: string = 'https://exemple.com/soleil.png';
const descriptionMeteo: string = 'Ensoleillé';
</script>

---

4. Binding d’événements avec v-on

v-on permet de gérer les événements utilisateur, comme les clics, les saisies ou les soumissions de formulaire.

🎯 Pourquoi ne pas utiliser {{ }} dans les attributs ?

Parce que les attributs HTML (comme href, src, class, alt, etc.) ne prennent pas de texte brut dans Vue ; les interpolations {{ }} ne sont pas évaluées dans ces attributs. Vue ne les interprète pas à cet endroit.

Au lieu de cela, on utilise la directive v-bind pour “lier” une expression à un attribut. La syntaxe peut être :

v-bind:attribut="expression"

Mais il y a un raccourci très utilisé :

:attribut="expression"

Syntaxe :

<template>
    <button v-on:click="direBonjour">Cliquez-moi !</button>
</template>

<script setup lang="ts">
function direBonjour(): void {
    alert('Bonjour !');
}
</script>

Explication :

• v-on:click écoute l’événement click sur le bouton et appelle la fonction direBonjour.
• Vous pouvez aussi utiliser la syntaxe raccourcie @click.

Exemple dans la vie réelle :

Dans une application de liste de courses, vous pouvez ajouter un bouton pour supprimer un article :

<template>
    <ul>
        <li v-for="(article, index) in articles" :key="index">
            {{ article }}
            <button @click="supprimerArticle(index)">Supprimer</button>
        </li>
    </ul>
</template>

<script setup lang="ts">
const articles: string[] = ['Pommes', 'Bananes', 'Pain'];

function supprimerArticle(index: number): void {
    articles.splice(index, 1);
}
</script>

Modificateurs

Les modificateurs sont des suffixes spéciaux désignés par un point, qui indiquent qu’une directive doit être liée d’une manière spéciale. Par exemple, le modificateur .prevent indique à la directive v-on d’appeler event.preventDefault() sur l’événement déclenché :

<form @submit.prevent="onSubmit">...</form>

Ici, le modificateur .prevent indique à Vue d’appeler event.preventDefault() pour l’événement submit avant d’exécuter la méthode onSubmit. Vous pouvez enchaîner plusieurs modificateurs :

Et enfin, voici la syntaxe complète de la directive visualisée :

---

Ces concepts sont la base de tout projet Vue.js. Avec ces outils et l’intégration de TypeScript, vous pouvez déjà créer des interfaces utilisateur dynamiques, réactives et sécurisées. Dans les prochaines semaines, nous explorerons des fonctionnalités plus avancées pour enrichir vos applications ! 🚀

Résumé des notions vues

Syntaxe / Directive	Utilisation	Exemple
{{ }} (interpolation)	Afficher une donnée / expression dans le template	<p>{{ message }}</p>
v-bind / :	Lier une expression à un attribut	<img :src="imageUrl" />
v-on / @	Écouter un événement DOM	<button @click="handleClick">Clique</button>

Avec ces bases, tu peux déjà construire des interfaces dynamiques, réactives, et élégantes en Vue.

6. Conclusion

1. Interpolation {{ }} : Affichez des données dynamiques dans vos templates.
2. v-bind : Liez des attributs HTML à des variables ou expressions.
3. v-on : Gérez les événements utilisateur pour rendre votre application interactive.