💚 Vue.js – Le Guide Ultime

Vue.js est un framework JavaScript open-source (créé par Evan You) pour construire des interfaces utilisateur (Front-End). Il est connu pour sa simplicité, sa performance et sa flexibilité.

Sa philosophie est celle du "Framework Progressif" :

• Vous pouvez l'utiliser comme simple "librairie" (comme jQuery) pour "saupoudrer" de l'interactivité sur une page existante.
• Ou vous pouvez l'utiliser comme un "framework" complet (SPA - Single Page Application) avec routage, gestion d'état, et outils de build (comme React ou Angular).

Vue vs React vs Angular

La "Magie" : Réactivité & v-model (Two-Way Binding)

Vue est "réactif". Quand la donnée (JavaScript) change, le HTML se met à jour. v-model est le "sucre syntaxique" pour lier un input à une donnée.

                <!-- HTML -->
                <div id="app">
                <input type="text" v-model="message">
                <h1>Vous avez tapé : {{ message }}</h1>
                </div>

                <!-- JavaScript (Vue 3 - CDN) -->
                <script src="https://unpkg.com/vue@3"></script>
                <script>
                Vue.createApp({
                // 1. L'état (les données)
                data() {
                return {
                message: 'Bonjour Vue!'
                }
                }
                }).mount('#app')
                </script>
            

La façon moderne (et professionnelle) de travailler avec Vue n'est pas le CDN, mais via un outil de build (comme Vite). Cela permet d'utiliser les Single File Components (Fichiers .vue).

Un fichier .vue encapsule la structure (HTML), la logique (JS) et le style (CSS) d'un composant dans un seul fichier.

Anatomie d'un Fichier MonComposant.vue

                <!-- ******************** -->
                <!-- 1. LE TEMPLATE (HTML) -->
                <!-- ******************** -->
                <template>
                <div class="card">
                <h1>{{ message }}</h1>
                <button @click="inverserMessage">Inverser</button>
                </div>
                </template>

                <!-- ****************** -->
                <!-- 2. LE SCRIPT (JS/TS) -->
                <!-- ****************** -->
                <script setup>
                // (C'est la "Composition API", voir 1.4)
                import { ref } from 'vue'

                // 2a. État réactif
                const message = ref('Bonjour Vue!')

                // 2b. Méthode
                function inverserMessage() {
                message.value = message.value.split('').reverse().join('')
                }
                </script>

                <!-- ****************** -->
                <!-- 3. LE STYLE (CSS/SCSS) -->
                <!-- ****************** -->
                <style scoped>
                /*
                'scoped' (le "plugin" magique)
                Ce style ne s'appliquera QU'À CE COMPOSANT.
                Il ne "fuira" pas (leak) aux autres composants.
                */
                .card {
                background: #f4f4f4;
                padding: 1rem;
                border-radius: 8px;
                }
                </style>
            

Le template Vue est du HTML "augmenté". Il utilise des "directives" (attributs spéciaux v-) pour lier le DOM aux données.

Exemple (v-bind vs v-model)

                <script setup>
                import { ref } from 'vue'
                const url = ref('https://vuejs.org')
                const message = ref('Editable')
                </script>

                <template>
                <!-- 1. v-bind (:) -->
                <!-- La donnée JS (url) pilote l'attribut HTML (href) -->
                <a :href="url">Lien vers Vue</a>

                <!-- 2. v-model -->
                <!-- 
                Binding bidirectionnel :
                - Si 'message' (JS) change, l'input (HTML) change.
                - Si l'input (HTML) change, 'message' (JS) change.
                -->
                <input type="text" v-model="message">
                </template>
            

