-
Filière :
Développement logiciel
-
Sous-filière :
Technos Web (PHP, JS...)
-
Référence
DW-VUE
-
Durée
3 jours (21 h)
-
Prix unitaire HT
1 950 € HT
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
- developpeurs
Pré-requis
Bonne connaissance de JavaScript
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
Qualité
Cette formation est accessible aux personnes en situation de handicap, nous contacter en cas de besoin d’informations complémentaires.
Programme mis à jour le