Bindings, Actions & Transitions

เชื่อม component เข้ากับ DOM และ motion

runes ให้ reactive state; โมดูลนี้ครอบคลุม directive ที่เชื่อม state นั้นเข้ากับ DOM element จริงและกับ motion:

• Bindings (bind:) สร้าง link สองทางระหว่าง state กับ DOM property — input update state และ state update input
• Actions (use:) run โค้ด setup แบบ imperative บน element ตอน mount — escape hatch สำหรับ library ที่ไม่ใช่ Svelte, focus, tooltip และ click-outside
• Transitions & animations (transition:, animate:) animate element แบบ declarative ตอนเข้า ออก และเรียงใหม่

โมดูลนี้ครอบคลุมอะไรบ้าง

บทเรียน	สิ่งที่จะได้เรียน
Bindings	bind:value, bind:this, bind:group และ component binding
Actions	use: directive และ action lifecycle
Transitions & animations	transition:/in:/out: และ animate:flip
Forms & inputs	controlled input, validation และการจัดการ submit

flowchart TB
  state["reactive state (runes)"] --> bind["bind: link สองทางกับ DOM property"]
  state --> action["use: setup แบบ imperative บน element"]
  state --> trans["transition: / animate: motion แบบ declarative"]
  bind --> dom["the DOM"]
  action --> dom
  trans --> dom

สามวิธีที่ Svelte เข้าถึง DOM

🧡 สรุปหนึ่งบรรทัด

โมดูลนี้ครอบคลุม directive ที่ link reactive state เข้ากับ DOM: bind: สำหรับ data flow สองทาง, use: action สำหรับ setup element แบบ imperative (library ภายนอก, focus, click-outside) และ transition:/animate: สำหรับ motion แบบ declarative ตอนเข้า/ออก/เรียงใหม่ รวมกันคือวิธีที่ component ของ Svelte พบกับ element จริงและความ polish เชิงภาพ

`bind:` directive สร้างอะไร?

การ render ทางเดียว link สองทางระหว่าง state กับ DOM property (element update state, state update element) CSS animation network request

`use:` action ใช้ทำอะไร?

จัด style element run โค้ด setup แบบ imperative บน element ตอน mount — สำหรับ library ภายนอก, focus, tooltip ฯลฯ นิยาม route สร้าง store

`transition:` และ `animate:` directive ทำอะไร?

fetch data animate element แบบ declarative ตอนเข้า ออก และเรียงใหม่ validate form bind input

Submit

Mark as complete