Vue.JS est en v3 depuis septembre 2020.
Parmi les nouveautés importantes de cette version, la "Composition API". Afin de la prendre en main, nous allons développer ensemble une application qui vous permettra de découvrir comment développer les fonctionnalités les plus courantes à l'aide des cette nouvelle API très riche.
Au programme de cette formation Vue.js 3 par la pratique
Voici les points qui seront abordés dans ce cours en vidéo :
- génération d'une nouvelle application Vue 3 à l'aide de la CLI
- architecture d'une application vue.js 3,
- création de formulaire, soumission et reset,
- création et émission de custom events dans le contexte de la Composition API,
- customisation du routage,
- création d'un service,
- utilisation des lifecycle hooks dans le contexte de la Composition API,
- utilisation de computed properties et de watchers dans le contexte de la Composition API,
- implémentation d'un système de filtre avancé (par mots clés et par boutons radio),
- persistance et lecture depuis localStorage,
- création d'une custom modal permettant l' edit in place et de confirmer la suppression.
Cette formation en ligne est accompagnée de son code source.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Prenez les devants et montez en compétences sur Vue.js 3 !
Table des matières de cette formation Vue-JS (durée : 3h36m)
-
Introduction
- Démonstration de l'application que nous allons développer gratuit 00:02:42
- Créer une application Vue 3 gratuit 00:06:20
- Organisation d'une application Vue 3 00:09:01
- Nettoyage de l'application par défaut 00:05:50
- Visite guidée de l'application générée 00:09:40
-
Création et gestion de formulaires Vue 3
- Créer un composant Form gratuit 00:05:00
- Binder des refs à des tags HTML 00:14:12
- Gérer la soumission du formulaire 00:08:57
- Créer un custom event et l'émettre 00:10:01
-
Afficher une collection
- Créer le service "Task Service" 00:07:29
- Créer la view Tasks et permettre de router vers cette view 00:04:12
- Afficher toutes les tâches existantes 00:08:05
- Convertir les temporalités de Kebab Case en valeurs plus lisibles 00:05:48
-
Références et lifecycle hooks
- Utiliser le lifecycle hook onMount() 00:09:45
-
Création d'un système de recherche et de filtres
- Récupérer les saisies des utilisateurs 00:04:26
- Filtrer les tâches 00:07:51
- Afficher les tâches filtrées 00:05:29
- Créer et binder un groupe de boutons radio 00:09:26
- Utiliser un watcher plugué sur la variable bindée sur les boutons radio 00:11:02
-
Validation de formulaire
- Valider un formulaire à l'aide d'une computed 00:06:19
-
Suppression d'une tâche
- Supprimer une tâche 00:09:58
- Persister dans localStorage 00:09:01
-
Modification d'une tâche via une Custom Modal
- Créer un component Modal 00:33:16
- Créer un méthode update() dans le service 00:12:41
- Fichiers sourcestélécharger
- Certificat
Formateur : Codeconcept
Avis des clients
Questions sur le tuto
-
Avec quelle version de logiciel ce tuto est-il compatible ?Vue 3
-
Quel est le niveau requis pour suivre ce tuto ?intermédiaire
-
Que contient le fichier source ?Tout le code de source de l'application développée durant ce tuto !
-
Faut-il connaître Vue 2 avant d'apprendre Vue 3Non, il faut en revanche avoir des bases en HTML, CSS et JavaScript.
