今日呢，筆者想先將專案資料庫的命名與結構先想清楚，也就是Database, Collection 要怎麼取名、各自放什麼。因為我這個小專案會存 { username, password }，把這些規劃...
前言 相信到這個地步，我們身為厲害的魔法師一定會需要與各國的魔法師交流~這時候就需要多國語言的處理~!! 今天我們把語言切換這門魔法真正施展起來！在小型專案裡，直接把文案寫死在前端就夠用了；但當飲料口...
今日目標 用 v-model 管理欄位，搭配 自訂驗證（onInput/onBlur）顯示即時錯誤 送出前 整體檢查、禁用送出按鈕（disabled）與 Loading 狀態 強化 可存取性：ar...
前言 在飲料魔法學院裡，每一個元件（Component）都不是靜止的存在。它們誕生於魔法師的召喚（onMounted），在運行中感受能量波動（watch / watchEffect），最後在結束時歸於...
什麼是 UI 元件庫？ UI 元件庫（UI Library）就是一整套「已經幫你設計好又可客製的前端元件集合」，讓你不用每次都自己寫按鈕、輸入框、彈窗。想像成：「一箱已經設計好的宇宙零件」——你只要組...
Vue 提供的 <transition> 元件，能讓元素進出畫面時自動套用動畫效果，不用額外的 JS，只須加上 class 名稱就能做到 相對應 class 名稱 v-enter-fro...
今日目標 安裝並設定 vue-router 在卡片使用 <RouterLink> 導到 /projects/:slug 在詳情頁用 useRoute() 讀取 :slug，從本地資料...
今天加緊腳步把ProjectTracker.vue的資料也存到firebase去先處理firestore database的部分，新增一個集合來存ProjectTracker.vue的資料集合的名稱各...
Babylon.js的web專案怎麼整合前端框架? 相信對於現代的前端開發來說，更關心有更好的組織性以及較佳的擴展性和可讀性的modern web，想必很多人都會很關心BJS能不能好好的整合在前端框架...
今日目標 在 src/data/ 準備 skills / projects 資料 用 ref/readonly 管理資料，v-for 產生清單 使用 v-model + computed 做「分類...