Formation - Vue.js - Développement d'applications Web

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