介紹 Svelte 當中的 DOM 事件綁定、客製化事件與 await block 語法教學
第 12 屆 IT 鐵⼈賽30 天從 0 到 1 學 SvelteDay3 事件綁定、客製事件與 await 語法應⽤
View Slide
第 12 屆 IT 鐵⼈賽本⽇⽬標學習事件綁定、客製化事件、await block 的使⽤
第 12 屆 IT 鐵⼈賽事件綁定on:event 名稱可以接收 script 裡頭定義的函數也可以使⽤表達式Svelte 會幫忙處理事件的註冊和銷毀
第 12 屆 IT 鐵⼈賽事件綁定 - modifier透過語法輔助減少樣板代碼preventDefault - 取消預設⾏為stopPropgation - 取消冒泡capture - 在捕捉階段觸發事件once - 執⾏⼀次事件監聽器self - 在 e.target 為⾃⼰時才會觸發可以串接多個 modifier
第 12 屆 IT 鐵⼈賽客製化事件可以監聽元件⾃定義的事件createEventDispatcher:背後為DispatchEvent 與 CustomEvent 的封裝(MDN⽂件)dispatch('事件名稱', {參數})可以⽤ e.detail.xxx 取得
第 12 屆 IT 鐵⼈賽事件應⽤練習https://svelte.dev/repl/hello-world?version=3.25.0
第 12 屆 IT 鐵⼈賽await block簡化 Promise 的樣板語法
第 12 屆 IT 鐵⼈賽await block 應⽤串接 Github API 並顯⽰在畫⾯當中