Vue.js est un framework progressif conçu principalement pour la création d'applications à page unique (SPA). Son architecture permet de minimiesr les échanges avec le serveur en gérant dynamiquement la création et la destruction d'objets côté client, optimisant ainsi l'expérience utilisateur.

Gestion des Modules et Environnement

Le développement moderne avec Vue repose sur la modularité. L'exportation et l'importation de fonctionnalités permettent une meilleure organisation du code :

// Exportation d'un module (config.js)
export default {
   apiEndpoint: 'https://api.exemple.com',
   timeout: 5000
};

// Importation dans un composant
import configuration from './config.js';

Pour orchestrer ces ressources, on utilise Webpack. Cet outil agit comme un bundleur capable de compiler et de regrouper divers fichiers (HTML, CSS, JavaScript, images, polices) en paquets optimisés. Il est également courant d'utiliser des techniques d'obfuscation pour réduire la taille des fichiers et protéger le code source en transformant les noms de variables complexes en identifiants courts.

Système de Directives : Rendu Conditionnel

Les directives sont des attributs spéciaux préfixés par v- qui appliquent des changements réactifs au DOM.

Utilisation de v-if, v-else-if et v-else

Ces directives permettent d'inclure ou d'exclure des éléments du DOM en fonction d'une expression logique.

<div id="app-demo">
   <h2>{{ messageBienvenue }}</h2>

   <div v-if="roleUtilisateur === 'admin'">
       <p>Accès complet au panneau d'administration.</p>
   </div>
   <div v-else-if="roleUtilisateur === 'editeur'">
       <p>Accès limité à l'édition de contenu.</p>
   </div>
   <div v-else>
       <p>Bienvenue, visiteur.</p>
   </div>
</div>

<script>
   const vm = new Vue({
       el: '#app-demo',
       data: {
           messageBienvenue: 'Tableau de bord',
           roleUtilisateur: 'editeur'
       }
   });
</script>

Alternative avec v-show

La directive v-show modifie simplement la propriété CSS display de l'élément sans le retirer du document.

<div v-show="estVisible">
   Ce contenu est masqué ou affiché via CSS.
</div>

Comparaison : v-if vs v-show

• v-if : Rendu "réel" car les éléments sont détruits et recréés. Plus coûteux lors du basculement, mais plus économe en ressources si la condition est initialement fausse.
• v-show : L'élément reste toujours dans le DOM. Coût de rendu initial plus élevé, mais basculement très rapide. À privilégier pour les éléments changeant d'état fréquemment.

Liaison d'Attributs et de Classes

La directive v-bind (ou le raccourci :) est essentielle pour lier dynamiquement des attributs HTML aux données de l'instance Vue.

<style>
   .actif { color: white; background-color: blue; }
   .erreur { border: 2px solid red; }
</style>

<div id="binding-app">
   <!-- Liaison d'un titre dynamique -->
   <span v-bind:title="infobulle">Survolez-moi</span>

   <!-- Liaison de classe conditionnelle -->
   <div :class="{ actif: estSelectionne, erreur: aUneErreur }">
       Bloc d'état dynamique
   </div>

   <button @click="permuterEtat">Changer l'état</button>
</div>

<script>
   new Vue({
       el: '#binding-app',
       data: {
           infobulle: 'Généré le ' + new Date().toLocaleString(),
           estSelectionne: true,
           aUneErreur: false
       },
       methods: {
           permuterEtat() {
               this.estSelectionne = !this.estSelectionne;
           }
       }
   });
</script>

Introduction aux Propriétés Calculées

Les propriétés calculées (computed) servent à transformer ou manipuler les données de l'état data de manière performante. Contrairement aux méthodes, elles sont mises en cache et ne sont recalculées que lorsque leurs dépendances réactives changent.