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
380
Day2: Svelte 基本語法介紹
介紹 Svelte 的基本語法、傳遞 props、$ 用法以及元件宣告等等
Kalan
September 11, 2020
Tweet
Share
More Decks by Kalan
See All by Kalan
單頁式應用中的無障礙設計
kjj6198
0
790
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
360
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
180
状態管理を楽にする道
kjj6198
1
390
Day25. 如何解析 HTML 語法
kjj6198
0
150
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
200
Svelte 如何編譯程式碼(1)
kjj6198
0
200
Day22. Svelte 經驗談
kjj6198
0
170
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
160
Other Decks in Programming
See All in Programming
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
550
品質ワークショップをやってみた
nealle
0
300
チームの境界をブチ抜いていけ
tokai235
0
180
Devvox Belgium - Agentic AI Patterns
kdubois
1
120
Introduce Hono CLI
yusukebe
4
1.8k
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
210
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
110
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
2
510
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
350
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
570
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
510
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
950
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
It's Worth the Effort
3n
187
28k
Producing Creativity
orderedlist
PRO
347
40k
Designing Experiences People Love
moore
142
24k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Visualization
eitanlees
149
16k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Code Review Best Practice
trishagee
72
19k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Building an army of robots
kneath
306
46k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
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 鐵⼈賽 練習 - 倒數計時加強版 加入新功能!