Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Day2: Svelte 基本語法介紹
Search
Kalan
September 11, 2020
Programming
0
370
Day2: Svelte 基本語法介紹
介紹 Svelte 的基本語法、傳遞 props、$ 用法以及元件宣告等等
Kalan
September 11, 2020
Tweet
Share
More Decks by Kalan
See All by Kalan
單頁式應用中的無障礙設計
kjj6198
0
780
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
340
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
170
状態管理を楽にする道
kjj6198
1
370
Day25. 如何解析 HTML 語法
kjj6198
0
140
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
190
Svelte 如何編譯程式碼(1)
kjj6198
0
190
Day22. Svelte 經驗談
kjj6198
0
160
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
150
Other Decks in Programming
See All in Programming
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
120
NPOでのDevinの活用
codeforeveryone
0
860
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.7k
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
790
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.4k
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
0
130
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
GPUを計算資源として使おう!
primenumber
1
170
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
840
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.7k
Become a Pro
speakerdeck
PRO
29
5.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
A designer walks into a library…
pauljervisheath
207
24k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Rails Girls Zürich Keynote
gr2m
95
14k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Transcript
第 12 屆 IT 鐵⼈賽 30 天從 0 到 1
學 Svelte Day 2 - Svelte 基礎語法介紹
第 12 屆 IT 鐵⼈賽 本⽇⽬標 簡易安裝、了解 Svelte 的基本語法
第 12 屆 IT 鐵⼈賽 簡易 Svelte 安裝 npx degit
sveltejs/template svelte-app cd svelte-app https://github.com/sveltejs/template
第 12 屆 IT 鐵⼈賽 元件宣告、變數宣告 副檔名為 .svelte 邏輯寫在 <script>
中,變數宣告直接以 let 開頭即可 在 HTML 中,⽤ {} 來表⽰變數
第 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 鐵⼈賽 練習 - 倒數計時加強版 加入新功能!