先來做一點自我介紹吧,我是白色的白,有一個交往十年以上,並且論及婚嫁的日本女友叫做程世社季子,嗯…怎麼說好呢,自從隔壁的鱈魚介紹 VueUse 給她認識後,她就開始嫌棄我,甚至跟我提了分手了,現在…可能要稱呼為前女友了。
#挽回愛情的第一天
本系列文章主要會針對筆者在工作中常用到的工具做分析與說明,VueUse 有趣的地方在於,有些工具整合了 Typescript 的觀念,有些則是融入了 web api 或是其他套件。筆者會盡可能的分析與猜測工具作者的動機,將常用的文件寫出來,讓新手也可以輕鬆愉快的接觸 VueUse。
以下是目前針對30天的規劃,如果過程中有其他想補充的,會再回來修改目錄。
D-01 目錄簡介
D-02 什麼是 VueUse
D-03 isDefined 文件說明與範例
D-04 isDefined 解析與動機
D-05 補充 TypeScript 的型別收縮(Type Narrowing)
D-06 useVModel 文件說明與範例
D-07 useVModel 解析與動機
D-08 syncRef 文件說明與範例
D-09 syncRef 解析與動機
D-10 useCycleList 文件說明與範例
D-11 useCycleList 解析與動機
D-12 用 useCycleList 來做一個簡單的輪播吧 (carousel)
D-13 useAsyncState 文件說明與範例
D-14 useAsyncState 解析與動機
D-15 用 useAsyncState 來 call 個 api 試試看吧
D-16 useInfiniteScroll 文件說明與範例
D-17 useInfiniteScroll 解析與動機
D-18 useOffsetPagination 文件說明與範例
D-19 useOffsetPagination 解析與動機
D-20 useClipboard 文件說明與範例
D-21 useClipboard 解析與動機
D-22 useWebWorkerFn 文件說明與範例
D-23 useWebWorkerFn 解析與動機
D-24 補充 Web Workers
D-25 useQRCode 文件說明與範例
D-26 useQRCode 解析與動機
D-27 模仿 vueuse 來做一個自己的 useBarCode 吧 1 確認需求
D-28 模仿 vueuse 來做一個自己的 useBarCode 吧 2 封裝
D-29 模仿 vueuse 來做一個自己的 useBarCode 吧 3 文件說明與範例
D-30 總結
那就讓我們開始 30 天的 VueUse 之旅吧