fff

Combien de stagiaires suivront cette formation ?


Valider Annuler

Accueil    Formations    Informatique    Langages et développement    Développeur Web HTML 5, CSS 3 et JavaScript    Vue.js - Fonctionnalités avancées

Partager cette formation Télécharger au format pdf Ajouter à mes favoris

Objectifs pédagogiques

  • Décrire les aspects avancés du Vue.js
  • Créer des composants plus réutilisables
  • Développer une application plus optimisée.

Modalités et moyens pédagogiques

Formation délivrée en présentiel ou distanciel* (e-learning, classe virtuelle, présentiel à distance).

Le formateur alterne entre méthode** démonstrative, interrogative et active (via des travaux pratiques et/ou des mises en situation).

Variables suivant les formations, les moyens pédagogiques mis en oeuvre sont :

  • Ordinateurs Mac ou PC (sauf pour les cours de l'offre Management), connexion internet fibre, tableau blanc ou paperboard, vidéoprojecteur ou écran tactile interactif (pour le distanciel)
  • Environnements de formation installés sur les postes de travail ou en ligne
  • Supports de cours et exercices

En cas de formation intra sur site externe à M2i, le client s'assure et s'engage également à avoir toutes les ressources matérielles pédagogiques nécessaires (équipements informatique...) au bon déroulement de l'action de formation visée conformément aux prérequis indiqués dans le programme de formation communiqué.

* nous consulter pour la faisabilité en distanciel

** ratio variable selon le cours suivi

Niveau requis

Avoir des connaissances sur Vue.js.

Public concerné

Développeurs Vue.js souhaitant produire des applications Vue.js plus optimisées et qualitatives.

Programme

Jour 1

Approfondissement de Vue Router

  • Chargement dynamique des composants
  • Le mode "historique"
  • La configuration server-side
  • Les paramètres d'URL
  • Routes imbriquées / Nested routes
  • Navigation par le code
  • Redirection
  • Gestion d'erreur
  • Flash message
  • La pagination
  • Les gardes
Exemple de travaux pratiques (à titre indicatif)
  • Mise en oeuvre des routes Vue.js dans l'application

Les slots

  • Définition et utilité des slots
  • Injection de contenu dans un template
  • Slots et composants génériques
  • Slots et composants parents
  • Props et slots
  • La directive v-slot
  • Les slots nommés
  • La portée des slots
  • Les slots à nom dynamique
Exemples de travaux pratiques (à titre indicatif)
  • Utilisation des slots pour réaliser un composant dont le contenu dépend de sa position dans la page (composant générique)
  • Ajout de chargement lazy pour des routes référençant des composants sur le projet existant

Les composants asynchrones

  • Utilité de composants asynchrones
  • Chargement des composants à la demande
  • La fonction "defineAsyncComponent"
  • Retour sur les promises
  • Gestion des erreurs et de l'état
Exemple de travaux pratiques (à titre indicatif)
  • Intégration d'appels de composants de manière asynchrones dans l'application écrite

Jour 2

Vuex et Pinia

  • Définition du modèle de gestion d'état (state management pattern)
  • Vuex ou Pinia ?
  • Un seul stockage par application
  • Exemple de stockage le plus élémentaires
  • Gestion de l'état Vuex dans les composants
  • Les getters
  • Les mutations d'état (modifications)
  • Les commits
  • Gestion des actions
  • Différence avec Pinia
Exemples de travaux pratiques (à titre indicatif)
  • Création d'un store de données d'état avec Vuex dans l'application en cours et mise à jour des données
  • Exemple des mêmes fonctions avec Pinia et démonstration

Test avec Vue.js

  • Pourquoi tester les applications Vue.js
  • Les différents types de test
  • Tester uniquement avec Vue.js
  • Les frameworks à disposition (Jest...)
Exemple de travaux pratiques (à titre indicatif)
  • Mise en oeuvre d'un test avec Jest

La performance

  • Le code splitting
  • Pourquoi le lazy loading est important dans Vue.js
  • Le chargement à la demande
  • Chargement lazy des routes avec "dynamic import"
  • Les directives v-once et v-memo

Vuex et authentification

  • Schéma de l'authentification
  • Authentifier avec un Token
  • JWT (JSON Web Token)
  • Connexion / déconnexion

Le contenu de ce programme peut faire l'objet d'adaptation selon les niveaux, prérequis et besoins des apprenants.

Modalités d’évaluation des acquis

  • En cours de formation, par des études de cas ou des travaux pratiques
  • Et, en fin de formation, par un questionnaire d'auto-évaluation ou une certification (M2i ou éditeur)

Partager cette formation Télécharger au format pdf Ajouter à mes favoris

Vous souhaitez suivre cette formation ?

Cette formation est disponible en présentiel ou en classe à distance, avec un programme et une qualité pédagogique identiques.

Choisissez la modalité souhaitée pour vous inscrire :

Formation disponible en intra-entreprise

Votre société a besoin d'une offre personnalisée ? Contactez-nous

Faites-nous part de votre projet de formation, nous sommes là pour vous guider.

Contactez-nous