iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 2
1
影片教學

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

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

https://ithelp.ithome.com.tw/upload/images/20200911/201035657Q0wOWS9n9.jpg

影片

備註:影片的 if, else block 語法介紹中,圖片的範例 {#else} 的語法為錯誤的,正確的使用方式應為 {:else},感謝網友 cwchiu 指正。投影片已重新上傳。

這張才是正確使用方式
https://ithelp.ithome.com.tw/upload/images/20200922/201035659anhaHC3ti.jpg

內容

昨天使用 Svelte 完成了簡單的計時器功能,不過還沒有詳細介紹 Svelte 的功能,因此今天我們介紹了元件宣告、$ 使用方式、if, each block 等功能。並且將今天學到的功能一起加入到倒數計時器當中。

簡報連結


上一篇
Day1: Svelte 簡介 | 30 天從 0 到 1 學 Svelte
下一篇
Day3: DOM 事件綁定與客製化事件、await block 語法
系列文
前端框架新選擇 - 30 天從 0 到 1 學 Svelte30

1 則留言

0
cwchiu
iT邦新手 4 級 ‧ 2020-09-22 11:41:33

if...else 語法好像是

{#if loading}
  loading
{:else}
  loaded
{/if}

https://svelte.dev/tutorial/else-if-blocks

愷開 iT邦新手 5 級 ‧ 2020-09-22 12:17:27 檢舉

感謝指正!我在影片說明欄中已經註明,投影片也已經重新上傳了。正確的用法是使用 {:else} 才對。

我要留言

立即登入留言