Svelte Tutorial for Beginners

Svelte Basics

User Input & Data Binding

雙向綁定方法1

雙向綁定方法2

樣式控制

Reactive Values

1. 像是 computed
2. 當裡面的 Reactive Values 有變化時，會執行 {} 內所有東西

Loops

1. 要給唯一值當 key
2. 如果要 loop 的東西是空的，可以用 else 展示空的時候要展示什麼

Inline Event Handlers

1. 如果要傳參數到函式裡，要用一個箭頭函式包住( 如果直接用 handleClick(person.id) 會直接執行函式)
2. 要將舊的整個 reference 直接蓋掉(才會偵測到值有變化)，不可以只是將裡面的東西換掉

Conditionals

Components

CSS & Conditional Styles

如果是 true 會加上這個 class

Props

可以設定預設值

Event Forwarding

縮寫

emit 內層

emit 外層

Event Modifiers

Slots

1. 一般 slots
2. name slots

外層

內層

Forms (part 1)

1. svelte 會自動把 input number 的值變成數值而不是字串
2. prevent default 阻止刷新頁面

Forms (part 2)

多個 checkbox 的紀錄方法，bind:group={skills} ，

然後將有打勾的值塞到 array 裡

select

Dispatching Custom Events

內層

1. 引入 createEventDispatcher
2. 實體化
3. 使用(前面放事件名稱，後面放要傳的資料)

外層

1. 監聽自訂事件，並觸發函式

2.

傳的東西，會在外層的 e.detail 裡面

將原本的陣列覆蓋掉(因為物件是傳址，所以要建立一個新的陣列，才會知道值有變化，不可以直接 push 值進去)

3. 將 modal 關掉