Rendu de la syntaxe de template

Dans ce chapitre, vous apprendrez à utiliser la syntaxe de template de Vue pour rendre des données JS dans le HTML, ce qui permet à la page d'accueil du blog d'afficher une liste de cartes d'articles.

Expression d'interpolation {{ }}

L'expression d'interpolation est la méthode de liaison de données la plus fondamentale de Vue.

Elle « insère » la valeur d'une variable JS dans le HTML. La syntaxe utilise des doubles accolades qui entourent le nom de la variable.

Exemple

<script setup>
const blogTitle = 'EXAMPLE Frontend Notes'
const author = 'Xiao Ming'
</script>

<template>
  <h1>{{ blogTitle }}</h1>
  <p>Auteur : {{ author }}</p>
  <p>Heure actuelle : {{ new Date().toLocaleDateString() }}</p>
</template>

La page affichera :

EXAMPLE 前端笔记
作者：小明
当前时间：2024/5/15

À l'intérieur des accolades, vous pouvez mettre n'importe quelle expression JS : variables, opérations, expressions ternaires, appels de fonctions - tout cela est autorisé, mais vous ne pouvez pas mettre d'instructions (telles queif、for）。

L'expression d'interpolation ne remplace que le texte à l'intérieur de la balise, pas la balise elle-même. Par exemple,

{{ content }}
in
la balise elle-même n'est pas affectée.

Liaison d'attributs v-bind (raccourci :)

Les expressions d'interpolation ne peuvent être utilisées que pour le contenu des balises, pas pour les attributs HTML.

Pour utiliser des variables JS dans des attributs, vous devez utiliser la directivev-bind.

Exemple

<script setup>
const coverUrl = '/images/vue-cover.png'
const linkUrl = '/post/1'
const isActive = true
</script>

<template>
  <!-- Syntaxe complète : v-bind:attribute="variable" -->
  <img v-bind:src="coverUrl" v-bind:alt="Couverture de l'article">

  <!-- Raccourci : utiliser directement :attribute="variable" -->
  <a :href="linkUrl">Lire l'article complet</a>

  <!-- Classe dynamique : utiliser la syntaxe objet -->
  <div :class="{ active: isActive, 'text-bold': true }">
Ce texte possède à la fois les classes active et text-bold.
  </div>
</template>

La syntaxe abrégée avec deux-pointsest la syntaxe la plus courante ; en développement réel, vous n'utilisez presque jamaisv-bind:le nom complet.

Rendu de liste v-for

La page d'accueil du blog doit afficher plusieurs articles. Un article seul est un objet, et plusieurs articles forment un tableau d'objets.

v-forVous pouvez parcourir le tableau et générer le HTML correspondant pour chaque élément.

Exemple

<script setup>
// Utiliser un tableau d'objets JS pour simuler des données d'articles (sera modifié plus tard pour charger depuis un fichier JSON)
const articles = [
  {
    id: 1,
title: 'Guide complet pour démarrer avec Vue3',
summary: 'Apprenez l’API Composition de Vue3 à partir de zéro, en couvrant les concepts clés tels que ref, reactive, computed.',
    date: '2024-05-10',
    category: 'Vue',
    cover: '/images/vue.png'
  },
  {
    id: 2,
title: 'La programmation asynchrone en JavaScript expliquée',
summary: 'Comprendre Promise, async/await, la boucle d’événements et la file de microtâches en un seul article.',
    date: '2024-05-08',
    category: 'JavaScript',
    cover: '/images/js.png'
  },
  {
    id: 3,
title: 'CSS Grid Layout en pratique',
summary: 'Implémentez facilement des mises en page responsives complexes avec CSS Grid, en abandonnant les limites de float et flexbox.',
    date: '2024-05-05',
    category: 'CSS',
    cover: '/images/css.png'
  }
]
</script>

<template>
  <div class="article-list">
    <!-- v-for="item in array" :key="identifiant unique" -->
    <div v-for="article in articles" :key="article.id" class="card">
      <img :src="article.cover" :alt="article.title">
      <div class="card-body">
        <span class="category">{{ article.category }}</span>
        <h3>{{ article.title }}</h3>
        <p>{{ article.summary }}</p>
        <span class="date">{{ article.date }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.article-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 20px;
}

.card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: transform 0.2s;
}

.card:hover {
  transform: translateY(-4px);
}

.card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.card-body {
  padding: 16px;
}

.category {
  display: inline-block;
  padding: 2px 10px;
  background: #E8EEF5;
  color: #427DB8;
  border-radius: 12px;
  font-size: 12px;
}

.card-body h3 {
  margin: 10px 0 8px;
  font-size: 18px;
}

.card-body p {
  color: #666;
  font-size: 14px;
  line-height: 1;
}

.date {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: #999;
}
</style>

L'importance de l'attribut key

:keyC'est un compagnon essentiel de v-for, indiquant à Vue l'identité de chaque élément.

Lorsque l'ordre du tableau change (par exemple, insertion, suppression, tri), Vue utilise la clé pour déterminer quels nœuds DOM doivent être mis à jour et lesquels peuvent être réutilisés.

Valeur de keyConséquence
Identifiant unique (recommandé)Suit correctement chaque élément et met à jour efficacement
Indice de tableauPeut provoquer une confusion d'état lors de l'insertion/suppression (par exemple, le contenu des champs de saisie est échangé)
Aucune cléLa console émettra un avertissement ; Vue utilise par défaut la stratégie de « mise à jour sur place », qui a de mauvaises performances.

