iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
影片教學

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

本系列會從基礎 Svelte 語法與功能介紹開始,循序漸進學習 Svelte 並且應用在前端常見的 UI 互動上;熟悉本框架之後會開始深入探討 Svelte 的應用與框架背後的原理,希望讓大家對 Svelte 有通盤性的了解。

鐵人鍊成 | 共 30 篇文章 | 45 人訂閱 訂閱系列文 RSS系列文
DAY 1

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

影片 前言 本系列影片會在前 10 天講解 Svelte 的基本語法跟功能,之後會搭配實際應用練習,一起使用 Svelte 做出前端常見的 UI 互動,讓大家...

2020-09-10 ‧ 由 愷開 分享
DAY 2

Day2:Svelte 基本語法介紹 | 30 天從 0 到 1 學 Svelte

影片 備註:影片的 if, else block 語法介紹中,圖片的範例 {#else} 的語法為錯誤的,正確的使用方式應為 {:else},感謝網友 cwc...

2020-09-11 ‧ 由 愷開 分享
DAY 3

Day3: DOM 事件綁定與客製化事件、await block 語法

影片 內容 Svelte 當中的 DOM 事件綁定與客製化事件,還有 await block 語法的用法,在範例當中搭配了 Github API 來抓取資料並...

2020-09-12 ‧ 由 愷開 分享
DAY 4

Day4: Svelte bind 語法教學

影片 內容 在前端應用當中時常會有 input 值與某變數綁定的場景,在 Svelte 當中提供了 bind 的語法可供使用。同時 Svelte 也可搭配 b...

2020-09-13 ‧ 由 愷開 分享
DAY 5

Day5: Svelte 生命週期方法 | 30 天從 0 到 1 學 Svelte

影片 內容 Svelte 元件當中有各式各樣的生命週期方法,可以在各個時間點呼叫達到不同功能。 ◼︎ 簡報連結:https://speakerdeck.c...

2020-09-14 ‧ 由 愷開 分享
DAY 6

Day6: Svelte 當中的 Store 與 Context | 30 天從 0 到 1 學 Svelte

影片 內容 本集內容:Store 與 Context 介紹 Svelte 內建 store 機制,除了不用戰 redux 之外,store 本身的功能也很強大...

2020-09-15 ‧ 由 愷開 分享
DAY 7

Day7: Svelte 當中的 motion - tween 與 spring

如果有任何問題都歡迎留言,如果喜歡影片內容的話也歡迎多多分享訂閱~ 影片 內容 在 React 當中往往需要透過 react-spring 的輔助才能做到比較...

2020-09-16 ‧ 由 愷開 分享
DAY 8

Day8 Svelte 當中的 Transition 機制 | 30 天從 0 到 1 學 Svelte

影片 內容 Svelte 內建有相當豐富的 transition 機制,可以透過簡單的語法來達到不錯的 UI 互動! ◼︎ 簡報連結:https://spea...

2020-09-17 ‧ 由 愷開 分享
DAY 9

Day9: 進階 transition - crossfade 與 animate 機制 | 30 天從 0 到 1 學 Svelte

影片 內容 Svelte 當中有許多內建的動畫機制,可以應付常見的場景,並且用相對少量的程式碼達到不錯的體驗。今天會介紹進階的 crossfade 與 an...

2020-09-18 ‧ 由 愷開 分享
DAY 10

Day10: <slot> 與 class: 使用方式

影片 內容 Svelte 當中有 slot 語法(directive)可供使用,使用方法與 Vue 的 slot 類似,可以增加元件客製化的彈性。 class...

2020-09-19 ‧ 由 愷開 分享