IB FORMATION : 07. Vue.js - Développement d'applications web
Organisme
92911 PARIS LA DEFENSE CEDEX
Contact
Durée
21 heuresModalités
- Classe virtuelle
- Présentiel
Une attestation de fin de formation sera remise au stagiaire à l'issue de la formation
Prix
Public
Développeurs web, intégrateurs, architectes logiciel, chefs de projet…
Pré-requis
Avoir une bonne connaissance pratique de HTML et la maîtrise et de JavaScript (ES5 minimum).
Objectifs pédagogiques
- Maîtriser l’environnement du développeur JS
- Comprendre les principes clés de Vue.js
- Savoir développer une SPA avec Vue.js
- Connaître les outils indispensables au développement d'applications web dynamiques avec Vue.js
- Appliquer les bonnes pratiques à un projet Vue.js
Programme détaillé
EN PRÉSENTIEL / A DISTANCE
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, …)
- Émettre 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
APRÈS LA SESSION
Retrouvez sur le Learning Hub ib :
- Des vidéocasts pour revenir sur les points clés de la formation
- Des vidéos-tutos pour vous accompagner dans la mise en œuvre de vos acquis
LES PLUS DE LA FORMATION
- Une formation qui alterne des exposés, des cas pratiques et une synthèse.
- Toutes nos formations sont animées par des consultants-formateurs expérimentés et reconnus par leurs pairs.
- Répartition théorie/pratique : 45% / 55%
- Cette formation se compose d’une alternance d’apports théoriques, de travaux pratiques, de démonstrations, de phases d’échanges entre participants et de synthèses de la part du formateur.