Composants monofichiers et syntaxe des templates

Créer un projet Vue

Vue est un framework JavaScript progressif pour construire des interfaces : on peut l’ajouter à une page existante ou bâtir une application complète. Le point de départ recommandé est l’outil officiel create-vue, basé sur Vite :

npm create vue@latest     # questions : TypeScript, puis Router, Pinia, Vitest…
cd mon-projet
npm install
npm run dev               # serveur de développement Vite avec rechargement à chaud

Le projet utilise Vue 3.5 et Vite 8 (Node.js 22.18 ou plus récent ; la LTS actuelle, Node 26, convient). La première question, « Use TypeScript? », est cochée Yes par défaut : ce cours étant écrit en JavaScript, répondez No. On peut aussi tout indiquer en ligne de commande : npm create vue@latest mon-projet -- --router --pinia --vitest crée directement un projet JavaScript avec ces options (ajoutez --ts pour TypeScript).

Le projet contient src/main.js, qui crée l’application (createApp(App).mount('#app')), et des fichiers .vue : les composants monofichiers (Single-File Components).

Anatomie d’un composant

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

const titre = 'Mes tâches'
const taches = ref([
  { id: 1, libelle: 'Acheter du pain', faite: false },
  { id: 2, libelle: 'Réviser Vue', faite: true },
])
function basculer(tache) {
  tache.faite = !tache.faite
}
</script>

<template>
  <h1>{{ titre }}</h1>
  <ul>
    <li v-for="tache in taches" :key="tache.id" :class="{ faite: tache.faite }">
      <label>
        <input type="checkbox" :checked="tache.faite" @change="basculer(tache)" />
        {{ tache.libelle }}
      </label>
    </li>
  </ul>
  <p v-if="taches.length === 0">Aucune tâche.</p>
</template>

<style scoped>
.faite { text-decoration: line-through; }
</style>

• <script setup> est la syntaxe recommandée avec la Composition API : toute variable, fonction ou composant importé y est directement disponible dans le template.
• <template> décrit le HTML, enrichi par la syntaxe de Vue.
• <style scoped> limite les styles à ce composant.

ref() rend une valeur réactive : quand elle change, Vue met à jour l’affichage. La leçon suivante détaille la réactivité.

Interpolation et liaisons

• {{ expression }} affiche une expression JavaScript (pas une instruction : pas de if ni de for).
• v-bind:attribut ou son raccourci :attribut lie un attribut à une expression : :disabled="panierVide", :href="url".
• v-on:evenement ou @evenement écoute un événement : @click="ajouter", @submit.prevent="envoyer" (le modificateur .prevent appelle preventDefault()).
• v-model crée une liaison bidirectionnelle avec un champ : <input v-model="recherche" />.

Rendu conditionnel et listes

v-if / v-else-if / v-else créent ou détruisent l’élément ; v-show le garde dans le DOM et le masque avec display: none. On préfère v-show pour un élément basculé très souvent, v-if pour un contenu rarement affiché ou coûteux.

v-for répète un élément pour chaque entrée d’une liste. Il exige une :key unique et stable, typiquement l’identifiant de l’élément. Avec l’index comme clé, Vue réutilise les mauvais éléments quand on trie ou supprime, et l’état interne (un champ en cours de saisie) se retrouve sur la mauvaise ligne. Évitez aussi v-if et v-for sur le même élément : filtrez plutôt la liste en amont.

Classes et styles dynamiques

:class accepte un objet (la classe est appliquée si la valeur est vraie) ou un tableau :

<button :class="['btn', `btn--${variante}`, { 'btn--desactive': desactive }]">

Extraire la logique d’affichage

Un template doit rester lisible. Dès qu’une expression devient complexe (filtrer selon un critère, construire des classes, formater un libellé), placez-la dans une fonction pure : elle reçoit des données et renvoie un résultat, sans effet de bord. Elle se teste sans navigateur et se réutilise :

// src/logique/taches.js
export function filtrerTaches(taches, filtre) {
  if (filtre === 'actives') return taches.filter((t) => !t.faite)
  if (filtre === 'faites') return taches.filter((t) => t.faite)
  return taches
}

Le composant l’utilise ensuite dans le template ou, mieux, dans une propriété calculée (computed), vue à la leçon suivante. C’est ce que vous pratiquerez dans les exercices de code de ce cours : la logique en JavaScript pur, les composants dans des tâches pratiques.

À retenir

Composant = script + template + style. : pour lier, @ pour écouter, v-if/v-show pour afficher, v-for avec une :key stable pour répéter, et une logique d’affichage extraite en fonctions pures.