CATALOGUE Code & Data Formation JavaScript Apprendre Vue JS 3 Ajout et Suppression de Notes avec Firebase

Ajout et Suppression de Notes avec Firebase

Saisie et suppression des notes dans l'application

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

Mise en place du formulaire

Objectifs

Les objectifs de cette vidéo incluent :

Création d'un formulaire de saisie de données dans Vue.js.
Gestion des données dans Firestore en temps réel.
Manipulation des données avec UUID pour générer des identifiants uniques.
Utilisation de onSnapshot pour la vérification en temps réel des mises à jour.

Résumé

Apprenez à ajouter et supprimer des notes dans Firestore en utilisant un formulaire dans Vue.js. Cette leçon couvre les étapes essentielles pour créer un formulaire, lier les entrées de données et manipuler la base de données en temps réel.

Description

Dans cette leçon, nous allons voir comment créer un formulaire dans Vue.js pour ajouter et supprimer des notes enregistrées dans Firestore. Vous apprendrez à :

Configurer un formulaire avec des entrées de données pour les dates et les notes.
Lier les entrées du formulaire à des variables en utilisant la directive v-model.
Ajouter des notes à Firestore en utilisant la fonction setDoc avec un identifiant unique généré par UUID.
Supprimer des notes de Firestore en utilisant la fonction deleteDoc.
Afficher en temps réel les notes existantes en utilisant la fonction onSnapshot pour écouter les modifications de la base de données Firestore.

Cette leçon est idéale pour les développeurs débutants qui cherchent à comprendre l'intégration de Firebase avec Vue.js et à gérer des données en temps réel.

Questions fréquentes

Quel type d'input avez-vous utilisé pour la date dans le formulaire ?

Un input de type date a été utilisé pour le champ de date dans le formulaire.

Quelle bibliothèque est utilisée pour générer des identifiants uniques ?

La bibliothèque UUID est utilisée pour générer des identifiants uniques.

Comment supprimez-vous une note de Firestore ?

Une note est supprimée de Firestore en utilisant la fonction deleteDoc.

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