Rappel sur les événements JavaScript

Avant d'aborder Vue 2, il est crucial de comprendre les événements natifs du DOM que le framework exploite.

• Souris : click, dblclick, mouseenter, mouseleave.
• Clavier : keydown, keyup.
• Formulaire : submit, input, change, focus, blur.
• Fenêtre : load, resize, scroll.

Modificateurs d'événements dans Vue

Vue propose des modificateurs pour gérer le comportement des événements sans manipuler directement l'objet event dans les méthodes.

• .stop : Stoppe la propagation (stopPropagation).
• .prevent : Empêche le comportement par défaut (preventDefault).
• .capture : Utilise le mode capture pour l'écouteur.
• .once : Déclenche l'événement une seule fois.
• .self : Ne déclenche l'événement que si la cible est l'élément lui-même.
• .passive : Améliore les performances de défilement sur mobile.

<!-- Exemple : Empêcher le rechargement de la page lors de la soumission -->
<form @submit.prevent="envoyerDonnees">
  <button type="submit">Valider</button>
</form>

Propriétés Calculées (Computed)

Les propriétés calculées sont dépendantes de données réacttives. Elles sont mises en cache et ne sont recalculées que si leurs dépendances changent.

new Vue({
  el: '#app',
  data: {
    prixUnitaire: 100,
    quantite: 3
  },
  computed: {
    totalTTC() {
      return (this.prixUnitaire * this.quantite) * 1.20;
    },
    // Getter et Setter personnalisés
    libelleCommande: {
      get() {
        return `Commande de ${this.quantite} articles`;
      },
      set(valeur) {
        const parties = valeur.split(' ');
        this.quantite = parseInt(parties[2]);
      }
    }
  }
});

Observateurs (Watchers)

Utilisés pour exécuter une logique asynchrone ou complexe en réponse à la modification d'une donnée.

• handler : La fonction exécutée lors du changement.
• deep : Pour observer les mutations à l'intérieur d'un objet.
• immediate : Force l'exécution dès l'initialisation du composant.

watch: {
  recherche: {
    handler(nouveauMot) {
      this.effectuerRechercheAPI(nouveauMot);
    },
    immediate: true
  },
  panier: {
    handler(valeur) {
      console.log("Mise à jour du stockage local");
    },
    deep: true
  }
}

Liaisons de Classes et de Styles

Vue permet de manipuler dynamiquement l'attribut class et style via des objets ou des tableaux.

<!-- Syntaxe Objet -->
<div :class="{ 'is-active': estActif, 'has-error': erreur detectee }"></div>

<!-- Syntaxe Tableau -->
<div :style="[styleBase, styleConditionnel]"></div>

<script>
data() {
  return {
    estActif: true,
    styleBase: { color: 'blue', fontSize: '14px' },
    styleConditionnel: { fontWeight: 'bold' }
  }
}
</script>

Modificateurs de v-model

Le v-model peut être affiné pour transformer l'entrée utilisateur.

• .lazy : Synchronise les données après l'événement change au lieu de input.
• .number : Convertit automatiquement la saisie en type Nombre.
• .trim : Supprime les espaces inutlies au début et à la fin.

Utilisation des Mixins

Les Mixins permettent de distribuer des fonctionnalités réutilisables entre plusieurs composants.

const loggerMixin = {
  created() {
    console.log("Composant initialisé :", this.$options.name);
  },
  methods: {
    log(msg) {
      console.log("[Log] " + msg);
    }
  }
};

// Intégration
export default {
  mixins: [loggerMixin],
  name: 'MonComposant'
};

Configuration des Props

La communication parent-enfant se fait via les props avec une validation stricte possible.

props: {
  identifiant: {
    type: Number,
    required: true
  },
  titre: {
    type: String,
    default: 'Sans titre'
  },
  score: {
    validator(val) {
      return val >= 0 && val <= 100;
    }
  }
}

Cycle de Vie (Lifecycle Hooks)

1. Création : beforeCreate, created (accès aux données, pas au DOM).
2. Montage : beforeMount, mounted (accès au DOM).
3. Mise à jour : beforeUpdate, updated.
4. Destruction : beforeDestroy, destroyed (nettoyage des timers/événements).

Bus d'événements global (Event Bus)

Pour la communication entre composants sans lien de parenté direct.

// Initialisation (main.js)
Vue.prototype.$bus = new Vue();

// Émission (Composant A)
this.$bus.$emit('alerte', 'Données reçues !');

// Réception (Composant B)
mounted() {
  this.$bus.$on('alerte', (msg) => console.log(msg));
},
beforeDestroy() {
  this.$bus.$off('alerte');
}

Routage avec Vue Router

Vue Router gère la navigation SPA. Il permet de mapper des composants à des chemins d'URL.

Configuration de base

import VueRouter from 'vue-router';
const router = new VueRouter({
  routes: [
    { path: '/profil/:id', name: 'user', component: UserProfile, props: true },
    { 
      path: '/admin', 
      component: AdminPanel,
      children: [
        { path: 'stats', component: StatsDashboard }
      ]
    }
  ]
});

Navigation programmatique

• this.$router.push({ name: 'user', params: { id: 5 } }) : Ajoute une entrée dans l'histroique.
• this.$router.replace('/login') : Remplace l'entrée actuelle.

Mise en cache avec keep-alive

Pour préserver l'état des composants lors du changement de route.

<keep-alive include="CatalogueProduits">
  <router-view></router-view>
</keep-alive>