Video details

Svelte 101: Bindings

Svelte
03.27.2021
English

To sync an attribute of an element to a variable, you'll need to
1) Add an event handler to the element - so changes on the element will update the variable.
2) Pass the variable to the attribute - so changes on the variable will update the element
Instead of doing 2 steps, we can combine both into 1 bind: directive.
In this video, we are going to look at how we can use binding to bind a variable to an attribute of an element.
p/s: binding works for component too!
Introduction 00:00 Syncing an attribute value to a variable 00:12 Binding element attribute with the bind: directive 01:52 Shorthand for bind: 04:57 Binding component props 05:48
---
đź’»
REPL https://svelte.dev/repl/304383469d3d4f08b7897d64c65d0268?version=3.35.0
đź“š
Related Resources Svelte https://svelte.dev Svelte REPL https://svelte.dev/repl Svelte Tutorial: Bindings https://svelte.dev/tutorial/text-inputs Svelte Tutorial: Component Bindings https://svelte.dev/tutorial/component-bindings
🥰 Support me https://www.buymeacoffee.com/lihautan
đź”—
Want to learn more from me? Check out these links:
Twitter: https://twitter.com/lihautan Blog: https://lihautan.com/ Newsletter: https://lihautan.com/newsletter
#svelte #svelte101
Thanks for watching 🥰 -- with love, Li Hau