Day4: Svelte 當中的 bind 語法

在前端應用當中時常會有 input 值與某變數綁定的場景，在 Svelte 當中提供了 bind 的語法可供使用。同時 Svelte 也可搭配 bind 語法綁定如 currentTime、volume 等屬性，方便做即時更新，減少程式碼。

Transcript

1. 第 12 屆 IT 鐵⼈賽
   30 天從 0 到 1 學 Svelte
   Day4 - bind
   

   View Slide

2. 第 12 屆 IT 鐵⼈賽
   本⽇⽬標
   學習各種 bind 的⽤法
   

   View Slide

3. 第 12 屆 IT 鐵⼈賽
   bind 使⽤情境
   當 input 更新時，想要同步更新變數
   當變數的值改變時，想要將值反映到 input 上
   將 DOM 屬性賦值給變數以供使⽤
   將 value 綁定到 text 變數
   

   View Slide

4. 第 12 屆 IT 鐵⼈賽
   其他綁定
   

   View Slide

5. 第 12 屆 IT 鐵⼈賽
   bind:this
   將 DOM 元素綁定到變數中
   

   View Slide

6. 第 12 屆 IT 鐵⼈賽
   綁定 DOM 屬性
   綁定常⽤屬性
   currentTime
   
   clientWidth, clientHeight
   
   duration
   
   muted
   
   更多屬性綁定可參考⽂件
   

   View Slide