CATALOGUE Code & Data Formation JavaScript Apprendre Vue JS 3 Apprentissage de Vue 3 avec un Projet HTML Simple

Apprentissage de Vue 3 avec un Projet HTML Simple

Un premier projet Vue.js

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

Création de votre premier projet Vue 3

Objectifs

Les objectifs de cette vidéo sont les suivants :

Apprendre à installer et configurer un environnement de développement pour Vue 3.
Comprendre comment intégrer Vue 3 dans un projet HTML avec un CDN.
Créer une application Vue 3 basique et la monter dans le DOM.
Utiliser des interpolations pour afficher des données dynamiques dans la vue.

Résumé

Développez votre première application Vue 3 en intégrant Vue.js à un projet HTML simple. Découvrez les bases du framework JavaScript et comment utiliser des bibliothèques CDN pour le développement rapide.

Description

Cette leçon vous guide à travers le processus de création d'une première application avec Vue 3 en utilisant un simple fichier HTML. Vous allez apprendre à installer et configurer les outils nécessaires comme Visual Studio Code et l'extension Emmet pour faciliter l'écriture du code HTML. Nous détaillerons l'intégration du CDN Vue 3, la création d'une application Vue 3 et l'affichage dynamique du contenu.

Les étapes incluent la création d'un dossier de projet, l'écriture du squelette de l'application, l'intégration de Vue 3 via un CDN, et la mise en place des éléments de base dans le fichier HTML. Vous apprendrez à utiliser les méthodes createApp et mount pour initialiser et monter votre application Vue, ainsi qu'à définir des données et les afficher avec des interpolations.

Ce tutoriel est idéal pour les débutants souhaitant se familiariser avec Vue 3 et comprendre comment intégrer ce framework moderne dans des projets HTML. À la fin de cette leçon, vous serez capable de créer et exécuter une application Vue 3 basique sur un serveur local.

Questions fréquentes

Quelles sont les étapes principales pour créer une application Vue 3 avec un projet HTML simple ?

Les étapes principales incluent la création d'un dossier de projet, la configuration d'un environnement de développement, l'intégration de Vue 3 via un CDN, la création et le montage de l'application Vue et l'affichage de données dynamiques.

Pourquoi utiliser un CDN pour intégrer Vue 3 ?

L'utilisation d'un CDN permet de rapidement inclure Vue 3 dans un projet sans besoin de configuration complexe, facilitant ainsi le démarrage rapide des projets.

Comment afficher des données dynamiques dans une application Vue 3 ?

Pour afficher des données dynamiques, vous pouvez utiliser des interpolations dans le template HTML en insérant des accolades doubles autour des propriétés de données définies dans la section data de l'application Vue.

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