Chia Pin #
2 位追蹤者
分享解題、分享筆記、分享心得、分享踩坑TT
全部內容
由新到舊
此筆記僅以個人理解方式記錄
環境準備
我們這邊以 Bootstrap 5 的卡片元件來展示，要準備的有：
Bootstrap 5 CDN
Card(卡片) template
React CDN
React
React 起手式，引用 CDN、綁定 root、指定渲染 dom。
<
此為不負責任教學，介面操作依實際情況而有所異動
額外資源參考
[API] 串接 Imgur API 圖床服務，上傳到指定相簿
israynotarray超完整 Express Imgur 套件上傳教學
[前端筆記] 用 axios 串接 imgur API上傳圖片
因為最近想嘗試編碼風格，於是就選了一套比較"不嚴格"的輔助工具來摸索。
編輯器 VS CODE
框架 VUE3
打包工具 VITE
編碼風格 Standard
環境 version
{
"nodejs":"v18.18.0",
"npm":"9.8.1"
}
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令，而這次我們可以依這自己的需求來建立。
此功能屬於較進階的功能，因此實戰中會比較少見，市面上還是有不少完善的套件能達到同樣效果，建議可以先往這方面察找
我們在實作中，難免會遇到在不同組件中，卻有需求相同的資料格式，因此 mixins 可以達到我們的需求，除了 data 以外也包含了 methods 可以共用，舉例來說，學生資料可能會在，班級跟社團內被使用，當我們要撰寫元件時，就可以省略多餘的 data 定義。
VUE為單向資料流的框架，在鄰近層級之間我們可以依靠 props 由父層向子層來傳遞需要的資料，然而遇到跨層級的架構時，雖然也是可以一層層傳進去，只是這會造成多餘的處理及凌亂的程式碼，因此才有了 "provide" 來解決我們跨層級的需求。
層級展示圖
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上，即使在不同組件也能把A組件內的部分畫面，展現在B組件上，以下方程式舉例。
這次要講的是 $route 及 $router 的區別，看似相似的兩個東西，其實應用時機也大不相同，以下以簡單的幾個例子舉例。
由於去年我是直接從JS直播班出發的，想當然沒參加過體驗營這類的短期嘗鮮課程，就抱著試試看的心態來體驗看看了，也因為我本身有一些些基礎了，這次就果斷幫自己加碼擔任志工，多多少少能幫助到剛開始就卡住的同學，希望能借著多次的經驗累積來增加我的經歷。
