影片 前言 本系列影片會在前 10 天講解 Svelte 的基本語法跟功能，之後會搭配實際應用練習，一起使用 Svelte 做出前端常見的 UI 互動，讓大家...
愷開
‧
2020-09-10
影片 備註：影片的 if, else block 語法介紹中，圖片的範例 {#else} 的語法為錯誤的，正確的使用方式應為 {:else}，感謝網友 cwc...
愷開
‧
2020-09-11
影片 內容 Svelte 當中的 DOM 事件綁定與客製化事件，還有 await block 語法的用法，在範例當中搭配了 Github API 來抓取資料並...
愷開
‧
2020-09-12
svelte設定下拉選單 昨天跟大家分享完html的input的屬性綁定，不過還有型態比較特別的select跟option今天繼續跟大家分享。 本文同步放置於...
routing routing 路由是第三十天要分享給大家的 svelte 文章，不過這個套件不是官方用法， svelte 的官方用法是 sapper 這個框架...
影片 內容 在前端當中可能會出現的場景，在大量的選項清單當中選出一個選項，當選項過多時，長時間的滾動可能會降低使用者體驗，這時可以透過文字框輔助做下拉選單，方...
愷開
‧
2020-09-25
初始化專案 在設定好環境之後可以開始撰寫程式了，所以這篇文章來介紹如何產生一個 svelte 專案 本文同步放置於此 產生專案的方式 svelte 產生專案...
影片 內容 在前端應用當中時常會有 input 值與某變數綁定的場景，在 Svelte 當中提供了 bind 的語法可供使用。同時 Svelte 也可搭配 b...
愷開
‧
2020-09-13
影片 內容 在 svelte 當中有許多內建 element 可以幫助簡化程式碼。例如 head, body, window, options 等等 詳細...
愷開
‧
2020-09-20
影片 內容 本集內容：Store 與 Context 介紹 Svelte 內建 store 機制，除了不用戰 redux 之外，store 本身的功能也很強大...
愷開
‧
2020-09-15
第 01 天：介紹 Svelte 那麼就為她學貓一樣的叫吧，如果這樣能打動她。如果你能用 Svelte 寫一份前端專案，那麼也為她寫一份吧。直到她高喊著：「愛...
第 02 天：建立開發環境 就在這個時候貝克兒小姐說話了：「npm run dev！」這是我進來這麼久的一段時間裡，她說的第一句話。一切發生的如此突然，不要說...
第 03 天：初探專案架構 「你住在前端對嗎？」她輕描淡寫的說：「我有認識個人也住那兒。」「我才剛到，在那兒誰也不...」「你應該會聽過 Svelte。」「S...
影片 內容 Svelte 元件當中有各式各樣的生命週期方法，可以在各個時間點呼叫達到不同功能。 ◼︎ 簡報連結：https://speakerdeck.c...
愷開
‧
2020-09-14
svelte component lifecycle svelte component lifecycle 是今天要分享的主題，在分享svelte的複合式元件...
第 13 天：Svelte 的事件：客製化事件 「有那麼一段時間我過著像公子哥一樣的生活，在歐洲的大城市到處打轉：巴黎、威尼斯、羅馬，終日忙著收集寶石，打獵，...
如何決定要不要顯示 昨天教授大家如何將陣列內的資料透過組件顯示出來，但是如果不想顯示某個資料時該如何處理呢？今天就教授大家如何在svelte完成這需求。 本文...
影片 內容 Svelte 當中有 slot 語法（directive）可供使用，使用方法與 Vue 的 slot 類似，可以增加元件客製化的彈性。 class...
愷開
‧
2020-09-19
開始撰寫 svelte 程式碼 在完成安裝以及建立一個新專案後我們準備開始撰寫第一個程式碼了。 本文同步放置於此 開始撰寫之前 在開始撰寫之前要讓所有讀者知...
如果有任何問題都歡迎留言，如果喜歡影片內容的話也歡迎多多分享訂閱～ 影片 內容 在 React 當中往往需要透過 react-spring 的輔助才能做到比較...
愷開
‧
2020-09-16
第 11 天：Svelte 的事件：事件處理 在七月的一個早晨九點鐘，Svelte 氣派的轎車顛顛頗簸的開上我家門口那條滿布碎石的車道，從三音階的喇叭裡爆出了...
第 10 天：Svelte 元件的 Property 「我想說你可能會在這邊。」她漫不經心的回應了我的招呼。「我記得你說你就住在這附近。」接著，作為一個她會再...
第 12 天：Svelte 的事件：事件傳遞 他側過身體看向我。我可以理解為什麼貝克兒小姐會認為他說謊隱瞞了整個事件傳遞。當他說 on:click 的時候，要...
第 16 天：Svelte 中的邏輯運作：each 邏輯區塊（一） 「我的 each 邏輯區塊看起來真棒，不是嗎？」他徵詢我的意見。「看看它是如何將繁瑣的工作...
影片 內容 透過 Svelte 搭配 d3.js 做資料視覺化很方便，可以很容易跟 DOM 節點互動之外，搭配 reactivity 的語法也很容易執行 d3...
愷開
‧
2020-09-30
第 15 天： Svelte 的事件：事件修飾（二） 最後他起身，用一種不很確定的聲音，告訴我他要回去了。「怎麼回事？」「沒有事件會傳過來的。所有的事件都被...
影片 內容 Svelte 當中有許多內建的動畫機制，可以應付常見的場景，並且用相對少量的程式碼達到不錯的體驗。今天會介紹進階的 crossfade 與 an...
愷開
‧
2020-09-18
第 14 天： Svelte 的事件：事件修飾（一） 「我將在今天向你提出一個莫大的請求，」他一邊說一邊心滿意足的用 modifier 修飾手邊的事件。「所以...
svelte 前端工程師的另一個選擇 相信大家對於主流的前端框架angular、react、vue不陌生，但是提到 svelte 可能知道的人就沒那麼多了，筆者...
html的屬性綁定 昨天分享了如何綁定html的事件，今天要談談如何綁定html屬性，也就是如何更新input的value時object的值也會一併更新。 本...
kirai
ithomemhjao
iThome鐵人賽
看影片追技術