Day2: Svelte 基本語法介紹

第 12 屆 IT 鐵⼈賽 30 天從 0 到 1
學 Svelte Day 2 - Svelte 基礎語法介紹

第 12 屆 IT 鐵⼈賽本⽇⽬標簡易安裝、了解 Svelte 的基本語法

第 12 屆 IT 鐵⼈賽簡易 Svelte 安裝 npx degit
sveltejs/template svelte-app cd svelte-app https://github.com/sveltejs/template

第 12 屆 IT 鐵⼈賽元件宣告、變數宣告副檔名為 .svelte 邏輯寫在 <script>
中，變數宣告直接以 let 開頭即可在 HTML 中，⽤ {} 來表⽰變數

第 12 屆 IT 鐵⼈賽改變變數並更新畫⾯ 3 秒鐘之後將 name 更新為
kalan 可直接賦值給變數觸發更新使⽤ onMount ⽣命週期⽅法在元件掛載後執⾏

第 12 屆 IT 鐵⼈賽渲染 HTML @html @html {}
裡可以為表達式（expression）

第 12 屆 IT 鐵⼈賽 Reactivity - $ 更新後想要執⾏的函數⽤
$ 做標記 countdown 更新時⾃動執⾏

第 12 屆 IT 鐵⼈賽傳遞 Props 將資料傳遞給其他元件⽤ export
做 prop 標記 countdown={10} 傳送資料給 Countdown 元件

第 12 屆 IT 鐵⼈賽邏輯 - if, else if
在 Svelte 中提供 each, if, await 等語法使⽤ {#if condition} 標記結尾⽤ {/if} 非原⽣ HTML 語法

第 12 屆 IT 鐵⼈賽邏輯 - each {#each 變數
as 區域變數, index} 標記結尾⽤ {/each} 非原⽣ HTML 語法

第 12 屆 IT 鐵⼈賽練習 - 倒數計時加強版加入新功能！

Kalan