VueJS, développement d'applications web
Descriptif de la formation
Vue.js est l'un des Frameworks de développement front-end les plus légers et simple d’utilisation pour créer des applications Web modernes. Vue.js gagne rapidement en popularité avec une très forte communauté open-source. Cette formation vous apprendra tous les principes fondamentaux du développement Vue, notamment la création de composants, de directives, de filtres, le routage, la gestion d'état Vuex et le déploiement en production. A l’issue de la formation, vous serez capable de développer une application Single Page App (SPA) complète avec le framework open source JavaScript Vue.js.
Action collective OPCO ATLAS -
Les objectifs
En quelques mots...
Public
Développeurs web, intégrateurs, architectes logiciel, chefs de projet…
Pré-requis
Avoir une bonne connaissance pratique de HTML
Maîtrise de JavaScript (ES5 minimum)
Méthodes et Moyens pédagogiques
Modalité : Formation présentielle ou Formation distancielle (classe virtuelle) - Inter / Intra - Groupes de 4 à 12 stagiaires
Méthodes : Présentation des concepts, discussion technique, démonstrations, exercices et TP
Matériel :
Présentiel : Un poste informatique par stagiaire connecté à internet, à une imprimante en réseau et au réseau informatique,
Les salles sont équipées d’un tableau interactif ou d’un vidéoprojecteur et d’un paperboard
Distanciel: Aelion met à disposition de chaque stagiaire
- Un PC équipé des outils et logiciels nécessaires à la formation auquel vous accédez via un outil de prise en main à distance
- Un accès à un outil de classe virtuelle (Meet)
Support de formation : Un support de formation sera remis à chaque stagiaire en fin de formation : plateforme collaborative intégrant le code source des exercices réalisés en formation, webographie, mémos
Modalités de suivi et d'évaluations
Questionnaire d’évaluation des pré-requis, suivi des connaissances tout au long de la formation, Evaluation des acquis en fin de formation
Questionnaire d’évaluation de la satisfaction en fin de stage, feuille de présence émargée par demi-journée par les stagiaires et le formateur, Attestation de fin de formation
Informations pratiques
Accessibilité , modalités et délais d'accès
Programme mis à jour le 03/12/2024
Programme détaillé
IDENTIFIER LES SPECIFICITES DE VUE.JS
- Les Single Page Applications
- Les limites de Javascript et de jQuery
- Lenteurs du DOM
- Positionnement de Vue.js
- Démonstration :
- - Installation de l’environnement de travail
- - Code en direct (live-coding)
IDENTIFIER ET DEFINIR LES PRINCIPES CLES DE VUE.JS
- Migration vers Vue.js et les versions de Vue.js
- MVVM selon Vue.js
- Les outils nécessaires liés à l'utilisation de Vue.js (Vue CLI, etc.)
- Les notions et syntaxes de bases
- Notion de component
- La liaison de données
- Les structures de contrôle
- Notion d'event
- Démonstration :
- - Initialiser un projet Vue.js et manipuler ses premiers composants
DEVELOPPER UNE SPA AVEC VUE.JS
- 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
- - Le v-model et la macro defineModel
- - Gérer des listes (v-for, …)
- - L'affichage conditionnel (v-if, …)
- - Event management (v-on, handlers, …)
- - Les composants dynamiques
- - Echange de données entre composants
- L’organisation des composants
- - Mixins (Vue 2) ou composable functions (Vue 3 composition API)
- - Custom Directives
- - Render Functions & JSX
- - Plugins
CONNAITRE LES CONCEPTS ET OUTILS INDISPENSABLES AU DEVELOPPEMENT D'APPLICATIONS WEB DYNAMIQUES AVEC VUE.JS (1/2)
- Utiliser une librairie de composants graphiques avec Vuetify
- Créer une navigation avec Vue-router
- - Présentation des routes
- - Les modes
- - Les liens
- - Vue initiale et liens
- - Router Hooks et Composition API
CONNAITRE LES CONCEPTS ET OUTILS INDISPENSABLES AU DEVELOPPEMENT D'APPLICATIONS WEB DYNAMIQUES AVEC VUE.JS (2/2)
- Gérer des états avec Vuex
- - Présentation de Flux et Redux
- - Gestion de store
- Consommer des API REST avec Axios
APPLIQUER LES BONNES PRATIQUES A UN PROJET VUE.JS
- La rétrocompatibilité pour les vieux navigateurs
- La qualité du code avec les tests
- Un code plus maintenable avec TypeScript, ES Lint, Prettier
- Un code plus performant avec les outils de builds (webpack vs vite, options de compilation pour la production ou le développement)