La "réactivité" est la magie de Vue. Quand une donnée JavaScript change, Vue le détecte et met à jour le DOM (HTML) automatiquement. Il y a deux façons d'écrire des composants :

                    <script setup>
                    import { ref, reactive, computed } from 'vue'

                    // 1. État réactif (primitif)
                    const compteur = ref(0) // (valeur: compteur.value)

                    // 2. État réactif (objet)
                    const user = reactive({
                    nom: 'Alice',
                    age: 30
                    })

                    // 3. Computed (basé sur l'état)
                    const estMajeur = computed(() => user.age >= 18)

                    // 4. Méthode
                    function incrementer() {
                    compteur.value++ // On doit utiliser .value !
                    user.age++
                    }
                    </script>

                    <template>
                    <!-- Dans le template, .value est automatique -->
                    <p>Compteur: {{ compteur }}</p>
                    <p>Utilisateur: {{ user.nom }} ({{ user.age }})</p>
                    <button @click="incrementer">+1</button>
                    </template>
                

                    <script>
                    export default {
                    // 1. L'état réactif
                    data() {
                    return {
                    compteur: 0,
                    user: {
                    nom: 'Alice',
                    age: 30
                    }
                    }
                    },

                    // 2. Computed
                    computed: {
                    estMajeur() {
                    // 'this' pointe vers l'instance
                    return this.user.age >= 18
                    }
                    },

                    // 3. Méthodes
                    methods: {
                    incrementer() {
                    // 'this' est magique
                    this.compteur++
                    this.user.age++
                    }
                    }
                    }
                    </script>

                    <template>
                    <!-- La syntaxe du template ne change PAS -->
                    <p>Compteur: {{ compteur }}</p>
                    <p>Utilisateur: {{ user.nom }} ({{ user.age }})</p>
                    <button @click="incrementer">+1</button>
                    </template>
                

Rendu Conditionnel (v-if vs v-show)

Permet d'afficher ou de cacher des éléments.

Rendu de Liste (v-for)

La directive v-for permet de boucler sur un Array ou un Object.

L'attribut :key est obligatoire et crucial. Il permet à Vue d'optimiser le rendu et d'éviter les bugs de réactivité (il doit être un string ou number unique).

                <script setup>
                import { ref } from 'vue'
                const visible = ref(true)
                const fruits = ref([
                { id: 1, nom: 'Pomme' },
                { id: 2, nom: 'Banane' },
                { id: 3, nom: 'Cerise' }
                ])
                </script>

                <template>
                <!-- v-if -->
                <div v-if="visible">
                Je suis visible.
                </div>
                <div v-else>
                Je suis caché.
                </div>

                <!-- v-for (sur Array) -->
                <ul>
                <li v-for="fruit in fruits" :key="fruit.id">
                {{ fruit.nom }}
                </li>
                </ul>

                <!-- v-for (avec index) -->
                <div v-for="(fruit, index) in fruits" :key="fruit.id">
                {{ index }} - {{ fruit.nom }}
                </div>
                </template>
            

On utilise la directive v-on: (raccourci @) pour écouter les événements du DOM (clic, soumission, clavier).

Modificateurs (La magie de Vue)

Vue fournit des "modificateurs" (.) pour gérer des cas courants sans écrire de logique event.preventDefault().

Modificateurs de Touche (Key Modifiers)

On peut écouter des touches spécifiques.

• @keydown.enter
• @keydown.tab
• @keydown.delete
• @keydown.esc
• @keydown.ctrl.enter (Combinaison)

Exemple Complet

                <script setup>
                function gererClic() {
                alert('Clic géré !');
                }
                function gererSubmit() {
                alert('Formulaire soumis (sans recharger la page)');
                }
                function gererEntree() {
                alert('Touche Entrée pressée !');
                }
                </script>

                <template>
                <!-- 1. Clic simple -->
                <button @click="gererClic">Cliquez ici</button>

                <!-- 2. Clic avec modificateur .stop -->
                <div @click="alert('Parent cliqué')">
                <button @click.stop="alert('Enfant cliqué')">Clic (stop)</button>
                </div>

                <!-- 3. Submit avec .prevent -->
                <form @submit.prevent="gererSubmit">
                <button type="submit">Envoyer</button>
                </form>

                <!-- 4. Touche clavier -->
                <input @keydown.enter="gererEntree">
                </template>
            

C'est une confusion fréquente. Les deux réagissent aux changements de données, mais n'ont pas le même but.

computed (Propriétés Calculées)

Une computed est une propriété (pas une méthode) qui calcule sa valeur en fonction d'autres états réactifs.
La clé : Elle est **mise en cache** (cached). Elle ne se recalcule *que* si l'une de ses dépendances (ex: message) change.

Usage : Dériver un état (ex: un nom complet depuis nom et prenom), filtrer une liste.

watch (Observateurs)

Un watch "observe" une donnée réactive (ex: ref ou reactive) et exécute une fonction (un "side effect") chaque fois qu'elle change.
La clé : Il n'est **pas** mis en cache et ne renvoie rien.

Usage : Créer des "side effects". (Ex: "Quand userId change, lance un appel API pour chercher ce user").

