Créer des applications avec Vue.js
Apprenez à créer des Single Page Applications (SPA) avec le framework web Vue.js
À propos de la formation
Vue.js est un framework web progressif qui permet non seulement de créer des applications complètes en JavaScript, les Single Page Applications (SPA) mais aussi à enrichir des pages web plus classiques avec des composants Vue.js dynamiques. Vous apprendrez les fondements et les concepts de Vue, ainsi que des fonctionnalités avancées comme le routage (Vue Router) ou la gestion des états globaux (Pinia). Cette formation est à jour pour la dernière version de Vue en date (Vue.js 3, Composition API...).
Programme
JavaScript aujourd’hui
- La norme ECMAScript
- Les concepts importants (modules ES6, Promises...)
- Node.js et NPM
- Les outils de packaging (Webpack, Vite...)
- Présentation de Vite
- Vue.js et les IDE (Visual Studio Code, Volar...)
Présentation de Vue.js
- Qu'est-ce que Vue ?
- L'architecture en composants
- Le Reactive Programming
- Le DOM virtuel
- Les alternatives (React, Angular)
- Installation de Vue (Vue CLI, create-vue)
- Le serveur de développement
- Vue Devtools
- Vue Playground
Première prise en main
- Créer son premier composant
- Les Single File Components (.vue)
- Styles scopés et préprocesseurs CSS
- Les basiques des templates (interpolation, v-bind, v-on...)
- Options API vs Composition API
- Debugger et breakpoints
Réactivité et états
- Single Source of Truth
- Les états (ref, reactive)
- Les états dérivés (computed, functions)
- Les effets de bord (watch, watchEffect...)
- Timing de mise à jour du DOM
Plus loin avec les templates
- Les classes et les styles
- Le rendu conditionnel (v-if, v-else, v-show...)
- Le rendu de listes (v-for, :key...)
- Les formulaires (v-model, inputs, textarea, select...)
- Les modifiers
- Les refs HTML
Assembler des composants
- Créer des composants
- Les propriétés (props)
- Les évènements (emit)
- Cycle de vie des composants
- Les slots
- Transmission des attributs
Routage et navigation
- Présentation de Vue Router
- Routage simple
- Routage dynamique
- Routes nommées
- Alias et redirections
- Page 404
- Navigation guards
Stores et états globaux
- Utiliser des modules JavaScript
- Provide / Inject
- Présentation de Pinia (ex. VueX)
- Les states
- Les getters
- Les actions
Aller plus loin
- Les fonctions composables
- Étendre Vue (directives, plugins...)
- Les bonnes pratiques
- TypeScript
- Server Side Rendering (SSR)
- Vue en production
- L'écosystème Vue (Nuxt, VuePress, NativeScript...)
Pré-requis
À destination des développeurs web ou architectes techniques. De bonnes connaissances en HTML et en JavaScript sont souhaitables.
Durée de la formation
3 jours