Vue.js
Des bases solides pour développer des applications avec Vue.js
Ce que vous allez apprendre
- Développer une application Vue
- Réaliser des tests pour garantir une maintenabilité dans le temps
- Appréhender l'écosystème de Vue dans sa globalité (librairies externes)
Prérequis
- Javascript Moderne (scope, arrow function, class, notion du this, programmation asynchrone avec les promises)
- TypeScript, ou notions de base (typages basiques)
Public cible
- Développeurs frontend, Développeurs Full-stack type JavaScript / Node.js, Développeur web intéressé par le développement d'une application Vue, Tout public intéressé par le développement d'une application Vue
Programme de la Formation
13 modules pour maîtriser les fondamentaux
Sujets abordés
- →Présentation du speaker
- →Tour de table pour tous se connaître
- →Présentation du déroulement de la formation
Sujets abordés
- →Configuration de son IDE: Webstorm vs Vscode
- →A quoi ressemble Vue
- →Le tooling de Vue
- →La différence entre composition API et option API
Activités
Bootstrapper une application Vue
Intégrer une librairie externe à Vue
Sujets abordés
- →L'instance de Vue
- →Deep Dive sur la création d'une instance Vue
- →Les différents cycle de vie d'une instance de Vue
- →Les différents types de propriétés (non réactive, réactive, computed, méthodes)
- →La différences entre computed et watcher
- →Les composants Vue (les composants local, les composants global)
- →Deep Dive dans la réactivité de Vue
Activités
Créer vos premier composants
Sujets abordés
- →DataBinding (les différents types de databindings)
- →Différence entre propriété et attributs
- →La composition API (A quoi sert-elle ?, Comment la mettre en place ?, Comment en tirer le profit maximum)
Activités
Afficher une personne dans une card
Réagir à l'événement click d'un bouton pour afficher une autre personne de manière aléatoire.
Sujets abordés
- →Le client fetch native
- →Le client axios
- →Faire le bon choix de son client http
- →La Suspense API et composant asynchrone
Activités
Réaliser un appel au serveur pour afficher une personne
Réaliser un appel au serveur lors de l'évènement click sur un bouton
Sujets abordés
- →Appréhender le routing (La philosophie de routing dans une app de type CSR, La configuration de base du routing en Vue)
- →Configurer un routing
- →Naviguer dans son application
Activités
Mettre en place un système de routing au sein d'une application Vue
Naviguer par défaut sur une route
Naviguer vers une route en particulier
Sujets abordés
- →Les directives built-in (v-if, v-for, template)
Activités
Utilisation de la directive v-for pour créer la vue d'une liste de personne
Sujets abordés
- →Communication Parent – Enfant (La fonction defineProps, Rendre des inputs requis par typage)
- →Communication Enfant - Parent (La fonction defineEmits, Rendre les paramètres d'une évent emitter requis par typage)
Activités
Créer un composant customisable à l'aide d'Input et d'Output
Sujets abordés
- →Les bases du formulaires (la directive v-model, les modifiers)
- →Créer des composants custom de formulaires
- →Template Driven Form avec Veelidate (Les high order components, La validation avec Veelidate, La performance avec Veelidate)
Activités
Créer un formulaire
Créer un formulaire d'update
Créer un formulaire avec Veelidate
Sujets abordés
- →Reactive Form avec Vuelidate
- →La composition Api avec Vuelidate
- →La validation avec Vuelidate
- →La performance avec Vuelidate
- →Créer ses propres règles de validation
- →Les formulaires déstructurés
Activités
Créer un formulaire avec Vuelidate
Réaliser de la validation
Sujets abordés
- →Les modifiers clavier
- →La directive (Cycle de vie d'une directive, Les paramètres d'une directive, Les directives locals, Les directives globals)
Activités
Créer une directives
Sujets abordés
- →Le Store management
- →Gérer son store avec Pinia (state, actions, sélecteurs)
Activités
Mise en place d'un store avec Pinia
Sujets abordés
- →Layloader des composants avec le routing
- →Affichez dynamiquement des composants
- →Gardez en cache des composant dynamique déjà render
Activités
Lazyload à l'aide du routeur des composants
Processus Qualité
L'engagement de SFEIR Institute : une démarche d'excellence pour garantir la qualité et la réussite de toutes nos formations. En savoir plus sur notre démarche qualité
- Lectures / Apports théoriques (Slides) — Présentation de concepts via des supports visuels (PowerPoint, PDF).
- Démonstration technique (Démos) — Le formateur réalise une manipulation ou une procédure devant les apprenants.
- Laboratoires dirigés (Labs) — Mise en pratique guidée sur logiciel, machine ou environnement technique.
L'atteinte des objectifs de la formation est évaluée à plusieurs niveaux pour garantir la qualité de la prestation :
- Évaluation continue des acquis : Vérification des connaissances tout au long de la formation via des méthodes participatives (en fonction de la formation: quiz, exercices pratiques, mises en situation) sous la supervision du formateur.
- Mesure de la progression : Dispositif d'auto-évaluation comparatif comprenant un diagnostic initial pour situer le niveau de départ, suivi d'une évaluation finale pour valider l'évolution des compétences.
- Évaluation de la qualité : Questionnaire de satisfaction en fin de session pour mesurer la pertinence et l'efficacité de la formation ressentie par les participants.
Prochaines sessions
Former plusieurs collaborateurs
- Tarifs dégressifs (plusieurs places)
- Session privée ou sur-mesure
- En présentiel ou à distance