Exemple (Composition API)

                <script setup>
                import { ref, computed, watch } from 'vue'

                const prenom = ref('Jean')
                const nom = ref('Dupont')

                // 1. COMPUTED (Mis en cache)
                // Se recalcule *seulement* si 'prenom' ou 'nom' change.
                const nomComplet = computed(() => {
                console.log('Calcul de nomComplet...')
                return `${prenom.value} ${nom.value.toUpperCase()}`
                })

                // 2. WATCH (Side Effect)
                // S'exécute *chaque* fois que 'nom' change.
                watch(nom, (nouveauNom, ancienNom) => {
                console.log(`Le nom a changé de '${ancienNom}' à '${nouveauNom}'`)
                // (Ex: Lancer un appel API pour vérifier si le nom est dispo)
                })
                </script>

                <template>
                <input v-model="prenom">
                <input v-model="nom">

                <!-- 'nomComplet' est utilisé comme une variable -->
                <h3>Nom complet: {{ nomComplet }}</h3>
                </template>
            

Les composants sont la base de Vue. Les Props (Propriétés) sont le mécanisme pour passer des données du Parent vers l'Enfant.

Le flux est unidirectionnel : le parent peut passer une prop à l'enfant, mais l'enfant ne doit *jamais* modifier la prop (c'est une "mutation" interdite).

                        <script setup>
                        import { ref } from 'vue'
                        import BlogPost from './BlogPost.vue'

                        const post1 = ref({
                        id: 1,
                        titre: 'Mon premier article'
                        })
                        const post2 = ref({
                        id: 2,
                        titre: 'Mon deuxième article'
                        })
                        </script>

                        <template>
                        <!-- 
                        1. On utilise le composant
                        2. On "bind" (lie) la donnée parent (post1) 
                        à la "prop" enfant ('titre-article')
                        -->
                        <BlogPost :titre-article="post1.titre" :likes="15" />

                        <!-- On peut binder l'objet entier -->
                        <BlogPost v-bind="post2" /> <!-- (mauvaise pratique) -->
                        </template>
                    

                        <script setup>
                        // 1. Déclaration simple (array de strings)
                        // const props = defineProps(['titreArticle', 'likes'])

                        // 2. Déclaration avec Validation (MEILLEURE)
                        const props = defineProps({
                        titreArticle: {
                        type: String,
                        required: true
                        },
                        likes: {
                        type: Number,
                        default: 0
                        }
                        })
                        </script>

                        <template>
                        <div class="post">
                        <!-- 3. Utilisation de la prop -->
                        <h3>{{ props.titreArticle }}</h3>
                        <p>Likes: {{ props.likes }}</p>
                        </div>
                        </template>
                    

L'enfant ne peut pas modifier la prop du parent. Pour communiquer "vers le haut" (Enfant -> Parent), l'enfant doit émettre (emit) un événement.

                        <script setup>
                        // 1. Déclare les événements que ce composant *peut* émettre
                        const emit = defineEmits(['fermer', 'accepter'])

                        function surClicFermer() {
                        // 2. Émet l'événement "fermer" (que le parent écoute)
                        emit('fermer')
                        }

                        function surClicAccepter() {
                        // 3. Émet un événement AVEC des données (payload)
                        emit('accepter', { userId: 123, status: 'ok' })
                        }
                        </script>

                        <template>
                        <div class="alerte">
                        <p>Voulez-vous accepter ?</p>
                        <button @click="surClicAccepter">Accepter</button>
                        <button @click="surClicFermer">Fermer (X)</button>
                        </div>
                        </template>
                    

                        <script setup>
                        import AlerteCustom from './AlerteCustom.vue'

                        function gererFermeture() {
                        console.log("Le parent a reçu l'évent 'fermer'!")
                        }

                        // L'objet 'payload' (de l'enfant) est passé en argument
                        function gererAcceptation(payload) {
                        console.log("Le parent a reçu 'accepter' !")
                        console.log(payload.userId) // 123
                        }
                        </script>

                        <template>
                        <!-- 
                        Le parent écoute '@fermer' et '@accepter' 
                        (les noms définis dans 'defineEmits' de l'enfant)
                        -->
                        <AlerteCustom
                        @fermer="gererFermeture"
                        @accepter="gererAcceptation"
                        />
                        </template>
                    

Chaque composant Vue passe par un cycle de vie (Création, Montage, Mise à jour, Démontage). Les "Hooks" sont des fonctions que l'on peut "accrocher" à ces moments clés.

Les 4 Hooks Principaux

Exemple (onMounted)

                <script setup>
                import { ref, onMounted, onUnmounted } from 'vue'

                const timer = ref(0)
                let intervalId = null

                // 1. Hook "onMounted"
                // (S'exécute 1x, quand le composant est dans le DOM)
                onMounted(() => {
                console.log("Composant monté !");

                // Ex: Démarrer un timer
                intervalId = setInterval(() => {
                timer.value++
                }, 1000)
                })

                // 2. Hook "onUnmounted" (Nettoyage)
                // (S'exécute 1x, quand le composant est détruit)
                onUnmounted(() => {
                console.log("Composant démonté ! Nettoyage...");
                // CRUCIAL: Nettoyer le timer pour éviter les fuites mémoire
                clearInterval(intervalId)
                })
                </script>
            

Pour une Single Page Application (SPA), on ne change pas de page (pas de rechargement). On change *le composant* affiché. Vue Router est le "plugin" officiel pour gérer cela.

1. Définir les Routes (router.js)

                import { createRouter, createWebHistory } from 'vue-router'
                import Home from './views/Home.vue'
                import About from './views/About.vue'
                import UserProfile from './views/UserProfile.vue'

                // 1. Définir les "routes"
                const routes = [
                { path: '/', component: Home },
                { path: '/about', component: About },

                // Route dynamique (avec "params")
                { path: '/user/:id', component: UserProfile, props: true }
                ]

                // 2. Créer l'instance du routeur
                const router = createRouter({
                history: createWebHistory(), // (Utilise l'historique HTML5)
                routes,
                })

                export default router
            

2. L'utiliser (App.vue)

Dans votre composant principal (App.vue), vous utilisez 2 composants du routeur :

• <router-link> : Le "<a>" de Vue. Génère un lien sans recharger la page.
• <router-view> : Le "placeholder". C'est là que le composant de la route (Home, About) sera injecté.

                <!-- App.vue -->
                <template>
                <header>
                <nav>
                <router-link to="/">Accueil</router-link>
                <router-link to="/about">À Propos</router-link>
                <router-link to="/user/123">Utilisateur 123</router-link>
                </nav>
                </header>

                <main>
                <!-- La "fenêtre" où les pages s'affichent -->
                <router-view />
                </main>
                </template>
            

Le Problème (Prop Drilling) : Que faire si un composant (Niveau 1) doit partager une donnée (ex: user) avec un composant (Niveau 5) ? On doit "percer" (drill) la prop à travers 4 niveaux. C'est un cauchemar.

La Solution : Un Gestionnaire d'État Global (State Management).
Pinia (prononcé "pi-nia") est le gestionnaire d'état officiel (et moderne) de Vue (il remplace l'ancien Vuex). C'est un "store" global où l'on place l'état partagé.

1. Définir un "Store" (/stores/userStore.js)

                import { defineStore } from 'pinia'

                // 1. Définir le "store"
                export const useUserStore = defineStore('user', {

                // 2. 'state' (les données)
                state: () => ({
                isLoggedIn: false,
                username: 'Guest'
                }),

                // 3. 'getters' (les "computed" du store)
                getters: {
                welcomeMessage: (state) => `Bienvenue, ${state.username}`
                },

                // 4. 'actions' (les "méthodes" pour changer l'état)
                actions: {
                login(newUsername) {
                this.username = newUsername
                this.isLoggedIn = true
                },
                logout() {
                this.username = 'Guest'
                this.isLoggedIn = false
                }
                }
                })
            

2. L'utiliser (dans n'importe quel composant)

                <!-- Composant A (Navbar.vue) -->
                <script setup>
                import { useUserStore } from '@/stores/userStore'
                const userStore = useUserStore() // Accroche au store
                </script>
                <template>
                <div>{{ userStore.welcomeMessage }}</div>
                </template>

                <!-- Composant B (Login.vue) -->
                <script setup>
                import { useUserStore } from '@/stores/userStore'
                const userStore = useUserStore()
                </script>
                <template>
                <button @click="userStore.login('Alice')">Login</button>
                </template>
            

Quand le bouton (Composant B) est cliqué, l'état username change, et le Navbar (Composant A) se met à jour *automatiquement*.