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