Informatique Informatique
Référence formation : 4-JS-VUE - Durée : 3 jours

 
  • Objectifs
  • Pré-requis
  • Pédagogie
Comprendre la vision et l’essence même de Vue.JSCréer des composants Vue et exploiter les avantages apportés par le fichier .vuePrototyper des composants rapidementUtiliser le Tooling existantDévelopper un annuaire pour accentuer votre compréhension de VueTester vos composants
Connaissances HTML et CSSBonne connaissance de Javascript, (idéalement une expérience avec un autre framework front tel que React ou Angular)

Méthodes pédagogiques

Présentation des concepts, démonstration, exécution, synthèse et exercices pratiques d'assimilation

Modalités pédagogiques

Présentiel - Distanciel - AFEST

Moyens pédagogiques

Formateur expert du domaine - 1 ordinateur, 1 support de cours version papier ou numérique, un bloc-note et un stylo par personne - vidéo projecteur - tableau blanc

Modalités d'évaluation

Positionnement préalable oral ou écrit - Evaluation formative tout au long de la formation - Evaluation sommative faite par le formateur ou à l'aide de la certification NULL

Public concerné

Salariés - Demandeur d'emploi - Reconversion professionnelle

Si vous êtes en situation de handicap, vous pouvez joindre notre référent Handicap. Voir notre fiche Accès correspondante.

Contenu pédagogique

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