CATALOGUE Code & Data Formation JavaScript Apprendre Vue JS 3 Maîtriser les Modificateurs d'Événements en Javascript

Maîtriser les Modificateurs d'Événements en Javascript

Suffixes stop et prevent de Vue

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

Utilisation des Modificateurs StopPropagation et PreventDefault

Objectifs

Les objectifs de cette vidéo sont :
Comprendre l'utilisation des modificateurs .stop et .prevent.
Simplifier la gestion des événements en Javascript.
Apprendre à mettre en place des contrôles spécifiques et efficaces sur les événements.

Résumé

Cette leçon explique comment simplifier l'utilisation des fonctions StopPropagation et PreventDefault en Javascript grâce aux modificateurs.

Description

Dans cette leçon, nous allons explorer comment utiliser les modificateurs .stop et .prevent dans vos balises HTML pour simplifier l'utilisation des fonctions StopPropagation et PreventDefault de l'objet Javascript Event. Grâce à des exemples concrets, vous verrez comment réagir à différents événements comme les clics et les saisies de clavier sans avoir à écrire de longs morceaux de code. De plus, des modificateurs tels que .once pour des clics uniques et .code pour des touches spécifiques seront abordés. Vous serez également mis au défi avec un exercice pratique qui vous demandera de redimensionner une image en fonction des boutons de la souris que vous utilisez. Par la suite, les solutions à cet exercice seront détaillées pour vous guider dans la mise en œuvre concrète de ces concepts.

Questions - réponses

Quels sont les principaux modificateurs abordés dans cette leçon ?

Les principaux modificateurs abordés sont .stop, .prevent, .once et .code.

Quelle est la fonction du modificateur .once ?

Le modificateur .once permet de limiter l'exécution d'un événement à une seule fois.

Comment peut-on redimensionner une image en fonction des clics de la souris ?

On utilise les modificateurs .left, .right et .middle pour définir différentes largeurs en fonction du bouton de la souris cliqué.

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