M2i Formation

Découvrez notre formationVue.js - Développement

Présentiel

3 jours (21 heures) - JVS-VUE

Objectifs pédagogiques

  • Mettre en oeuvre le Framework Vue.js
  • Utiliser Vue.js dans le cadre d'une application SPA (Single Page Application) et d'applications clientes plus conventionnelles.

Niveau requis

Avoir une très bonne connaissance de HTML 5, de CSS 3, et de JavaScript.

Public concerné

Développeurs de sites Web désirant développer des applications actuelles Front End.

1 800 € HT

Pour connaître les prochaines dates disponibles, en présentiel ou à distance, contactez-nous.

Contactez-nous

Jour 1

Présentation de Vue.js

  • Migration vers Vue.js
  • MVVM selon Vue.js
  • Les outils nécessaires liés à l'utilisation de Vue.js
  • La gestion des interfaces graphiques par les données
  • La liaison de données
  • Les structures de contrôle
    • Répétitives
    • Alternatives
  • Notion d'event
  • Notion de component

Exemples de travaux pratiques (à titre indicatif)

  • Installation des outils nécessaires et des librairies
  • Compréhension de Vue CLI
  • Création d'une première application simple sans composant et hors Vue CLI
  • Ecriture d'une page Vue de base
  • Création de la partie modèle
  • Création de la partie interface graphique
  • Intégration de l'interpolation et du double binding
  • Utilisation des directives de boucle
  • Test pour création de l'interface

Jour 2

Les essentiels de Vue.js

  • Cycle de vie d'une requête dans Vue.js et son rôle
  • Les modèles
  • Notion d'interpolation
  • Attributs, filtres et directives
  • Les propriétés calculées
  • Différence entre v-model et v-bind
  • Le v-model
  • Gérer des listes
  • L'affichage conditionnel
  • Event management
  • Les composants dynamiques
  • Echange de données entre composants

Exemples de travaux pratiques (à titre indicatif)

  • Amélioration de l'application développée le jour précédent
  • Ajout de boucles de gestion à partir de tableaux internes et issus d'appels REST
  • Binding de données
  • Création des premiers composants Vue réutilisables
  • Application permettant de comprendre l'échange de données entre composants (du père au fil, du fils au père, entre frères)

Aspects avancés de Vue.js

  • Transitions et transitions CSS
  • Transitions dynamiques
  • Diverses animations
  • Les fonctions "render"
  • Les divers types de composants
    • Les composants fonctionnels
    • Les Single File Components
  • Les différents types de directives
  • Créer une directive adaptée

Exemples de travaux pratiques (à titre indicatif)

  • Ajout de transition Vue.js dans le projet
  • Utilisation des directives déjà présentes
  • Création de nouvelles directives

Jour 3

Les extensions

  • Type mixin
  • Type plug-in
  • Les extensions (composants) monofichier

Exemple de travaux pratiques (à titre indicatif)

  • Développement de composants monofichier (Single File Component)

Le routing dans Vue.js

  • Présentation des routes
  • Les modes
  • Les liens
  • Vue initiale et liens

Exemple de travaux pratiques (à titre indicatif)

  • Ajout du traitement des routes dans le projet Vue.js

Testez vos connaissances

Objectif : Ce test a pour objectif de tester vos connaissances sur le langage JavaScript et ses implications objet.

Complétez votre formation

En cliquant le bouton « Accepter », vous acceptez l’utilisation de cookies pour réaliser des mesures d’audiences et vous permettre d’enregistrer vos préférences de navigation. En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de cookies.

Accepter Paramètres En savoir plus