Qu'est-ce que Vue.js ?

Bienvenue dans la Launch Zone du NOVA LAB ! Je suis le Dr Nova et je serai ton mentor. C'est ici que nous initialisons tous les systèmes qui s'envoleront vers Mars. Vue.js est le framework qui alimente les interfaces de notre mission - des panneaux de contrôle aux systèmes de survie.

Imagine un panneau de survie construit sans aucun framework. Le niveau d'oxygène change toutes les quelques secondes, et chaque nouveau relevé doit être écrit à la main au bon endroit de la page :

1// Sans framework : chaque relevé est une mise à jour manuelle de l'écran
2const oxygenDisplay = document.querySelector('#oxygen')
3oxygenDisplay.textContent = '98.5%'

Ce code fonctionne, mais une seule fois. Au relevé suivant, tu dois de nouveau retrouver l'élément et remplacer son texte - et ainsi pour chaque indicateur, car le nombre dans le code et l'inscription à l'écran ne sont reliés d'aucune façon. Vue inverse cette logique : tu décris ce que l'écran doit afficher pour les données de la mission, et le framework veille lui-même à ce que l'image corresponde toujours à ces données.

Ce que tu vas apprendre

• ce qu'est Vue.js et pourquoi on l'appelle un framework progressif,
• à quoi ressemble le composant le plus simple avec ref() et les moustaches {{ }},
• sur quoi reposent les trois protocoles du NOVA LAB,
• ce qu'a apporté Vue 3 et quels outils composent l'écosystème de la mission.

Vue.js - Le framework des missions spatiales

Vue.js (prononcé /vjuː/, comme le mot anglais "view") est un framework JavaScript progressif pour construire des interfaces utilisateur. Il a été créé par Evan You, et sa première version est sortie en 2014. En 2087, il est toujours utilisé car il a fait ses preuves dans les conditions les plus extrêmes - dans l'espace.

Pourquoi "progressif" ?

Vue peut être adopté de façon progressive - d'une interface simple à un système avancé de contrôle de vaisseau. C'est comme construire une fusée :

• D'abord un prototype (Vue basique)
• Puis une fusée complète (composants, routage)
• Enfin un vaisseau interplanétaire (application complète)

Tu peux ajouter Vue à une page existante avec un seul script, ou construire avec lui une application entière grâce à l'outil Vite. Au NOVA LAB, nous travaillons dès le premier jour avec l'équipement complet de Vite et des fichiers .vue - c'est ainsi que naissent les vrais projets, et c'est le départ que je te recommande.

Les protocoles du NOVA LAB

Nos principes de codage reposent sur trois piliers :

1. Simplicité (protocole KISS)

Le composant le plus simple a deux parties. Le template, dans la balise <template>, décrit ce qui apparaît à l'écran, et la section <script setup> contient les données. On fait venir la fonction ref avec l'instruction import depuis le paquet vue et on lui passe une valeur de départ :

1<template>
2  <h1>{{ missionName }}</h1>
3</template>
4
5<script setup>
6import { ref } from 'vue'
7const missionName = ref('MARS ONE')
8</script>

La fonction ref() crée un conteneur réactif : Vue surveille son contenu et sait quand il change. Les doubles accolades, qu'on appelle moustaches, insèrent dans le template la valeur actuelle du conteneur. La balise <h1> est restée du HTML ordinaire - Vue a seulement ajouté un emplacement pour les données. Quand le nom de la mission change, le titre se met à jour tout seul, sans aucun code qui cherche l'élément dans la page.

Tu peux avoir autant de conteneurs que tu veux, et les moustaches se glissent dans du texte ordinaire, donc n'importe quelle inscription peut se trouver avant ou après elles :

1<template>
2  <h2>{{ stationName }}</h2>
3  <p>Équipage : {{ crewCount }} personnes</p>
4  <p>Réserve d'oxygène : {{ oxygenReserve }}%</p>
5</template>
6
7<script setup>
8import { ref } from 'vue'
9
10const stationName = ref('Base Nova')
11const crewCount = ref(4)
12const oxygenReserve = ref(92)
13</script>

Chaque valeur a reçu son propre ref(), et un seul import a servi les trois. Les inscriptions "Équipage :" et "%" sont restées du texte ordinaire - Vue ne remplace que ce qui se trouve entre les moustaches. Nous démonterons ces deux outils pièce par pièce dans la leçon sur ton premier système Vue.

2. Fiabilité (protocole ZÉRO-FAUTE)

Le code Vue est prévisible - crucial pour les systèmes de survie. Le template déclare à quoi l'écran doit ressembler pour un état donné, et toi, tu ne modifies que les données, jamais directement la page.

3. Performance (protocole LIGHT)

Vue utilise le Virtual DOM - chaque kilo-octet en moins, c'est plus de carburant à bord. Après un changement de données, Vue construit en mémoire une description légère de l'écran, la compare à la précédente et n'applique à la page que les différences, tandis que le compilateur marque les fragments qui ne changent jamais pour qu'ils soient ignorés.

Vue 3 - La génération spatiale

Vue 3 est sorti en 2020 et c'est la version que nous utilisons au NOVA LAB - Vue 2 n'est plus maintenu depuis la fin de 2023. Vue 3 a introduit des changements essentiels pour les missions spatiales :

• Composition API - organisation modulaire du système
• Meilleures performances - bundle plus léger, réponses plus rapides
• TypeScript - le typage élimine les bugs avant le décollage
• Teleport, Suspense - techniques d'UI avancées

La Composition API, c'est le style que tu viens de voir : tu écris les données et les fonctions dans <script setup>. L'ancienne Options API fonctionne toujours, mais nous ne l'utilisons pas. Teleport déplace un fragment du template vers un autre endroit de la page, et Suspense affiche un écran d'attente pour les données - la documentation de Vue le marque toujours comme expérimental.

