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

Day11: Svelte 內建 element 與 SSR 淺談

Kalan
September 20, 2020

Day11: Svelte 內建 element 與 SSR 淺談

第 12 屆 IT 鐵人賽影片教學 — 30 天從 0 到 1 學 Svelte

◼︎ 本集內容:談 svelte 的內建 element 與 SSR 教學

◼︎ 相關連結:

・Svelte 官網 https://svelte.dev

Kalan

September 20, 2020
Tweet

More Decks by Kalan

Other Decks in Programming

Transcript

  1. 第 12 屆 IT 鐵⼈賽
    30 天從 0 到 1 學 Svelte
    Day11 - svelte 內建 element 與 SSR 簡介

    View full-size slide

  2. 第 12 屆 IT 鐵⼈賽
    svelte 內建 element 類型
    遞迴使⽤元件
    可對 window 物件做操作
    與 類似,可操作 body
    可操作 head
    可以動態引入 Svelte 元件
    可針對元件分別指定編譯器選項

    View full-size slide

  3. 第 12 屆 IT 鐵⼈賽
    遞迴使⽤元件
    本範例取⾃官⽅ API ⽂件

    View full-size slide

  4. 第 12 屆 IT 鐵⼈賽

    View full-size slide

  5. 第 12 屆 IT 鐵⼈賽
    好處:把⿇煩事交給 Svelte
    Svelte 會在正確的時間點處理事件監聽器
    不⽤煩惱 SSR 的問題
    不需要另外寫監聽器修改變數

    View full-size slide

  6. 第 12 屆 IT 鐵⼈賽

    處理

    View full-size slide

  7. 第 12 屆 IT 鐵⼈賽
    使⽤ 的好處
    根據元件、⾴⾯不同分別管理 內容
    當元件銷毀時,svelte 也會刪除、修改對應內容
    ⽀援 SSR,⽅便實作 SEO

    View full-size slide

  8. 第 12 屆 IT 鐵⼈賽
    淺談 Svelte 當中的 SSR

    View full-size slide