Accueil › Formations › Informatique › Langages et développement › Développeur Web HTML 5, CSS 3 et JavaScript › Vue.js - Développement d'applications Web
Objectifs pédagogiques
- Mettre en oeuvre le framework Vue.js
- Utiliser Vue.js dans le cadre d'une application SPA (Single Page Application) et d'applications clientes plus conventionnelles.
Niveau requis
Avoir une très bonne connaissance de HTML 5, de CSS 3, et de JavaScript.
Public concerné
Développeurs de sites Web désirant développer des applications actuelles Front End.
Programme
Jour 1 - Matin
Présentation de Vue.js
- Migration vers Vue.js
- MVVM (Model-View-ViewModel) selon Vue.js
- Les outils nécessaires liés à l'utilisation de Vue.js
- La gestion des interfaces graphiques par les données
- La liaison de données
- Les structures de contrôle
- Répétitives
- Alternatives
- Notion d'event
- Notion de component
Jour 1 - Après-midi
Exemples de travaux pratiques (à titre indicatif)
- Installation des outils nécessaires et des librairies
- Compréhension de Vue CLI
- Création d'une première application simple sans composant et hors Vue CLI
- Ecriture d'une page Vue de base
- Création de la partie modèle et de la partie interface graphique
- Intégration de l'interpolation et du double binding
- Utilisation des directives de boucle
- Test pour la création de l'interface
Jour 2 - Matin
Les essentiels de Vue.js
- Cycle de vie d'une requête dans Vue.js et son rôle
- Les modèles
- Notion d'interpolation
- Attributs, filtres et directives
- Les propriétés calculées
- Différence entre v-model et v-bind
- Le v-model
- Gérer des listes
- L'affichage conditionnel
- Event management
- Les composants dynamiques
- Echange de données entre composants
Jour 2 - Après-midi
Exemples de travaux pratiques (à titre indicatif)
- Amélioration de l'application développée le jour précédent
- Ajout de boucles de gestion à partir de tableaux internes et issus d'appels REST
- Binding de données
- Création des premiers composants Vue réutilisables
- Application permettant de comprendre l'échange de données entre composants (du père au fil, du fils au père, entre frères)
Jour 3 - Matin
Aspects avancés de Vue.js
- Transitions et transitions CSS
- Transitions dynamiques
- Diverses animations
- Les fonctions "render"
- Les divers types de composants
- Les composants fonctionnels
- Les Single File Components
- Les différents types de directives
- Créer une directive adaptée
Exemples de travaux pratiques (à titre indicatif)
- Ajout de transition Vue.js dans le projet
- Utilisation des directives déjà présentes
- Création de nouvelles directives
Jour 3 - Après-midi
Les extensions
- Type mixin
- Type plug-in
- Les extensions (composants) monofichier
Exemple de travaux pratiques (à titre indicatif)
- Développement de composants monofichier (Single File Component)
Le routing dans Vue.js
- Présentation des routes
- Les modes
- Les liens
- Vue initiale et liens
Exemple de travaux pratiques (à titre indicatif)
- Ajout du traitement des routes dans le projet Vue.js
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)
