Formation - Vue.js - Développement d'applications Web
Prérequis
- Disposer d'une bonne connaissance pratique de HTML et maîtriser JavaScript (ES5 minimum)
- Disposez-vous des connaissances nécessaires pour suivre cette formation ? Testez-vous !
Public admis
- Salarié en Poste
- Entreprise
Demandeur d'emploi et Etudiant non admis
Financement
- Votre OPCO
- Financement personnel
Financement CPF non pris en charge
Modalités
- En entreprise
- À distance
- En centre
Objectifs pédagogiques
- Pendant la formation, le formateur évalue la progression pédagogique des participants via des QCM, des mises en situation et des travaux pratiques. Les participants passent un test de positionnement avant et après la formation pour valider leurs compétences acquises.
Programme de la formation
1 - La librairie Vue.js
- Présentation de Vue.js
- Installation de vue-cli
- Créer une application
- Tester l’application en développement
- Architecture de projet
2 - Les fichiers de composants
- Les Single File Components (fichier.vue)
- Créer un composant
- Lier un composant à l’application
- Le template
- La mécanique du composants (module CommonJS)
- L’encapsulation de style
3 - Les syntaxes d’interpolation
- Les données du composants (propriété data)
- Opérateur moustache et expression JS
- Injecter du texte et du HTML (v-html)
- Injecter sans prendre en compte les changements (v-once)
- Les filtres
- Insérer un composant (balise de composant)
4 - Rendu conditionnel
- Les directives v-if, v-else et v-else-if
- Affichage avec existence dans le DOM permanente avec v-show
- Utiliser v-if avec la balise template
5 - Affichage de liste
- La directive v-for et ses syntaxes (in / of)
- L’attribut key
- Immutabilité des éléments de tableau
- Créer un range
- Utiliser v-for avec la balise template
- Priorité entre v-if et v-for
6 - Lier des attributs
- Lier un attribut avec v-bind
- Class-binding avec v-bind:class
- Style-binding avec v-bind:style (prefixer automatique)
- Les arguments dynamiques (v-bind[...])
- Syntaxe raccourcis (:prop)
7 - Gérer les événements
- La directive v-on
- Les modificateurs d’événement (stop, prevent, ...)
- Les modificateurs de touches (enter, space, ...)
- Créer des méthodes pour gérer vos événements
- Les arguments dynamiques (v-on[...])
- Syntaxe raccourcis (@event)
8 - Les formulaires
- La directive v-model
- Liaison de valeur (checkbox, radio, select)
- Les modificateurs (lazy, number, ...)
9 - Les composants avancés
- Passer des données à un composant avec v-bind
- Mise en cache de méthodes avec les propriétés calculées : methods VS computed
- Les watchers (watch)
- Le cycle de vie d’un composant (created, mounted, ...)
- Emettre des événements depuis un composant ($emit, utilisation avec v-model)
- Les slots
10 - Routing et navigation
- Installation et mise en place de vue-router
- Configuration du router
- Les routes
- Les liens (router-link)
- Les vues (router-view)
- Gérer les paramètres
- Redirections et alias
- Les navigations imbriquées
- Sécurité des routes avec les guards
11 - Gérer l’état de son application avec Vuex
- L’architecture Flux
- Installation et mise en place de vuex
- Création du store
- Définition et accès à l’état
- Définition et accès aux mutations
- Mutualiser les accès avec les getters
- Gérer des mutations asynchrones avec les actions
- Des vidéocasts pour revenir sur les points clés de la formation
- Des vidéos-tutos pour vous accompagner dans la mise en oeuvre de vos acquis

Proposé par
IB Cegos
"Formations aux technologies et métiers du Numérique"

Proposé par
IB Cegos
