Day2: Svelte 基本語法介紹

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

Transcript

1. 第 12 屆 IT 鐵⼈賽 30 天從 0 到 1 學 Svelte Day 2 - Svelte 基礎語法介紹
2. 第 12 屆 IT 鐵⼈賽 本⽇⽬標 簡易安裝、了解 Svelte 的基本語法
3. 第 12 屆 IT 鐵⼈賽 簡易 Svelte 安裝 npx degit sveltejs/template svelte-app cd svelte-app https://github.com/sveltejs/template
4. 第 12 屆 IT 鐵⼈賽 元件宣告、變數宣告 副檔名為 .svelte 邏輯寫在 <script> 中，變數宣告直接以 let 開頭即可 在 HTML 中，⽤ {} 來表⽰變數
5. 第 12 屆 IT 鐵⼈賽 改變變數並更新畫⾯ 3 秒鐘之後將 name 更新為 kalan 可直接賦值給變數觸發更新 使⽤ onMount ⽣命週期⽅法在元件掛載後執⾏
6. 第 12 屆 IT 鐵⼈賽 渲染 HTML @html @html {} 裡可以為表達式（expression）
7. 第 12 屆 IT 鐵⼈賽 Reactivity - $ 更新後想要執⾏的函數 ⽤ $ 做標記 countdown 更新時⾃動執⾏
8. 第 12 屆 IT 鐵⼈賽 傳遞 Props 將資料傳遞給其他元件 ⽤ export 做 prop 標記 countdown={10} 傳送資料給 Countdown 元件
9. 第 12 屆 IT 鐵⼈賽 邏輯 - if, else if 在 Svelte 中提供 each, if, await 等語法使⽤ {#if condition} 標記 結尾⽤ {/if} 非原⽣ HTML 語法
10. 第 12 屆 IT 鐵⼈賽 邏輯 - each {#each 變數 as 區域變數, index} 標記 結尾⽤ {/each} 非原⽣ HTML 語法
11. 第 12 屆 IT 鐵⼈賽 練習 - 倒數計時加強版 加入新功能！