Initiation à la syntaxe de template

Introduction

La syntaxe de template de Vue permet de décrire l'affichage d'une interface à partir de données définies dans la partie <script>. On utilise principalement les moustaches pour interpoler du texte (c'est-à-dire insérer la valeur d'une expression dans le code HTML) et des directives pour ajouter des comportements au gabarit.

Les moustaches {{ }}

La liaison de données la plus simple consiste à afficher du texte avec les moustaches, c'est-à-dire les doubles accolades {{ }}. Elle permet, entre autres choses, d'afficher, dans la partie <template>, la valeur d'une variable déclarée dans la partie <script>.

L'exemple suivant va afficher un paragraphe contenant le texte "Bonjour à tous".


                <script setup>
                const message = 'Bonjour à tous';
                </script>

                <template>
                    <p>{{ message }}</p>
                </template>

Les valeurs affichées avec les moustaches sont automatiquement échappées. Cela signifie que si la variable contient du code HTML, Vue l'affichera comme du texte brut plutôt que de l'interpréter comme une balise. Ce comportement protège contre l'injection de code malveillant (XSS) et garantit que seules les données sont affichées, pas du HTML non prévu.

L'exemple suivant affiche un paragraphe contenant le texte "<b>Bonjour</b> à tous" sans interpréter la balise <b>, car les moustaches de Vue échappent automatiquement le HTML.


                <script setup>
                const message = '<b>Bonjour</b> à tous';
                </script>

                <template>
                    <p>{{ message }}</p>
                </template>

Une moustache expressive

Les moustaches ne servent pas seulement à afficher des variables. On peut y placer n'importe quelle expression JavaScript, autrement dit une valeur ou une instruction dont le résultat produit une valeur (littérale, variable, calcul, opérateur ternaire, appel de fonction pure et synchrone, etc.). Vue transforme automatiquement ce résultat en texte pour l'affichage. Pour savoir si une expression peut être utilisée, imaginez-la écrite juste après le mot-clé return dans une fonction, si cela fonctionne, elle est valable dans les moustaches.

Dans l'exemple suivant, chaque moustache illustre des expressions valides :


                <script setup>
                const ageLegal = 18
                const utilisateur = { prenom: 'Alice', nom: 'Martin', age: 31 }

                const direBonjour = () => 
                {
                    return `Bonjour ${utilisateur.prenom} ${utilisateur.nom}!`
                }

                const doublerValeur = (valeur) => 
                {
                    return valeur * 2
                }
                </script>

                <template>
                    <!-- Afficher la valeur d'une variable -->
                    <p>L'âge légal est fixé à {{ ageLegal }} ans.</p>

                    <!-- Afficher les propriétés d'objet -->
                    <p>{{ utilisateur.prenom }} {{ utilisateur.nom }}</p>

                    <!-- Faire un calcul -->
                    <p>{{ ageLegal * 2 }}</p>

                    <!-- Utiliser un opérateur ternaire -->
                    <p>{{ utilisateur.age < ageLegal ? 'Vous êtes mineur!' : 'Vous êtes majeur!' }}</p>

                    <!-- Appeler une fonction sans paramètres -->
                    <p>{{ direBonjour() }}</p>

                    <!-- Appeler une fonction avec paramètres -->
                    <p>{{ doublerValeur(10) }}</p>
                </template>

