Informatique Informatique
Référence formation : 5M-AG-VUE - Durée : 3 jours

Cliquez sur l'image ci-contre ou sur le lien ci-dessous
pour télécharger notre programme de formation professionnelle au format PDF
(nécessite © Acrobat Reader)

Objectifs

Vue.JS est un facilitateur de création d’interfaces Web performance et dynamiques, dans le sens où il met à profit des langages connus et reconnus : HTML, CSS, Javascript.

Bien que très simple d’utilisation, il permet de développer des grandes applications en intégrant le pattern de components, tout en étant extrêmement léger.

A l’issue de notre formation «Vue.JS», vous serez en mesure de :

  • Comprendre la vision et l’essence même de Vue.JS
  • Créer des composants Vue et exploiter les avantages apportés par le fichier .vue
  • Prototyper des composants rapidement
  • Utiliser le Tooling existant
  • Développer un annuaire pour accentuer votre compréhension de Vue
  • Tester vos composants

Pré-requis

  • Connaissances HTML et CSS
  • Bonne connaissance de Javascript, (idéalement une expérience avec un autre framework front tel que React ou Angular)
  • Développeurs

Plan de cours

1. Introduction

  • Vue.js un framework progressif
  • Data driven interfaces
  • Ecosystème
  • Binding
  • Conditionnelles
  • Boucles
  • Evénements
  • Composants

2. 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
  • 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

3. 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

4. Extensions

  • Mixins
  • Plugins
  • Single File components

5. Routing avec vue-router

  • Vue Router
  • Routes
  • Modes
  • Lien
  • La vue principale
  • Utilisation basique dans l'annuaire

6. State global avec vuex

  • Vuex
  • State
  • Getters
  • Mutations
  • Actions
  • Modules
  • Utilisation basique dans l'annuaire

Retour haut de page