Le template et les directives

Ce que tu vas apprendre

• Afficher une valeur avec {{ }} et lier un attribut avec v-bind.
• Réagir à un clic avec v-on.
• Afficher selon une condition (v-if) et répéter un élément (v-for avec key).

Afficher une valeur : l'interpolation

L'interpolation insère une valeur JavaScript dans le texte, avec des doubles accolades :

<script setup>
const titre = 'Tarte aux pommes'
</script>

<template>
  <h2>Recette : {{ titre }}</h2>
</template>

Si titre change, le texte se met à jour. Entre les accolades, tu peux écrire une expression JavaScript, par exemple {{ titre.toUpperCase() }}.

Lier un attribut : v-bind

Les accolades ne fonctionnent pas dans un attribut HTML. Pour y mettre une valeur JavaScript, on utilise une directive : un attribut spécial de Vue, qui commence par v-.

<script setup>
const image = '/tarte.jpg'
const id = 'photo-tarte'
</script>

<template>
  <img v-bind:src="image" alt="Une tarte" />
  <img :src="image" alt="Une tarte" />
  <img :id />
</template>

v-bind:src se raccourcit en :src. Quand le nom de l'attribut est le même que celui de la variable, on peut même écrire :id, comme dans la dernière ligne (Vue 3.4 et suivants).

Réagir à un événement : v-on

v-on attache une fonction à un événement du navigateur. Son raccourci est @.

<script setup>
import { ref } from 'vue'

const portions = ref(4)

function ajouter() {
  portions.value++
}
</script>

<template>
  <p>Pour {{ portions }} personnes</p>
  <button @click="ajouter">Une portion de plus</button>
</template>

Entre guillemets, tu peux donner un nom de fonction (@click="ajouter") ou une courte instruction (@click="portions++").

Afficher selon une condition : v-if

v-if affiche l'élément seulement si la condition est vraie. v-else-if et v-else donnent les autres cas.

<template>
  <p v-if="portions > 8">Recette pour un banquet</p>
  <p v-else-if="portions > 2">Recette pour la famille</p>
  <p v-else>Recette pour une ou deux personnes</p>
</template>

Pour conditionner plusieurs éléments à la fois, entoure-les d'un <template v-if="...">. Cette balise n'apparaît pas dans la page finale.

v-if ou v-show ?

v-show affiche aussi selon une condition, mais d'une autre manière.

v-show ne fonctionne pas sur <template> et ne se combine pas avec v-else.

Répéter un élément : v-for

v-for crée un élément par entrée d'un tableau.

<script setup>
import { ref } from 'vue'

const recettes = ref([
  { id: 1, nom: 'Tarte aux pommes' },
  { id: 2, nom: 'Soupe à l\'oignon' },
  { id: 3, nom: 'Crêpes' }
])
</script>

<template>
  <ul>
    <li v-for="recette in recettes" :key="recette.id">
      {{ recette.nom }}
    </li>
  </ul>
</template>

Pour récupérer aussi la position, écris v-for="(recette, index) in recettes". L'index commence à 0.

Pourquoi la key ?

L'attribut :key donne à chaque élément une identité unique. Sans lui, Vue réutilise les éléments existants dans l'ordre. C'est gênant si les éléments contiennent des composants ou des champs de saisie : le texte tapé dans un champ peut se retrouver dans la mauvaise ligne après un tri.

Prends un identifiant propre à chaque donnée, comme recette.id. La clé doit être un nombre ou du texte, pas un objet.

À retenir

• {{ valeur }} affiche une valeur dans le texte, :attribut="valeur" dans un attribut.
• @click="fonction" écoute un événement, @ est le raccourci de v-on:.
• v-if, v-else-if et v-else créent ou détruisent des éléments ; v-show change seulement le CSS.
• v-for="x in liste" répète un élément, et chaque élément reçoit une :key unique.
• v-html n'est jamais sûr avec du contenu venant d'un utilisateur.