Même si Vue accepte les expressions directement dans le <template>, il est préférable de ne pas en abuser. Le rôle du gabarit est de rester clair et lisible. On y décrit ce qui doit être affiché plutôt que comment le calculer. Vous pouvez bien sûr utiliser de petites expressions simples (un calcul rapide, une propriété d'objet, une mise en forme basique), mais pour toute logique plus développée, il est recommandé de préparer la valeur directement dans la partie <script>.

Les directives

Une directive est un attribut spécial, toujours préfixé par <v->. Elle permet d'ajouter un comportement particulier à un élément du bloc <template>. En clair, la directive indique au moteur de rendu comment traiter l'élément ciblé, tout en restant concise et lisible, sans avoir à écrire du JavaScript trop verbeux.

Par exemple, dans la section sur les moustaches, nous avons vu que leur contenu était automatiquement échappé. Mais dans certains cas, on peut vouloir insérer du code HTML stocké dans une variable, comme un extrait de texte formaté provenant d'une base de données. Pour cela, on utilise la directive v-html, qui demande explicitement à Vue d'interpréter la valeur comme du code HTML :


                <script setup>
                const messageHtml = '<b>Bonjour</b>';
                </script>

                <template>
                    <p>Avec moustaches : {{ messageHtml }}</p>
                    <p>Avec v-html : <span v-html="messageHtml"></span></p>
                </template>

Dans cet exemple, le premier paragraphe affiche littéralement "<b>Bonjour</b>", tandis que le second interprète les balises et affiche le mot "Bonjour" en gras. L'utilisation de v-html doit rester limitée aux cas où le contenu est sûr et contrôlé, car elle peut ouvrir la porte à des attaques si les données proviennent d'une source non fiable.

Tout comme les moustaches, les directives peuvent recevoir n'importe quelle expression JavaScript qui retourne . Cela permet par exemple d'évaluer une propriété, un calcul ou même le résultat d'un appel de fonction :


                <script setup>
                const prix = 12
                </script>

                <template>
                    <p v-html="prix < 20 ? '<i>Petit prix</i>' : '<i>Trop cher</i>'"></p>
                </template>

Dans cet exemple, l'expression conditionnelle est évaluée directement dans l'attribut v-html. Si la valeur de prix est inférieure à 20, le texte "Petit prix" est affiché en italique. Dans le cas contraire, c'est le texte "Trop cher" qui apparaît. Cela illustre que v-html peut recevoir toute expression JavaScript et interpréter le résultat comme du HTML.

Exercices

Créer un nouveau projet Vue nommé vuejs01-initiation-syntaxe-template en suivant la procédure décrite dans le chapitre dédié. Tous les exercices de cette page peuvent être réalisés dans ce projet, directement les uns à la suite des autres dans le fichier App.vue.

Exercice 1 : Affichage simple

Objectif : Se familiariser avec les moustaches {{ }} en initialisant une variable dans la partie <script> et lui affichant sa valeur dans la partie <template> (HTML).

Instructions :

Ajouter le code suivant dans le fichier App.vue vant de le compéter :


                        <script setup>
                        </script>

                        <template>
                            <h1>Vue.js 01 : Initiation à la syntaxe de template</h1>
                            <h2>Exo 01</h2>
                            <p>Bonjour<!-- Afficher le contenu de la variable 'message' ici! -->!</p>
                        </template>

Dans la partie <script>, déclarer une variable nommée message et lui attribuer la valeur "IFOSUP".
Dans la partie <template>, utiliser les moustaches {{ }} pour afficher la valeur de message dans le paragraphe (<p>) entre le mot "Bonjour" et le caractère "!".
Observer le rendu dans le navigateur.

Exercice 2 : La directive v-html

Objectif : Comprendre la différence entre l'affichage d'une chaîne contenant du HTML avec les moustaches {{ }} (échappement automatique) et l'affichage avec la directive v-html (sans échappement).

Instructions :

Dans la partie <script>, initialiser une variable nommée contenuHtml et lui attribuer la valeur "<b>Ceci est du texte en gras!</b>".
Dans la partie <template>, ajouter un sous-titre <h2> avec le texte "Exo 02".
Ajouter une liste non ordonnée (<ul>) avec deux éléments :
- Un <li> commençant par le texte "Avec échappement :" suivi de la variable contenuHtml affichée avec des moustaches {{ }}.
- Un <li> commençant par le texte "Sans échappement :" suivi de la variable contenuHtml affichée avec la directive v-html.
Observer le rendu dans le navigateur et comparer.

Exercice 3 : Effectuer un calcul simple

Objectif : Découvrir que les moustaches {{ }} peuvent contenir des expressions JavaScript, comme des opérations arithmétiques.

Instructions :

Dans la partie <script>, initialiser un tableau nommé notes avec les valeurs 7, 5 et 8.
Dans la partie <template>, ajouter un sous-titre <h2> avec le texte "Exo 03".
Ajouter un paragraphe qui affiche le texte suivant : "La moyenne des notes est : " suivi du résultat du calcul avec les moustaches {{ }}.
Observer le rendu dans le navigateur : le calcul doit être effectué automatiquement et afficher le résultat correct.

Exercice 4 : Utiliser une expression ternaire

Objectif : Apprendre à afficher un contenu différent en fonction d'une condition grâce à l'opérateur ternaire dans les moustaches {{ }}.

Instructions :

Dans la parte <script>, initialiser un objet nommé produit avec les propriétés suivantes :
- nom : 'Casque audio'
- stock : 5
Dans la partie <template>, ajouter un sous-titre <h2> avec le texte "Exo 04".
Ajouter un paragraphe qui affiche :
"Produit : [nom du produit] - " suivi d'un message conditionnel grâce à une expression ternaire :
- Si la valeur de la propriété stock est supérieur à 0, afficher "En stock".
- Sinon, afficher "Rupture de stock".
Modifier la valeur de la propriété stock et observer le rendu dans le navigateur (le message doit s'adapter automatiquement).

Exercice 5 : Appeler une fonction dans le template

Objectif : Découvrir qu'il est possible d'appeler une fonction définie dans la section <script> directement depuis le <template>, pour afficher le résultat de son retour.

Instructions

Dans la partie <script>, créer un nouvel objet littéral nommé panier avec deux propriétés quantite: 3 et prixUnitaire: 12.
Écrire une fonction nommée calculerTotal() qui ne prend aucun argument et retourne le montant total (quantité * prix unitaire).
Dans la partie <template>, ajouter un sous-titre <h2> avec le texte "Exo 05".
Ajouter un paragraphe qui affiche Total du panier : suivi de l'appel à la fonction calculerTotal() puis le symbole €.
Modifier la valeur de quantite ou de prixUnitaire et observer le rendu dans le navigateur.