影片

前言

本系列影片會在前 10 天講解 Svelte 的基本語法跟功能，之後會搭配實際應用練習，一起使用 Svelte 做出前端常見的 UI 互動，讓大家除了學習 Svelte 本身之外也可以了解實際應用狀況。在中後半段我會談談自己對 Svelte 的想法以及貢獻 Pull Request 的心得，並且試著從頭理解 Svelte，了解 Svelte 的運作原理，並且實作一套簡化版本的 Svelte。

本系列教學除了 Svelte 本身之外，也會試著用這個框架切入現代前端開發需要注意的事情，讓使用者學習框架之外也能夠一起掌握現代前端所要具備的概念。

規劃

• 基本篇 - Svelte 基本語法與功能介紹（10 天）
• 實戰篇 - 用 Svelte 完成前端常見 UI 與功能（10 天）
  • API 處理
  • 圖表、資料視覺化
  • 互動式 UI （播放器、影片等等）
• Svelte 經驗談與專案實作（3 天）
• 進階 Svelte（7 天）
  • 理解 Svelte 原理
  • 實作簡單版的 Svelte

內容

第一天我們來瞧瞧 Svelte 是什麼吧！今天會著重在 Svelte 與前端框架的不同之處，並且利用 Svelte 做出一個非常簡單的計時器功能。如果有不懂的語法也沒關係，我們在之後的單元會再一一介紹。

簡報連結

本日程式碼

<script>
  import { onMount, afterUpdate, onDestroy } from 'svelte'
  
  let countdown = 10;
  let timer = null;
  onMount(() => {
    timer = setInterval(() => {
      countdown -= 1;
    }, 1000);
  })

  afterUpdate(() => {
    if (countdown === 0) {
      if (timer) {
        clearInterval(timer);
      }
    }
  })

  onDestroy(() => {
    if (timer) {
      clearInterval(timer)
    }
  })
</script>

<style>
  h2 {
    color: red;
  }
</style>

<h2>{countdown}</h2>