CATALOGUE Code & Data Formation Svelte Apprendre Svelte 3 et SvelteKit 1.0

Liaisons de données avec Svelte : Mono-directionnelles et bidirectionnelles

Retour à la formation
Chapitre 2 Leçon 5
Précédent
Suivant

Découvrez comment insérer une variable dans le DOM à l'aide d'interpolations, et apprenez les liaisons mono-directionnelles et bidirectionnelles en Svelte.

Détails de la leçon

Description de la leçon

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.

Objectifs de cette leçon

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.

Prérequis pour cette leçon

Connaissances de base en HTML, CSS et JavaScript. Compréhension initiale de Svelte est un plus.

Métiers concernés

Développeurs front-end, développeurs full-stack, ingénieurs en interface utilisateur.

Alternatives et ressources

Alternatives possibles : React, Vue.js, et Angular pour la liaison de données bidirectionnelle.

Questions & Réponses

Une liaison de données mono-directionnelle permet de mettre à jour un attribut HTML lorsqu'une variable script change, sans refléter les changements de l'élément HTML dans la variable script.
La directive 'bind:value' est utilisée pour créer des bindings bidirectionnels en Svelte, synchronisant automatiquement l'input et la variable script.
Vous pouvez accéder à la valeur d'un input en utilisant 'event.target.value' dans une fonction événementielle.