Vue.js

Objectifs

- Comprendre les caractéristiques d'une Single Page App
- Découvrir la philosophie et le fonctionnement du framework Vue.js
- Prototyper une application web avec le framework progressif Vue.js
- Savoir utiliser les outils de développements Vue.js dans un navigateur, un IDE et un terminal
- Réutiliser du code grâce aux composants
Les programmes, pré-requis et objectifs sont régulièrement mis à jour afin d'être au plus proche des avancées de la technologie. Vous pouvez consulter la dernière version en suivant le lien internet du programme : https://www.humancoders.com/formations/vue-js

Programme de la formation

Les programmes, pré-requis et objectifs sont régulièrement mis à jour afin d'être au plus proche des avancées de la technologie. Vous pouvez consulter la dernière version en suivant le lien internet du programme : https://www.humancoders.com/formations/vue-js
Jour 1: une application web simple avec Vue
Introduction
- SPA et les frameworks JavaScript
- Vue.js, un framework progressif
- Data Driven Interfaces
- Ecosystème
- Réactivité basique avec l'interpolation et v-bind
- Conditionnelles
- Boucles
- Evénements
Bases
- Instance Vue
- Templating
- Interpolation
- Attributs
- Directives
- Filtres
- Comparatif Vue vs jQuery
- v-model
- Inputs Natifs
- Boucler sur de la donnée
- Rendering conditionnel
- Manipuler des classes
- Propriétés calculées
- Écoute d'événements
Mises en pratique avec un annuaire de films :
- Listing d'éléments d'un catalogue
- Ajouter, supprimer et éditer les éléments d'une liste
- Ajout de filtres par catégories
Jour 2 : une application faite de composants
Composants
- Rôle du composant dans une SPA
- Props
- Evénements
- Slots
- Composants dynamiques
Mises en pratique - Utiliser des composants dans son application :
- Single File Components
- Création d'un composant pour l'affichage
- Faire communiquer les composants entre eux
Vue CLI
- Qu'est-ce que Vue CLI ?
Mise en pratique : migrer le projet vers le CLI
Jour 3 : routeur, plugins et API
Extensions
- Mixins
- Plugins
Mise en pratique : utiliser un plugin
Cycle de vie
Mise en pratique : manipuler de la donnée distante
Routing avec vue-router
- Vue Router
- Routes
- Modes
- Lien
- La vue principale
Mise en pratique : _mise en place d'un routeur dans l'annuaire_
Bonus
En fonction des profils des stagiaires, et du temps restants, les notions suivantes pourront être
abordées.
Transitions visuelles
- Les transitions CSS
- Transitions de listes avec Vue
- Transitions dynamiques
Mise en pratique : ajout d'animations dans la liste
Un state global avec Vuex
- Que est ce qu'un Store
- Pourquoi et quand l'utiliser ?
- Limites et alternatives
- Vuex
- State
- Getters
- Mutations
- Actions
- Modules
Mise en pratique : utilisation d'un Store dans l'annuaire

Validation et sanction

Attestation de formation

Type de formation

Non certifiante

Sortie

Sans niveau spécifique