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
350
Day2: Svelte 基本語法介紹
介紹 Svelte 的基本語法、傳遞 props、$ 用法以及元件宣告等等
Kalan
September 11, 2020
Tweet
Share
More Decks by Kalan
See All by Kalan
單頁式應用中的無障礙設計
kjj6198
0
760
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
310
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
150
状態管理を楽にする道
kjj6198
1
340
Day25. 如何解析 HTML 語法
kjj6198
0
130
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
180
Svelte 如何編譯程式碼(1)
kjj6198
0
170
Day22. Svelte 經驗談
kjj6198
0
140
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
140
Other Decks in Programming
See All in Programming
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
時計仕掛けのCompose
mkeeda
1
280
Writing documentation can be fun with plugin system
okuramasafumi
0
120
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
180
ARA Ansible for the teams
kksat
0
150
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
Immutable ActiveRecord
megane42
0
130
チームリードになって変わったこと
isaka1022
0
190
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
270
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.1k
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.8k
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
67
4.6k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
GitHub's CSS Performance
jonrohan
1030
460k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Rails Girls Zürich Keynote
gr2m
94
13k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Code Reviewing Like a Champion
maltzj
521
39k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Embracing the Ebb and Flow
colly
84
4.6k
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 鐵⼈賽 練習 - 倒數計時加強版 加入新功能!