Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Day2: Svelte 基本語法介紹

Kalan
September 11, 2020

Day2: Svelte 基本語法介紹

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

Kalan

September 11, 2020
Tweet

More Decks by Kalan

Other Decks in Programming

Transcript

  1. 第 12 屆 IT 鐵⼈賽 30 天從 0 到 1

    學 Svelte Day 2 - Svelte 基礎語法介紹
  2. 第 12 屆 IT 鐵⼈賽 簡易 Svelte 安裝 npx degit

    sveltejs/template svelte-app cd svelte-app https://github.com/sveltejs/template
  3. 第 12 屆 IT 鐵⼈賽 元件宣告、變數宣告 副檔名為 .svelte 邏輯寫在 <script>

    中,變數宣告直接以 let 開頭即可 在 HTML 中,⽤ {} 來表⽰變數
  4. 第 12 屆 IT 鐵⼈賽 改變變數並更新畫⾯ 3 秒鐘之後將 name 更新為

    kalan 可直接賦值給變數觸發更新 使⽤ onMount ⽣命週期⽅法在元件掛載後執⾏
  5. 第 12 屆 IT 鐵⼈賽 渲染 HTML @html @html {}

    裡可以為表達式(expression)
  6. 第 12 屆 IT 鐵⼈賽 傳遞 Props 將資料傳遞給其他元件 ⽤ export

    做 prop 標記 countdown={10} 傳送資料給 Countdown 元件
  7. 第 12 屆 IT 鐵⼈賽 邏輯 - if, else if

    在 Svelte 中提供 each, if, await 等語法使⽤ {#if condition} 標記 結尾⽤ {/if} 非原⽣ HTML 語法
  8. 第 12 屆 IT 鐵⼈賽 邏輯 - each {#each 變數

    as 區域變數, index} 標記 結尾⽤ {/each} 非原⽣ HTML 語法