Introduction aux liaisons de données
Objectifs
Maîtriser les liaisons de données mono-directionnelles et bidirectionnelles en utilisant Svelte, et comprendre comment synchroniser les valeurs entre les éléments de formulaire et les variables script.
Résumé
Découvrez comment insérer une variable dans le DOM à l'aide d'interpolations, et apprenez les liaisons mono-directionnelles et bidirectionnelles en Svelte.
Description
Dans cette leçon, nous explorons les concepts de liaisons de données en Svelte. Vous apprendrez à modifier des attributs de balises HTML via des bindings mono-directionnels lorsque des événements se produisent. Ensuite, nous passerons aux bindings bidirectionnels, permettant de synchroniser les valeurs entre une balise de formulaire et une variable script. Toute modification apportée à l'input se reflète automatiquement dans la variable liée, et vice versa.
Pour illustrer ces concepts, nous commencerons par un exemple simple de binding mono-directionnel avec une image. Nous définirons une fonction de changement et lierons l'attribut source de l'image à une variable.
Ensuite, nous implémenterons un binding bidirectionnel en utilisant un input de type texte et un label. Chaque modification de l'input mettra à jour automatiquement la variable associée, que nous afficherons par interpolation dans la balise HTML.
Questions - réponses
Programme détaillé
Module 1 - Introduction et premiers pas
Module 2 - La syntaxe de base de Svelte
Module 3 - Conditions, boucles et gestion événementielle
Module 4 - Les composants
Module 5 - Slots et Lifecycle hooks
Module 6 - Gestion des formulaires
Module 7 - Les stores de Svelte
Module 8 - Animations et transitions
Module 9 - Une application SPA avec Svelte
Module 10 - SvelteKit
Facebook
Twitter
Linkedin
Email
