Vue.js

Développer une application web avec Vue.js

  • Filière :

    Développement logiciel

  • Sous-filière :

    Technos Web (PHP, JS...)

  • Référence

    DW-VUE

  • Durée

    3 jours (21 h)

  • Prix unitaire HT

    2 050 € HT

Objectifs pédagogiques

  • Comprendre les principes de VueJS
  • Savoir choisir les briques utiles à une SPA
  • Être capable de développer une SPA avec VueJS

Public cible

  • Développeurs

Pré-requis

  • Bonne connaissance de JavaScript

Programme de la formation

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

Qualité

Cette formation est accessible aux personnes en situation de handicap, nous contacter en cas de besoin d’informations complémentaires.

Programme mis à jour le