Je vous propose de rentrer dans le vif du sujet avec le Chapitre 1 complet de la formation Vue.js, incluant les notions théoriques, les exemples de code, et le résultat final de l’atelier fil rouge.

Chapitre 1 : Découverte de Vue.js

L’objectif de ce premier chapitre est de comprendre les bases de Vue.js, créer un premier composant réactif, et mettre en place l’atelier fil rouge : une page d’accueil avec titre dynamique mis à jour en temps réel via un champ de saisie.

1. Qu’est-ce que Vue.js ?

Vue.js est un framework progressif pour construire des interfaces utilisateur. Il permet de créer des applications simples (comme un composant) ou complexes (Single Page Application, Progessif Web Application) en utilisant des composants réactifs.

2. Structure d’un composant Vue

Un composant Vue 3 (avec <script setup>) est structuré en 3 parties :

• <template> : le HTML dynamique
• <script setup> : la logique (réactivité, méthodes, etc.)
• <style> : les styles (optionnel, avec scoped pour isoler les styles)

3. Réactivité avec ref()

Vue utilise ref() pour créer des variables réactives. Toute modification de ces variables met à jour automatiquement l’interface.

4. Directives de base

• v-bind (ou :) : lie une propriété HTML à une variable
• v-model : crée un binding bidirectionnel entre un champ et une variable
• v-if : affiche ou cache un élément selon une condition
• v-for : boucle sur une liste pour générer des éléments

Exemple de code : App.vue

<!-- App.vue -->
<template>
  <div class="container">
    <h1>{{ message }}</h1>
    <input 
      v-model="message" 
      placeholder="Éditez-moi !" 
      class="input-field"
    />
  </div>
</template>

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

// Variable réactive
const message = ref('Bonjour Vue 3 !')
</script>

<style scoped>
.container {
  padding: 2rem;
  text-align: center;
}

.input-field {
  width: 100%;
  max-width: 300px;
  padding: 0.5rem;
  font-size: 1rem;
  margin-top: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

h1 {
  color: #42b983;
  font-size: 2rem;
}
</style>

Atelier fil rouge : Page d’accueil dynamique

Objectif

Créer une page où :

• Un titre s’affiche (<h1>)
• Un champ de saisie permet de modifier ce titre en temps réel
• Le titre se met à jour automatiquement à chaque frappe

Résultat final

Voici le code complet de App.vue après réalisation de l’atelier :

<!-- App.vue -->
<template>
  <div class="app">
    <header>
      <h1>{{ pageTitle }}</h1>
      <p>Éditez le titre ci-dessous pour le voir changer en direct !</p>
    </header>

    <main>
      <input
        v-model="pageTitle"
        placeholder="Entrez un nouveau titre..."
        class="title-input"
        autofocus
      />
    </main>

    <footer>
      <p>Vue.js — Formation Chapitre 1</p>
    </footer>
  </div>
</template>

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

// Variable réactive pour le titre de la page
const pageTitle = ref('Bienvenue dans votre premier composant Vue !')
</script>

<style scoped>
.app {
  font-family: Arial, sans-serif;
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

header h1 {
  color: #42b983;
  margin-bottom: 0.5rem;
}

header p {
  color: #666;
  font-size: 0.9rem;
}

.title-input {
  width: 100%;
  padding: 0.75rem;
  font-size: 1.1rem;
  border: 2px solid #42b983;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s;
}

.title-input:focus {
  border-color: #2ecc71;
}

footer {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.8rem;
  color: #999;
}
</style>

Explication du résultat

• pageTitle est une variable réactive créée avec ref().
• v-model="pageTitle" lie le champ de saisie à cette variable → toute modification du champ met à jour pageTitle, et vice versa.
• Le <h1> affiche la valeur de pageTitle → il se met à jour automatiquement.
• Le style est simple mais clair, avec un focus sur l’expérience utilisateur.

Testez-le vous-même !

1. Créez un nouveau projet Vue avec Vite :

npm create vite@latest mon-projet-vue -- --template vue
cd mon-projet-vue
npm install
npm run dev

2. Remplacez le contenu de src/App.vue par le code ci-dessus.

3. Ouvrez http://localhost:5173 dans votre navigateur.

4. Tapez dans le champ → le titre change en temps réel 

Prochain chapitre

Chapitre 2 – Composants et props : Apprenez à créer des composants réutilisables et à les connecter entre eux.

Tu as maintenant ton premier composant Vue fonctionnel, réactif et stylé. C’est le socle de toutes les applications Vue !

Tu peux me demander de t’aider à ajouter des fonctionnalités (ex : bouton “Réinitialiser”, compteur de caractères, etc.) ou passer au chapitre suivant.