Informatique

Vue.JS

Vue.JS

Réf 4-JS-VUE
Durée 3 jours

Objectifs

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

Infos

Sessions à venir

03 jun-05 jun 2024
27 nov-29 nov 2024

Certifications :

Nous consulter

Programme

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

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

En savoir +

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)

Moyens pédagogiques

Réflexion de groupe et apports théoriques du formateur
Travail d'échange avec les participants sous forme de
Utilisation de cas concrets issus de l'expérience professionnelle
Validation des acquis par des questionnaires, des tests d'évaluation, des mises en situation et des jeux pédagogiques.
Remise d'un support de cours.

Possibilité de certification

Nous consulter.