Donnez toujours à v-for une clé unique et stable ; n'utilisez pas l'index comme clé. C'est l'une des habitudes les plus importantes dans le développement avec Vue.

Rendu conditionnel v-if / v-else

Lorsque vous devez afficher un contenu différent selon différentes conditions, utilisez la famille de directivesv-if.

Exemple

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

const articles = ref([]) // liste d'articles (un tableau vide signifie aucune donnée pour le moment)
const isLoading = ref(true) // état de chargement
// Simuler le chargement des données : remplir les données après 2 secondes
setTimeout(() => {
  articles.value = [
{ id: 1, title: 'Premiers pas avec Vue3', summary: '...' },
{ id: 2, title: 'Comparaison avec React', summary: '...' }
  ]
  isLoading.value = false
}, 2000)
</script>

<template>
  <div>
    <!-- Chargement -->
    <p v-if="isLoading">Chargement, veuillez patienter...</p>

    <!-- Afficher la liste lorsqu'il y a des données -->
    <div v-else-if="articles.length > 0">
      <div v-for="article in articles" :key="article.id" class="card">
        <h3>{{ article.title }}</h3>
        <p>{{ article.summary }}</p>
      </div>
    </div>

    <!-- Afficher un état vide lorsqu'il n'y a pas de données -->
    <p v-else>Aucun article pour le moment, restez à l'écoute.</p>
  </div>
</template>

Ce modèle couvre les trois états d'interface utilisateur les plus courants :Chargement → Données présentes → Aucune donnée。

v-if vs v-show

DirectiveMéthode de basculementCoût du rendu initialCoût du basculementCas d'utilisation
v-ifAjoute/supprime des nœuds DOMFaible (ne fait pas de rendu)Élevé (reconstruit le DOM)Scénarios où la condition change rarement, comme le contrôle des permissions
v-showBascule la propriété CSS displayÉlevé (effectue toujours un rendu)Faible (ne modifie que les styles)Scénarios avec basculement fréquent, comme le changement d'onglet

Facile à retenir : utilisez v-show pour un basculement fréquent, utilisez v-if pour des conditions stables.

Exercice pratique : Page d'accueil complète du blog

Combinez la syntaxe de template apprise précédemment et écrivez un composant complet de page d'accueil de blog.

Exemple

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

// Données des articles (actuellement codées en dur ; les chapitres suivants les modifieront pour les charger via fetch)
const articles = ref([
  {
    id: 1,
title: 'Guide complet pour démarrer avec Vue3',
summary: 'Apprenez l’API Composition de Vue3 à partir de zéro, en couvrant les concepts clés tels que ref, reactive, computed.',
    date: '2024-05-10',
    category: 'Vue',
    cover: '/images/vue.png'
  },
  {
    id: 2,
title: 'La programmation asynchrone en JavaScript expliquée',
summary: 'Comprendre Promise, async/await, la boucle d’événements et la file de microtâches en un seul article.',
    date: '2024-05-08',
    category: 'JavaScript',
    cover: '/images/js.png'
  },
  {
    id: 3,
title: 'CSS Grid Layout en pratique',
summary: 'Implémentez facilement des mises en page responsives complexes avec CSS Grid.',
    date: '2024-05-05',
    category: 'CSS',
    cover: '/images/css.png'
  }
])
</script>

<template>
  <div class="home">
    <h2 class="section-title">Derniers articles</h2>

    <!-- Chargement -->
    <p v-if="!articles.length" class="empty-tip">Aucun article pour le moment, restez à l'écoute.</p>

    <!-- Liste des cartes d'articles -->
    <div v-else class="article-grid">
      <div
       v-for="article in articles"
       :key="article.id"
       class="article-card"
     >
        <img :src="article.cover" :alt="article.title" class="card-cover">
        <div class="card-content">
          <span class="card-category">{{ article.category }}</span>
          <h3 class="card-title">{{ article.title }}</h3>
          <p class="card-summary">{{ article.summary }}</p>
          <span class="card-date">{{ article.date }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.home {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
}

.section-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.article-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.card-cover {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.card-content {
  padding: 16px;
}

.card-category {
  display: inline-block;
  padding: 2px 10px;
  background: #E8EEF5;
  color: #427DB8;
  border-radius: 12px;
  font-size: 12px;
  margin-bottom: 8px;
}

.card-title {
  font-size: 18px;
  margin-bottom: 8px;
  color: #222;
}

.card-summary {
  font-size: 14px;
  color: #666;
  line-height: 1;
  margin-bottom: 12px;
}

.card-date {
  font-size: 12px;
  color: #999;
}

.empty-tip {
  text-align: center;
  color: #999;
  padding: 60px 0;
  font-size: 16px;
}
</style>

Résumé du chapitre

Dans ce chapitre, vous avez découvert quatre fonctionnalités essentielles de la syntaxe des templates :{{ }}interpolation pour afficher des données,v-bind(raccourci:) pour lier des attributs,v-forboucles pour afficher des listes,v-if/v-elseconditionnelles pour contrôler la visibilité.

À ce stade, la page d’accueil du blog peut déjà afficher dynamiquement des cartes d’articles à partir des données JS.

Autres extensions