Vue.js

Les Web Components

• Custom Elements
• Shadow DOM
• Template
• Bibliothèques

Philosophie

Démarrage

• Framework évolutif
• Vue CLI (pour mémoire)
• Les bundlers (webpack, rollup, esbuild)
• Vite et « create-vue »
• SFC (Single File Components)

Syntaxe des templates

• Interpolation
• Utilisation des composants dans un template
• Lien de propriété (« v-bind » ou « : »)
• Gestion des événements (« v-on » ou « @ »)
• Templates et TypeScript
• Résumé

Directives

• Affichage conditionnel avec « v-if »
• Masquage avec « v-show »
• Rendu unique avec « v-once »
• Répétition avec « v-for » (et « key »)
• Code HTML avec « v-html »
• Non interprété avec « v-pre »
• Autres directives

Créer des composants

• Propriétés réactives avec « ref » / « reactive » / « toRefs
• Dérivation avec « computed »
• Effets de bord avec « watchEffect » / « watch »
• Passage de « props »
• Événements avec « emit »
• Fonctions du cycle de vie

API Composition

• Conception « propre »
• Extraction de la logique commune
• Hors des composants (ex: VueUse)
• Alternatives : API Options et API Classe

Style des composants

• Syles « scoped »
• Syles « module »
• Utilisation de « v-bind »
• Utilisation de « :deep() », « :global() » et « :slotted() »
• PostCSS et les pré-processeurs

Le « script setup »

• Migration
• Retour implicite
• Utilisation de « defineProps » et gestion des « default »
• Utilisation de « defineEmits »
• Utilisation de « defineOptions »
• Utilisation de « defineExpose »

Tests d’une application

• Tests unitaires (Vitest + « @vue/test-utils »)
• Tests e2e (Cypress)

Appels HTTP (axios)

• Appels REST
• Options avancées
• Intercepteurs
• Tests

Slots

• Projection de contenu
• Slots nommés
• Contenu par défaut
• Slot « props »
• Slots typés (« defineSlots »)

Routage

• Installation et configuration
• Navigation
• Paramètres et props
• Redirections et route par défaut
• Routes imbriquées
• Gardes de navigation
• Meta information
• Tests (« vue-router-mock »)

Chargement à la demande

• Composant(s) asynchrone(s)
• Lors du routage

Formulaires

• La directive « v-model »
• Utiliser « VeeValidate »
• Composants personnalisés
• Macro « defineModel »

Utilisation de « provide/inject »

• Éviter le « passe plat »
• Tests
• Approche hiérarchique
• Plugins