CATALOGUE Code & Data Formation JavaScript Apprendre Vue JS 3 Formation sur la Création de Composants Vue Globaux

Formation sur la Création de Composants Vue Globaux

Intruductio

Vidéo non disponible ! Réessayez plus tard

11h 47min

91 leçons

Transcription

Cette leçon fait partie de la formation

Apprendre Vue JS 3

69,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

DescriptionProgrammeAvis

11h 47min

91 leçons

Cette leçon fait partie de la formation

Apprendre Vue JS 3

69,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

Introduction à la Création de Composants Globaux

Objectifs

Les objectifs de cette vidéo sont de :

Comprendre l'utilité des composants dans Vue.js.
Apprendre à créer des composants globaux.
Savoir insérer et réutiliser des composants dans une application Vue.

Résumé

Apprenez à créer et manipuler des composants globaux dans Vue.js pour structurer vos applications web efficacement.

Description

Dans cette leçon, nous allons explorer la création et l'utilisation des composants globaux dans Vue.js. Nous commencerons par comprendre leur utilité dans la structuration d'une application complexe. Les composants permettent une division claire et une réutilisation facile, rendant le développement plus modulaire et maintenable. Nous verrons comment définir un composant global et l'ajouter à une application Vue existante. À travers un exemple pratique, nous créerons un composant simple affichant le mot 'bonjour' et l'utiliserons à plusieurs reprises dans notre application. Nous aborderons également différentes manières d'insérer et d'utiliser ce composant dans la vue HTML. Enfin, nous fournirons quelques bonnes pratiques pour nommer et structurer vos composants afin de maximiser leur réutilisabilité et leur efficacité dans différents projets.

Questions - réponses

Pourquoi utiliser des composants globaux dans Vue.js ?

Les composants globaux permettent de réutiliser des éléments de l'interface utilisateur à travers toute l'application sans avoir à les redéfinir dans chaque vue.

Comment déclare-t-on un composant global dans Vue.js ?

On utilise la méthode App.component en passant le nom du composant et un objet contenant ses options, comme le template.

Peut-on utiliser des composants globaux dans plusieurs applications ?

Oui, les composants globaux peuvent être partagés et réutilisés dans plusieurs applications Vue.js en les important adéquatement.

Programme détaillé

Accueil de la formation

Module 1 - Premiers pas en Vue3

Principes clés de Vue.js 03:39

Préparation de l'environnement de développement 09:53

Le modèle MVVM de Vue.js 02:47

Un premier projet Vue.js 14:11

Un deuxième exemple (projet3) 07:08

Propriétés calculées 09:53

Data binding 05:55

innerHTML et nœud texte 13:44

Binding bidirectionnel 09:58

Utilisation conjointe des directives v-model et v-bind 13:18

Gestion évènementielle 09:24

L'objet $event dans la gestion évènementielle 05:52

Les fonctions stopPropagation() et preventDefault() de l'objet $event 09:56

Suffixes stop et prevent de Vue 08:41

La directive v-for 13:07

Arguments dynamiques 06:45

Directive v-for pour parcourir des objets JSON 03:41

Gestion des évènements clavier 05:24

La directive v-cloak 01:58

La directive v-once 03:37

Classes conditionnelles 13:21

Gestion des styles inline 07:54

Afficher du code HTML conditionnellement 07:48

Super challenge - Partie 1 10:14

Super Challenge - Partie 2 11:28

Super challenge - Partie 3 08:51

Module 2 - Les composants Vue JS

Intruductio 04:02

Un premier composant local 04:13

Ajouter des données dans un composant 08:47

Ajouter des méthodes dans un composant 03:21

Passer des données aux composants enfants avec des props 07:49

Accès à une prop dans le modèle du composant 05:37

Passer des données de l'application aux composants enfants 04:05

Custom-events - Envoi de messages au parent par un composant avec $emit 10:39

Lifecycle Hooks 10:22

Organiser une application en hiérarchie de composants 11:32

Passer des données à un composant avec des slots 05:34

Slots nommés 03:44

Slots avec portée (scoped slots) 07:09

Filtres 11:58

Observateurs (watchers) 08:46

Requêtes asynchrones dans un observateur 06:11

Animations et transitions en JavaScript 06:28

Transitions d'entrée et de sortie avec VueJS 07:34

Transitions d'entrée et de sortie non simultanées 07:39

Transitions entre éléments 07:37

Transitions de listes 09:23

Transitions d'entrée et de sortie avec animate.css 07:27

Animations en JavaScript 12:08

Module 3 - Les applications SPA (Single Page Applications)

Création d'une application SPA avec vue-router 11:40

Indicateurs de navigation - Vue Router Navigation Guards 10:32

Routage – Transition entre les pages 06:57

Module 4 - L'interface en ligne de commande Vue-Cli

Introduction 05:18

Architecture de l'application 06:18

Création et modification d'une application avec Vue-Cli 11:15

Une deuxième application avec Vue-Cli 18:26

Fonctions de rendu (Render Functions) 06:51

Templates vs render functions & JSX 07:25

Composants fonctionnels 03:28

Utilisation des paramètres props et context 04:36

Module 5 - Le gestionnaire d'état Vuex

Introduction 07:17

Accès aux méthodes du store dans les composants 09:40

Accès à l'état du store dans les composants 03:40

L'option plugins de Vuex 06:53

Alternative à Vuex 07:40

Vuex et les formulaires 08:58

Validation d'un formulaire dans VueJS 16:22

Module 6 - Le gestionnaire d'état Pinia

Introduction à Pinia et génération de l'application 03:39

Ménage dans les fichiers et première version de l'interface 03:25

Création du store Pinia 05:58

Interfaçage du store dans le composant App.vue 06:55

Accès au store Pinia dans un composant enfant 03:58

Module 7 - Persistance des données avec Firebase

Introduction à Firebase 04:36

Création d'un projet Firebase 03:07

Création de la base de données Cloud Firestore 03:54

Connexion Firebase-Vue 08:09

Affichage des données dans le DOM 05:54

Saisie et suppression des notes dans l'application 16:46

Module 8 - Plus loin avec Vue.js 3

Mixins 05:10

Mixin global 02:25

Plugins 11:19

Directives personnalisées 14:29

Rendre son code robuste grâce aux props typées 06:54

Développement d'applications mobiles - Découverte de NativeScript-Vue 05:53

Développement d'applications mobiles - Mise en pratique 06:16

Le composant Teleport 07:36

L'API de composition 13:19

Deuxième approche – Utilisation de la fonction reactive() 03:04

Troisième approche – Utilisation de la fonction computed() 02:36

Quatrième approche – Externalisation du calcul réactif 03:25

Vue 3 et TypeScript 13:42