Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Day2: Svelte 基本語法介紹
Search
Kalan
September 11, 2020
Programming
0
340
Day2: Svelte 基本語法介紹
介紹 Svelte 的基本語法、傳遞 props、$ 用法以及元件宣告等等
Kalan
September 11, 2020
Tweet
Share
More Decks by Kalan
See All by Kalan
單頁式應用中的無障礙設計
kjj6198
0
750
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
300
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
150
状態管理を楽にする道
kjj6198
1
320
Day25. 如何解析 HTML 語法
kjj6198
0
130
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
170
Svelte 如何編譯程式碼(1)
kjj6198
0
150
Day22. Svelte 經驗談
kjj6198
0
140
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
130
Other Decks in Programming
See All in Programming
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
3
400
rails statsで大解剖 🔍 “B/43流” のRailsの育て方を歴史とともに振り返ります
shoheimitani
2
620
Vapor Revolution
kazupon
2
2.5k
これが俺の”自分戦略” プロセスを楽しんでいこう! - Developers CAREER Boost 2024
niftycorp
PRO
0
110
事業成長を爆速で進めてきたプロダクトエンジニアたちの成功談・失敗談
nealle
3
1.3k
Leveling Up Developer Tooling for the Modern Rails & Hotwire Era @ Ruby Türkiye, November 2024
marcoroth
0
160
デザインパターンで理解するLLMエージェントの作り方 / How to develop an LLM agent using agentic design patterns
rkaga
11
3.4k
romajip: 日本の住所CSVデータを活用した英語住所変換ライブラリを作った話
sangunkang
0
2.4k
Cursorでアプリケーションの追加開発や保守をどこまでできるか試したら得るものが多かった話
drumnistnakano
0
280
Jakarta EE meets AI
ivargrimstad
0
920
macOS なしで iOS アプリを開発する(※ただし xxx に限る)
mitsuharu
1
170
カンファレンスの「アレ」Webでなんとかしませんか? / Conference “thing” Why don't you do something about it on the Web?
dero1to
2
160
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
Typedesign – Prime Four
hannesfritz
40
2.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
43
9.3k
Designing for Performance
lara
604
68k
Designing Experiences People Love
moore
138
23k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Site-Speed That Sticks
csswizardry
1
150
How to Think Like a Performance Engineer
csswizardry
21
1.2k
Six Lessons from altMBA
skipperchong
27
3.5k
YesSQL, Process and Tooling at Scale
rocio
169
14k
Faster Mobile Websites
deanohume
305
30k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
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 鐵⼈賽 練習 - 倒數計時加強版 加入新功能!