Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Day2: Svelte 基本語法介紹

Kalan
September 11, 2020

Day2: Svelte 基本語法介紹

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

Kalan

September 11, 2020
Tweet

More Decks by Kalan

Other Decks in Programming

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