Day2: Svelte 基本語法介紹

介紹 Svelte 的基本語法、傳遞 props、$ 用法以及元件宣告等等

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide