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