-
Référence
VJS
-
Durée
3 jours (21h)
-
Prix unitaire HT
1950 €
Prochaines sessions
Description
Frameworks et librairies MVC pullulent dans l’éco-système JavaScript, Vue.js se situe à la confluence des deux mondes en alliant avec efficacité : simplicité de la librairie et richesse du (micro)framework. Vue.js est par ailleurs très souple et extensible par l’ajout de plugins ou d’autres librairies. Vue.js est l’étoile montante de 2016 des librairies orientées composants.
Cette formation pratique donne les clés pour la réalisation d’application complète en exploitant au maximum les capacités de l’écosystème Vue.js.
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
Architectes techniques, Chefs de projet Web, Développeurs, Experts front-end.
Pré-requis
Connaissance de base en HTML, CSS, JavaScript
Modalités d’évaluation
Evaluation des acquis de la formation par le biais de cas pratiques et/ou mises en situation. Attestation de formation remise à chaque participant.
Méthodes pédagogiques
- Exposés
- Cas pratiques
- Echanges d’expérience
Questionnaire d’évaluation de satisfaction à chaud complété par chaque participant à l’issue de la formation.
Dernière mise à jour : mars 2023
Salle équipée de PC (1 poste par stagiaire), vidéo-projecteur, Espace de pause
Programme de la formation
Avant de commencer
- ECMAScript
- let et const remplacent var
- Arrow functions (fonctions lambda)
- Templates (gabarits)
- Objets littéraux
- Clonage d’objets
- Symboles
- Registre des symboles
- Collections et dictionnaires
- Spread operator
- for … of
- Paramètres de fonctions par défaut
- Destructuring – Affectation par décomposition
- Promises (promesses)
- Babel et Webpack
- Le transpileur Babel
- Le module bundler Webpack
Premiers pas avec Vue.js
- Principes clés de Vue.js
- Roadmap des prochaines versions
- Préparation de l’environnement de développement
- Le squelette de départ
- Installation d’un serveur Web avec NPM
- Le modèle MVVM de Vue.js
- Un premier projet Vue.js
- Propriétés calculées
- computed vs methods
- Data binding
- Noeud texte
- Installer Vue.js Devtools dans Chrome
- Binding bidirectionnel
- Utilisation conjointe des directives v-model et v-bind
- La directive v-html
- Gestion évènementielle
- L’objet $event dans la gestion évènementielle
- Les fonctions preventDefault() et stopPropagation() de l’objet $event
- Suffixes stop et prevent de Vue
- Affichage des langages dans une liste à puces
- Deux paramètres dans la directive v-for
- Arguments dynamiques
- Abréviations
- Directive v-for pour parcourir des objets JSON
- Gestion des évènements clavier
- La directive v-cloak
- La directive v-once
- Classes conditionnelles
- Gestion des styles inline
- Afficher du code HTML conditionnellement
- Mise en forme de l’affichage avec Bootstrap
Les composants Vue.js
- Composant global
- Un premier composant global
- Un premier composant local
- Ajouter des données dans un composant
- Ajouter des méthodes dans un composant
- Passer des données aux composants enfants avec des props
- Accès à une prop dans la propriété data du modèle
- Passer des données de la Vue aux composants enfants
- Local vs global
- Custom-events – Envoi de messages au parent par un composant avec $emit
- Lifecycle Hooks
- Organiser une application en hiérarchie de composants
- Passer des données à un composant avec des slots (Slots simples, nommés, avec portée)
- Filtres (locaux et globaux)
- Propriétés calculées (computed properties)
- Observateurs (watchers)
- Requêtes asynchrones dans un observateur
- Animations et transitions
Les applications SPA (Single Page Applications)
- Création d’une application SPA avec vue-router
- Allure du lien actif
- Indicateurs de navigation – Vue Router Navigation Guards
- Indicateurs de navigation globaux
- Indicateurs de navigation par route
- Indicateurs de navigation par composant
- Routage – Transition entre les pages
L’interface en ligne de commande Vue-Cli
- L’outil Vue-Cli
- Architecture de l’application
- Les fichiers .vue
- App.vue
- Main.js
- components/HelloWorld.vue
- Création et modification d’une application avec Vue-Cli
- Une deuxième application avec Vue-Cli
- Mise en forme des données avec Bootstrap
- Fonctions de rendu (Render Methods)
- Templates vs render functions & JSX
- Vue-Cli et JSX
- Installation de Vue-Cli 3 et de Sass-loader
- Création d’un projet JSX
- Composants fonctionnels
- Plusieurs paramètres dans la fonction render()
- Transmission des évènements dans un composant fonctionnel
Le gestionnaire d’état Vuex
- Installation de Vuex
- Une première application Vuex
- Accès aux méthodes du store dans les composants
- Accès à l’état du store dans les composants
- L’option plugins de Vuex
- Alternative à Vuex
- Vuex et les formulaires
- Validation d’un formulaire dans VueJS
Plus loin avec Vue.js
- Mixins (locaux, globaux)
- Plugins
- Directives personnalisées – Un premier exemple
- Directive personnalisée avec arguments
- Rendre son code robuste grâce aux Prop typées
- NuxtJS
- test.vue
- Développement d’applications mobiles