在第21天，我會將所有的示範部署到 Github Pages，因為 Github Pages 是免費的，且可以透過 Github Actions 自動化處理。...
樣式設計其實是這個練習中最簡單的部分。步驟在不同框架中通常是相同的。 安裝 tailwindcss 和 DaisyUI 在 CSS 檔案中加入 DaisyUI...
示範中使用卡片佈局 (card layout) 顯示 Github 使用者。GithubProfileList 會迭代一個使用者名稱的清單，並在 GithubP...
第18天，我開始在 Vue 3、Angular 19 和 Svelte 5 中進行 Github 使用者個人資料的練習。 我的 CSS 技術不強，因此我會遵循講...
前言：從群組驗證到多筆資料 在上一篇，我們學會了如何處理 群組級驗證與跨欄位邏輯，解決了「欄位之間有依存關係」的問題。 而在實務專案裡，還有一個常見的需求是：...
前言：從巢狀結構到驗證規則 上一篇談過 單層 vs 巢狀表單，用 FormGroup 與 FormArray 對應資料模型。結構搞定後，下一步就是 驗證： 「...
第 17 天 - 在 HTML 模板中渲染動態內容 在第 17 天，我示範如何在元件中渲染動態內容。Vue 3 將內容投影到 slots，並可選擇性地顯示插槽屬...
前言 前面的狀態管理，我們有提到了 Reactive Forms 的 API，現在讓我們進一步的討論關於 Reactive Forms 的部分。 「我們要如何設...
在第16天，當選擇了一個咖啡方案 (coffee plan) 時，我會在該方案周圍加上邊框。其他咖啡方案則變成非活躍狀態，並移除邊框。CoffeePlan 組件...
第 15 天- Add a Coffee Plan Form 在第15天，我擴展了 PlanPicker 組件，加入了一個 AddCoffeePlan 組件，用...
— 用 Directive 收斂權限判斷，讓模板乾淨俐落 — 延續 Day19 的設計思維，這篇把「角色（RBAC）→ 資源（Resource-Based）→...
前言 在前幾篇，我們談了路由跟狀態管理，有了這些概念之後，就能處理下一個問題： 👉 誰，能對什麼資料，做什麼操作？ 權限管理的三個核心問題 Who (誰)...
建立 PlanPicker 元件 在第14天，我繼續重構 App 元件，將咖啡計畫清單抽取到新的 PlanPicker 元件中。這樣不僅讓 App 元件更乾淨，...
前言 在前兩篇文章中，我們探討了： Day 16：資料儲存 → 資料應該放在哪裡？ Day 17：資料流控制 → 資料應該怎麼在應用程式中流動？ 接下來...
建立 CoffeePlan 元件 第 13 天，我開始將 HTML 程式碼重構為可重用的 CoffeePlan 元件。該元件將接受一個 name 輸入，並在 H...
使用 JavaScript 框架的元件基礎 在第 12 天，我開始觀看 Vue School 的 Vue Component Fundamentals with...
前言 在上一章，我們探討了資料該存在哪裡，從 localStorage、sessionStorage 到 Angular 的 Service、Route Reu...
在第11天，我會把所有示範專案部署到 Github Pages，因為 Github Pages 是免費且我手動部署也很簡單。 使用 Github Actions...
— 以「右側選單點擊 → 左側生成 Tabs」為例 前言 在桌面應用程式翻新成網頁的專案中，我們常會遇到這種需求：使用者點擊右側的功能選單，左側也要開啟一個分頁...
前言 路由轉場動畫其實我沒有在工作中用過，應該是因為我做 B2B 的專案比較多，動畫需求在 toC（面向一般顧客）的情況比較多。但因為有點好玩還有跟前面有連結就...
在第10天，我們終於學習了一個關鍵的響應式概念：從現有狀態衍生新狀態。在 Vue 3 與 Angular 中，使用 computed 函數來從其他狀態創建只讀的...
什麼是 Guard？為什麼需要它？ 前面有稍微提到了守衛(Guard)，它的名稱非常的符合它的功能，它確實就是擋在門口的衛兵，進去跟出來都得經過它的檢查，或是你...
在第 9 天，我將示範在 Vue 3、SvelteKit 和 Angular 中屬性綁定（attribute binding）的範例。範例中 Save Item...
在第8天，我將示範 Vue 3、SvelteKit 與 Angular 如何執行動態的 CSS 類別與樣式綁定。展示中包含 CSS 類別綁定與樣式綁定的範例。當...
在實務上有非常多種類的資料流設計，我會以我工作上遇到的經驗來分享 Router 能夠處理的參數傳遞。 Angular Router 有幾種主要的參數傳遞形式，分...
前言 由於 Angular 是 單頁應用程式 (SPA) ，是透過 JavaScript 動態更新頁面內容，而不是重新載入整個頁面。 可以把 這個標籤想成一個...
本篇文章示範了 Vue 3、SvelteKit 與 Angular 如何使用內建的控管流程語法或指令來進行條件渲染。Vue 3 使用 v-if、v-else-i...
情境 內部系統最常遇到的需求，就是使用者需要管理資料，以下分享這樣的管理行為如何操作，通常是在表格上的對應資料上放上按鈕來操作 刪除 請出現彈窗，讓使用者確...
在第 6 天，我將說明 Vue 3、SvelteKit 與 Angular 如何在購物車元件中回應 HTML 事件。 在購物車元件中，我們會在表單送出事件時，將...
前言 如果你看到主控台出現 .「... CORS error…」這個錯誤， 他是來自於 同源政策(Same-Origin Policy) 的關係，這個政策是瀏覽...
connieleung
Zoe Wu
iThome鐵人賽
看影片追技術