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
320
Day2: Svelte 基本語法介紹
介紹 Svelte 的基本語法、傳遞 props、$ 用法以及元件宣告等等
Kalan
September 11, 2020
Tweet
Share
More Decks by Kalan
See All by Kalan
單頁式應用中的無障礙設計
kjj6198
0
740
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
260
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
130
状態管理を楽にする道
kjj6198
1
290
Day25. 如何解析 HTML 語法
kjj6198
0
110
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
150
Svelte 如何編譯程式碼(1)
kjj6198
0
130
Day22. Svelte 經驗談
kjj6198
0
120
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
110
Other Decks in Programming
See All in Programming
CSC307 Lecture 10
javiergs
PRO
0
310
CSC307 Lecture 06
javiergs
PRO
0
360
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
リハビリmruby
kishima
1
160
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
CSC307 Lecture 14
javiergs
PRO
0
220
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
81k
Exploring the Gradually Lost Technical Skills in the Cloud Native Era
hwchiu
2
3.9k
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
325
20k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
Designing Experiences People Love
moore
136
23k
Web Components: a chance to create the future
zenorocha
307
41k
Become a Pro
speakerdeck
PRO
15
4.8k
RailsConf 2023
tenderlove
16
720
Navigating Team Friction
lara
181
13k
Thoughts on Productivity
jonyablonski
64
4.1k
How to train your dragon (web standard)
notwaldorf
79
5.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
The Cost Of JavaScript in 2023
addyosmani
31
4.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 鐵⼈賽 練習 - 倒數計時加強版 加入新功能!