Prérequis JavaScript Moderne

L'utilisation efficace de Vue.js nécessite une compréhension solide des fonctionnalités modernes d'ECMAScript 6+. Les aspects suivants sont particulièrement importants pour la gestion de l'état et la flexibilité du code :

• Variables let et const : Pour éviter le bugage par variables globales accidentelles.
• Littéraux de modèle : L'utilisation des backticks ```` permet une insertion directe de variables dans les chaînes de caractères (${variable}).
• Fonctions Fléchées : Syntaxe courte (() => {}) qui gère automatiquement la portée de this, évitant ainsi le problème classique où this se redéfinit dans un contexte callback.
• Classes : La syntaxe orientée objet native simplifie la création de prototypes complexes.

class Animal {
  constructor(name) {
    this.name = name;
  }
  afficherNom() {
    console.log(this.name);
  }
}

Environnement de Développement et Outils

Pour structurer les projets frontend à grande échelle, l'écosystème Node.js est indispensable. Bien que des outils comme Grunt ou Gulp aient été populaires par le passé, Webpack est aujourd'hui la référence pour gérer le bundling.

Webpack assemble les fichiers sources (HTML, CSS, JavaScript, assets images) en ressources optimisées prêtes pour la production. Il utilise des chargeurs (loaders) pour transformer différents types de fichiers et des plugins pour étendre ses fonctionnalités.

Gestion des Dépendances

L'initialisation d'un projet se fait via le gestionnaire de paquets npm :

Instantiation de l'Instance Vue

Le cœur de Vue repose sur l'architecture MVVM (Model-View-ViewModel). Chaque instance Vue crée une liaison entre le modèle de données et la vue DOM.

<div id="application">
  {{ titre }}
</div>

const vueApp = new Vue({
  el: '#application',
  data() {
    return {
      titre: 'Bienvenue sur Vue',
      conditionAffichage: true
    };
  }
});

Directives de Contrôle Flux

Affichage Conditionnel avec v-if et v-else

Ces directives permettent de rendre ou masquer dynamiquement des éléments du DOM. Contrairement à v-show qui manipule le style CSS (display), v-if détruit physiquement l'élément s'il est faux.

<div id="app-controleur">
  <div v-if="estVisible">Le contenu est visible</div>
  <button @click="basculerVisibilite">Basculer l'affichage</button>
  
  <!-- Logique imbriquée avec v-else-if -->
  <div v-if="score > 80">Excellent</div>
  <div v-else-if="score > 50">Acceptable</div>
  <div v-else>Échec</div>
</div>

// Configuration logique
methods: {
  basculerVisibilite() {
    this.estVisible = !this.estVisible;
  }
}

Liaison de Propriétés (v-bind)

Pour lier des attributs HTML statiques aux données réactives, Vue fournit v-bind. Une astuce courante consiste à utiliser le raccourci :.

<!-- Lien de propriété alt et classe dynamique -->
<img :src="cheminImage" :alt="legende" :class="{ active: estActive }">
<div class="boite" :class="{ rouge: estRouge }">Boîte de couleur</div>

data() {
  return {
    cheminImage: './assets/photo.jpg',
    legende: 'Description',
    estActive: true,
    estRouge: false
  };
},
methods: {
  toggleCouleur() {
    this.estRouge = !this.estRouge;
  }
}

Itération avec v-for

Lorsqu'on doit afficher une liste d'éléments, v-for rend chaque élément de manière réactive.

<ul>
  <li v-for="(item, index) in elementsList" :key="item.id">
    {{ index + 1 }}. {{ item.nom }}
  </li>
</ul>

Gestion des Écoutes d'Événements

L'événement click est courant pour interagir avec l'utilisateur. L'attribut v-on peut être abrégé en @.

<!-- Syntaxe complète -->
<button v-on:click="incrementer">+1</button>


<button @click="incrementer">+1</button>

On peut également placer des opérations simples directement dans le template, bien que cela soit moins recommandé pour la maintenabilité.

<button @click="compteur++">Ajouter</button><span>{{ compteur }}</span>

Propriétés Calculées et v-model

Pourquoi utiliser computed ?

Les propriétés calculées sont mises en cache selon leurs dépendances. Elles se recalculent uniquement si les données associées changent, ce qui améliore les performances comparé aux méthodes appelées dans le template.

computed: {
  texteRetourne(): string {
    // Retourne la chaîne inversée seulement si msg change
    return this.message.split('').reverse().join('');
  },
  prixAvecTaxe: {
    // Getter récupère la valeur
    get() {
      return this.prix * 1.20;
    },
    // Setter modifie la valeur source
    set(nouvelleValeur) {
      this.prix = nouvelleValeur / 1.20;
    }
  }
}

Réactivité Bidirectionnelle (v-model)

v-model agit comme une abstraction syntaxique combinant :value et @input. Elle est principalement conçue pour les formulaires.

<input type="text" v-model="champSaisie">

Ce fonctionnement interne équivaut à :

<!-- Equivalent explicite -->
<input 
  :value="champSaisie" 
  @input="champSaisie = $event.target.value" 
/>

Des modificateurs peuvent ajuster le comportement :

• .lazy : Met à jour la donnée uniquement lors de l'événement blur (fin de saisie).
• .number : Force la conversion du résultat en nombre.
• .trim : Suprpime les espaces inutiles au début et à la fin.

<input type="number" v-model.number="quantite">
<input type="text" v-model.trim="nomUtilisateur">

Exemple Pratique : Galerie Interactive

Voici une implémentation complète utilisant les directives apprises pour créer un visualiseur d'images contrôlable.

- Image {{ idx + 1 }}

Auto-play StopIndice actuel : {{ currentIndex }}