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

Qualiopi
Durée 3 jours (21 heures)
Localisation Partout en France
Logo de IB Cegos - Formation - Vue.js - Développement d'applications Web

Proposé par

IB Cegos

Prérequis

Public admis

  • Salarié en Poste
  • Entreprise

Demandeur d'emploi et Etudiant non admis

Financement

  • Votre OPCO
  • Financement personnel

Financement CPF non pris en charge

Modalités

  • En entreprise
  • À distance
  • En centre

Objectifs pédagogiques

  • Pendant la formation, le formateur évalue la progression pédagogique des participants via des QCM, des mises en situation et des travaux pratiques. Les participants passent un test de positionnement avant et après la formation pour valider leurs compétences acquises.

Programme de la formation

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
Après la session
  • 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
Logo de IB Cegos - Formation Formation - Vue.js - Développement d'applications Web

Proposé par

IB Cegos

"Formations aux technologies et métiers du Numérique"

Voir la fiche entreprise
Logo de IB Cegos - Formation - Vue.js - Développement d'applications Web

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

0 ville proposant cette formation
Logo

La 1ère plateforme pour trouver une formation, choisir son orientation ou construire son projet de reconversion.

© 2024 France Carrière. Tous droits réservés.