L'écosystème du NOVA LAB

Vue Router et Pinia sont des bibliothèques officielles de l'équipe Vue. Pinia gère l'état partagé par toute l'application - dans le monde de Vue, on ne sort ni Redux ni la Context API connus de React. Vite a été écrit par le même auteur que Vue, et dans la prochaine leçon tu démarreras ce moteur.

Dans l'éditeur ci-dessous, un panneau avec un compteur d'énergie t'attend. Clique sur plus et moins, observe le statut changer et retrouve dans le code les moustaches et ref().

Retiens ceci : Vue est un framework progressif dans lequel tu décris ce que l'écran doit montrer, et le système veille lui-même à ce que l'image corresponde toujours aux données de la mission.

1<template>
2  <div class="nova-lab">
3    <header class="lab-header">
4      <h1>NOVA LAB - Launch Zone</h1>
5      <p class="subtitle">Année 2087 - Centre de recherche de la mission martienne</p>
6    </header>
7
8    <main class="lab-content">
9      <section class="welcome-panel">
10        <h2>Bienvenue, ingénieur !</h2>
11        <p>
12          Voici ton premier composant Vue.js au NOVA LAB.
13          Nous l'avons créé à l'aide de Vite - un outil de build rapide comme l'éclair.
14        </p>
15        <p>
16          <strong>Dr Nova :</strong> « Chaque grand système commence par un petit composant.
17          Ton voyage vers Mars vient tout juste de commencer ! »
18        </p>
19      </section>
20
21      <section class="info-panel">
22        <h3>Qu'est-ce que Vue.js ?</h3>
23        <ul>
24          <li>Framework JavaScript progressif</li>
25          <li>Système de données réactif</li>
26          <li>Composants réutilisables</li>
27          <li>Excellents outils de développement</li>
28        </ul>
29      </section>
30
31      <section class="counter-demo">
32        <h3>Compteur d'énergie interactif</h3>
33        <div class="counter">
34          <button @click="powerLevel--" class="btn">-</button>
35          <span class="power-display">{{ powerLevel }}%</span>
36          <button @click="powerLevel++" class="btn">+</button>
37        </div>
38        <p class="status" :class="powerStatus">
39          Statut : {{ powerStatusText }}
40        </p>
41      </section>
42    </main>
43
44    <footer class="lab-footer">
45      <p>NOVA LAB © 2087 - Préparation à la colonisation de Mars</p>
46    </footer>
47  </div>
48</template>
49
50<script setup>
51import { ref, computed } from 'vue'
52
53const powerLevel = ref(50)
54
55const powerStatus = computed(() => {
56  if (powerLevel.value < 20) return 'critical'
57  if (powerLevel.value < 50) return 'warning'
58  return 'nominal'
59})
60
61const powerStatusText = computed(() => {
62  if (powerLevel.value < 20) return 'CRITIQUE'
63  if (powerLevel.value < 50) return 'ALERTE'
64  return 'NOMINAL'
65})
66</script>
67
68<style>
69.nova-lab {
70  min-height: 100vh;
71  background: linear-gradient(135deg, #0a0e27 0%, #1a1e37 100%);
72  color: #e0e0e0;
73  font-family: 'Segoe UI', system-ui, sans-serif;
74  padding: 2rem;
75}
76
77.lab-header {
78  text-align: center;
79  margin-bottom: 2rem;
80  padding-bottom: 1rem;
81  border-bottom: 2px solid #00ff88;
82}
83
84.lab-header h1 {
85  color: #00ff88;
86  font-size: 2.5rem;
87  margin: 0;
88  text-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
89}
90
91.subtitle {
92  color: #00b4d8;
93  margin-top: 0.5rem;
94}
95
96.lab-content {
97  max-width: 800px;
98  margin: 0 auto;
99}
100
101section {
102  background: rgba(26, 30, 55, 0.8);
103  border: 1px solid #00b4d8;
104  border-radius: 12px;
105  padding: 1.5rem;
106  margin-bottom: 1.5rem;
107}
108
109h2, h3 {
110  color: #00ff88;
111  margin-top: 0;
112}
113
114ul {
115  list-style: none;
116  padding: 0;
117}
118
119ul li {
120  padding: 0.5rem 0;
121  border-bottom: 1px solid rgba(0, 180, 216, 0.3);
122}
123
124ul li::before {
125  content: "→ ";
126  color: #00ff88;
127}
128
129.counter {
130  display: flex;
131  align-items: center;
132  justify-content: center;
133  gap: 1rem;
134  margin: 1rem 0;
135}
136
137.btn {
138  background: #00b4d8;
139  color: #0a0e27;
140  border: none;
141  width: 50px;
142  height: 50px;
143  border-radius: 50%;
144  font-size: 1.5rem;
145  cursor: pointer;
146  transition: all 0.3s;
147}
148
149.btn:hover {
150  background: #00ff88;
151  transform: scale(1.1);
152}
153
154.power-display {
155  font-size: 2rem;
156  font-weight: bold;
157  color: #00ff88;
158  min-width: 100px;
159  text-align: center;
160}
161
162.status {
163  text-align: center;
164  padding: 0.5rem;
165  border-radius: 8px;
166  font-weight: bold;
167}
168
169.status.nominal { background: rgba(0, 255, 136, 0.2); color: #00ff88; }
170.status.warning { background: rgba(255, 170, 0, 0.2); color: #ffaa00; }
171.status.critical { background: rgba(255, 68, 68, 0.2); color: #ff4444; }
172
173.lab-footer {
174  text-align: center;
175  margin-top: 2rem;
176  color: #666;
177  font-size: 0.9rem;
178}
179</style>