Votre partenaire formation 100% digital

Vue.js

Créez et combinez des « Web Components » avec VueJS pour réaliser des interfaces web interactives de nouvelle génération

  • Référence

    VJS

  • Durée

    3 jours (21h)

  • Prix unitaire HT

    1950 €

pictogramme calendrier Prochaines sessions

Prochaines sessions - Vue.js
Date de début Ville Prix unitaire HT
26 juin 2023 A distance 1950 € Réserver
11 septembre 2023 Paris 1950 € Réserver
13 novembre 2023 Paris 1950 € Réserver

pictogramme information Description

Frameworks et librairies MVC pullulent dans l’éco-système JavaScript, Vue.js se situe à la confluence des deux mondes en alliant avec efficacité : simplicité de la librairie et richesse du (micro)framework. Vue.js est par ailleurs très souple et extensible par l’ajout de plugins ou d’autres librairies. Vue.js est l’étoile montante de 2016 des librairies orientées composants.
Cette formation pratique donne les clés pour la réalisation d’application complète en exploitant au maximum les capacités de l’écosystème Vue.js.

pictogramme progamme Objectifs pédagogiques

  • Comprendre les principes de VueJS
  • Savoir choisir les briques utiles à une SPA
  • Être capable de développer une SPA avec VueJS

pictogramme cible Public cible

Architectes techniques, Chefs de projet Web, Développeurs, Experts front-end.

pictogramme check liste Pré-requis

Connaissance de base en HTML, CSS, JavaScript

Modalités d’évaluation

Evaluation des acquis de la formation par le biais de cas pratiques et/ou mises en situation. Attestation de formation remise à chaque participant.

Méthodes pédagogiques

  • Exposés
  • Cas pratiques
  • Echanges d’expérience

Questionnaire d’évaluation de satisfaction à chaud complété par chaque participant à l’issue de la formation.

Dernière mise à jour : mars 2023

Salle équipée de PC (1 poste par stagiaire), vidéo-projecteur, Espace de pause

pictogramme information Programme de la formation

Avant de commencer

  • ECMAScript
  • let et const remplacent var
  • Arrow functions (fonctions lambda)
  • Templates (gabarits)
  • Objets littéraux
  • Clonage d’objets
  • Symboles
  • Registre des symboles
  • Collections et dictionnaires
  • Spread operator
  • for … of
  • Paramètres de fonctions par défaut
  • Destructuring – Affectation par décomposition
  • Promises (promesses)
  • Babel et Webpack
  • Le transpileur Babel
  • Le module bundler Webpack

Premiers pas avec Vue.js

  • Principes clés de Vue.js
  • Roadmap des prochaines versions
  • Préparation de l’environnement de développement
  • Le squelette de départ
  • Installation d’un serveur Web avec NPM
  • Le modèle MVVM de Vue.js
  • Un premier projet Vue.js
  • Propriétés calculées
  • computed vs methods
  • Data binding
  • Noeud texte
  • Installer Vue.js Devtools dans Chrome
  • Binding bidirectionnel
  • Utilisation conjointe des directives v-model et v-bind
  • La directive v-html
  • Gestion évènementielle
  • L’objet $event dans la gestion évènementielle
  • Les fonctions preventDefault() et stopPropagation() de l’objet $event
  • Suffixes stop et prevent de Vue
  • Affichage des langages dans une liste à puces
  • Deux paramètres dans la directive v-for
  • Arguments dynamiques
  • Abréviations
  • Directive v-for pour parcourir des objets JSON
  • Gestion des évènements clavier
  • La directive v-cloak
  • La directive v-once
  • Classes conditionnelles
  • Gestion des styles inline
  • Afficher du code HTML conditionnellement
  • Mise en forme de l’affichage avec Bootstrap

Les composants Vue.js

  • Composant global
  • Un premier composant global
  • Un premier composant local
  • Ajouter des données dans un composant
  • Ajouter des méthodes dans un composant
  • Passer des données aux composants enfants avec des props
  • Accès à une prop dans la propriété data du modèle
  • Passer des données de la Vue aux composants enfants
  • Local vs global
  • Custom-events – Envoi de messages au parent par un composant avec $emit
  • Lifecycle Hooks
  • Organiser une application en hiérarchie de composants
  • Passer des données à un composant avec des slots (Slots simples, nommés, avec portée)
  • Filtres (locaux et globaux)
  • Propriétés calculées (computed properties)
  • Observateurs (watchers)
  • Requêtes asynchrones dans un observateur
  • Animations et transitions

Les applications SPA (Single Page Applications)

  • Création d’une application SPA avec vue-router
  • Allure du lien actif
  • Indicateurs de navigation – Vue Router Navigation Guards
  • Indicateurs de navigation globaux
  • Indicateurs de navigation par route
  • Indicateurs de navigation par composant
  • Routage – Transition entre les pages

L’interface en ligne de commande Vue-Cli

  • L’outil Vue-Cli
  • Architecture de l’application
  • Les fichiers .vue
  • App.vue
  • Main.js
  • components/HelloWorld.vue
  • Création et modification d’une application avec Vue-Cli
  • Une deuxième application avec Vue-Cli
  • Mise en forme des données avec Bootstrap
  • Fonctions de rendu (Render Methods)
  • Templates vs render functions & JSX
  • Vue-Cli et JSX
  • Installation de Vue-Cli 3 et de Sass-loader
  • Création d’un projet JSX
  • Composants fonctionnels
  • Plusieurs paramètres dans la fonction render()
  • Transmission des évènements dans un composant fonctionnel

Le gestionnaire d’état Vuex

  • Installation de Vuex
  • Une première application Vuex
  • Accès aux méthodes du store dans les composants
  • Accès à l’état du store dans les composants
  • L’option plugins de Vuex
  • Alternative à Vuex
  • Vuex et les formulaires
  • Validation d’un formulaire dans VueJS

Plus loin avec Vue.js

  • Mixins (locaux, globaux)
  • Plugins
  • Directives personnalisées – Un premier exemple
  • Directive personnalisée avec arguments
  • Rendre son code robuste grâce aux Prop typées
  • NuxtJS
  • test.vue
  • Développement d’applications mobiles