FORMATION VUE.JS

Les objectifs

• Comprendre la philosophie et le fonctionnement de Vue JS
• Ecrire des composants vue et découvrir les avantages des fichiers .vue
• Apprendre à prototyper rapidement des composants
• Découvrir le Tooling existant
• Apprendre Vue en développant un annuaire tout le long
• Apprendre à tester ses composants

Pré-requis

• Connaissances de HTML et CSS
• Bonne connaissance en Javascript, voire expérience avec un autre framework front comme React ou Angular
• Ordinateur portable à apporter

Le programme de la formation Vue.js

Jour 1

• Introduction
  • Vue.js un framework progressif
  • Data driven interfaces
  • Ecosystème
  • Binding
  • Conditionnelles
  • Boucles
  • Evénements
  • Composants
• Bases
  • Instance Vue
  • Cycle de vie
  • Templates
  • Interpolation
  • attributs
  • Directives
  • Filtres
  • Computed properties
  • v-model
  • Inputs Natifs
  • Rendering de Listes
  • Caveats
  • (TP) Début de l'annuaire
  • Creation d'une recherche simple
  • Class and Style bindings
  • Rendering conditionnel
  • Gestion d'Evénements
  • (TP) Edition sur place
  • Ajout d'édition sur place des personnes

Jour 2

• Bases
  • Composants
  • Props
  • Evénements
  • Slots
  • Composants dynamiques
  • v-model
  • (TP) Refactoring annuaire
  • Création d'un composant pour l'affichage
  • Utilisation de vue build
  • Utilisation du template webpack
• Avancé
  • Réactivité avancé
  • Transitions
  • CSS transitions
  • CSS animations
  • Transitions de listes
  • Transitions dynamiques
  • (TP) Animations
  • Animations sur la recherche
  • Animations sur l'édition
  • Render functions
  • Composants functionels
  • Directives Custom
  • (TP) Optimisations
  • Exemple pratique de l'utilité des composants fonctionnels
  • Création d'une directive custom

Jour 3

• Extensions
  • Mixins
  • Plugins
  • Single File components
• Routing avec vue-router
  • Vue Router
  • Routes
  • Modes
  • Lien
  • La vue principale
  • Utilisation basique dans l'annuaire
• State global avec vuex
  • Vuex
  • State
  • Getters
  • Mutations
  • Actions
  • Modules
  • Utilisation basique dans l'annuaire