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

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.