第 29 天：Svelte 在 HTML 元素上的修飾

第 29 天要講的事

1. 複習 Svelte 在 HTML 元素上的修飾
2. HTML 元素的 class 及 style 修飾

轉眼間這一次的鐵人賽就快要告一段落了，不知不覺間我們竟然也把色票產生器做得有模有樣，也對 Svelte 這一套前端架構有些粗淺的認識了。由於 Svelte 是利用編譯過程中編譯器的處理，讓開發者可以快速地利用簡潔的程式碼寫出高效 (effective)、靈活互動 (reactive) 且具有豐富表現力的前端專案。而特色就是，Svelte 可以基於現有的 Javascript、HTML、以及 CSS 的語法，再進行擴充，加入一些 Svelte 的特有的語法，就能夠做出互動 (reactive) 前端專案。今天就讓我們稍微複習一下之前介紹過 Svelte 提供給我們修飾 HTML 元素的語法，並多介紹兩種新的修飾方式吧。

複習 Svelte 在 HTML 元素上的修飾

• on:eventname
  用 on:eventname 來接收特定事件：

• bind:property
  用 bind:property 來做出資料綁定。

• transition:function
  用 transition:function 指定過場效果，讓 HTML 元件在 DOM 上面掛載/卸載時都有特殊的過場效果。

• in:function
  用 in:function 指定 HTML元件掛載到 DOM 時的過場效果。

• out:function
  用 out:function 指定 HTML 元件從 DOM 卸載時的過場效果。

HTML 元素的 class 及 style 修飾

• class:name
  HTML 元素的 class 同樣也可以藉由 Svelte 來做切換：

<div class={ state ? 'someClass' : ''} />

<div class:someClass={ state } />

<div class:someClass />

• 第一行：<div class={ state ? 'someClass' : ''} />
  如果 state 為 true，則這個 HTML 元素就會具有 someClass 這個類型 (class)。反之，就沒有 someClass 這個類型 (class)。

• 第三行：<div class:someClass={ state } />
  表達的意思同第一行程式碼，但 Svelte 允許我們更進一步縮寫。這一個 HTML 元素能不能擁有 someClass 這個類型，完全交由 state 這個 Javascript 的變數來控制。

• 第五行：<div class:someClass />
  如果 Javascript 的變數名稱恰好與 HTML 元素的類型 (class) 相同，就可以更進一步縮寫。也就是 class:someClass={ someClass } 可以縮寫為 class:someClass。

• style:property
  HTML 元素的行內風格 (inline style) 也可以藉由 Svelte 來控制：

<div style='color: { stateColor }; background: { stateBackground }' />

<div 
  style:color={ stateColor }
  style:background={ stateBackground }
/>

• 第一行：<div style='color: { stateColor }; background: { stateBackground }' />
  我們可以用行內風格 (inline style) 修飾 HTML 元素。這個時候就可以趁機用大括弧 {} 展開 Javascript，達到用 Javascript 控制 HTML 元素的風格的方法。

• 第四行：style:color={ stateColor }
  但上面那種做法，當需要指定的行內風格增加時，程式碼寫起來就不好看了。所以 Svelte 允許我們做進一步的縮寫，將 style='color: { stateColor }' 寫成 style:color={ stateColor }。

• 第五行：style:background={ stateBackground }
  並且繼續用第二個 style:background 來指定其他風格參數。

這樣子寫起來是不是非常簡潔又漂亮呢。那麼今天關於 Svelte 對 HTML 元素的修飾就介紹到這邊了。謝謝大家。