iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 1
2
影片教學

前端框架新選擇 - 30 天從 0 到 1 學 Svelte系列 第 1

Day1: Svelte 簡介 | 30 天從 0 到 1 學 Svelte

影片

前言

本系列影片會在前 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>

下一篇
Day2:Svelte 基本語法介紹 | 30 天從 0 到 1 學 Svelte
系列文
前端框架新選擇 - 30 天從 0 到 1 學 Svelte30

2 則留言

0
Rplus
iT邦新手 5 級 ‧ 2020-09-19 00:01:11

Svelte 大好~ <3 <3 <3

愷開 iT邦新手 5 級 ‧ 2020-09-22 13:25:57 檢舉

讚讚讚!

1
Rplus
iT邦新手 5 級 ‧ 2020-09-19 00:21:39

ps:
Svelte REPL 登入後可存檔
文末的程式碼也可以直接附上連結方便實作測試~
https://svelte.dev/repl/e04fb9b832d54f4a844958c2f9079822?version=3.25.1

愷開 iT邦新手 5 級 ‧ 2020-09-22 13:26:28 檢舉

我最近才發現可以儲存,接下來我會把 REPL 存起來方便給大家做參考~感謝建議!

我要留言

立即登入留言