在第 29 天，我新增了一個載入器（一個 <div>Loading ...</div>）來顯示頁面正在載入資料。 在 Angular 2...
第 28 天 - 取得貼文作者 在第 28 天，我使用貼文的 userId 呼叫 users 端點來取得使用者名稱。 在 Vue 3 中，我建立了另一個 com...
第27天 - 建立一個簡單的部落格頁面 在第27天，我完成了Vue 3 Vue 3 Composition API 課程，建立一個簡單的部落格來顯示文章。該網站...
在第26天，我檢視了 AlertBar 元件的程式碼，並發現兩項改進可以讓它更乾淨。 該元件包含一個靜態標籤 (static label) 和一個雙向綁定...
在第 25 天，我擴充了 Alert Bar 元件來顯示已關閉 Alert 的按鈕。接著，使用者可以選擇重新開啟所有已關閉的 Alert，或是特定類型的 Ale...
第 24 天 - Alert 元件 第 3 部分 - 新增用於更換樣式的 Alert Bar 在第 24 天，我建立了一個 Alert Bar 元件，用來顯示或...
在第23天，我動態渲染警示（alert）的 SVG 圖示，因為動態渲染更易於維護（maintainable）、擴展（scalable）及高效（efficient...
第22天，我開始進行 Vue 3、Angular 20 以及 Svelte 5 的 Alert Component 練習。 該 Alert component...
在第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 技術不強，因此我會遵循講...
第 17 天 - 在 HTML 模板中渲染動態內容 在第 17 天，我示範如何在元件中渲染動態內容。Vue 3 將內容投影到 slots，並可選擇性地顯示插槽屬...
在第16天，當選擇了一個咖啡方案 (coffee plan) 時，我會在該方案周圍加上邊框。其他咖啡方案則變成非活躍狀態，並移除邊框。CoffeePlan 組件...
第 15 天- Add a Coffee Plan Form 在第15天，我擴展了 PlanPicker 組件，加入了一個 AddCoffeePlan 組件，用...
建立 PlanPicker 元件 在第14天，我繼續重構 App 元件，將咖啡計畫清單抽取到新的 PlanPicker 元件中。這樣不僅讓 App 元件更乾淨，...
建立 CoffeePlan 元件 第 13 天，我開始將 HTML 程式碼重構為可重用的 CoffeePlan 元件。該元件將接受一個 name 輸入，並在 H...
使用 JavaScript 框架的元件基礎 在第 12 天，我開始觀看 Vue School 的 Vue Component Fundamentals with...
在第11天，我會把所有示範專案部署到 Github Pages，因為 Github Pages 是免費且我手動部署也很簡單。 使用 Github Actions...
在第10天，我們終於學習了一個關鍵的響應式概念：從現有狀態衍生新狀態。在 Vue 3 與 Angular 中，使用 computed 函數來從其他狀態創建只讀的...
在第 9 天，我將示範在 Vue 3、SvelteKit 和 Angular 中屬性綁定（attribute binding）的範例。範例中 Save Item...
在第8天，我將示範 Vue 3、SvelteKit 與 Angular 如何執行動態的 CSS 類別與樣式綁定。展示中包含 CSS 類別綁定與樣式綁定的範例。當...
本篇文章示範了 Vue 3、SvelteKit 與 Angular 如何使用內建的控管流程語法或指令來進行條件渲染。Vue 3 使用 v-if、v-else-i...
在第 6 天，我將說明 Vue 3、SvelteKit 與 Angular 如何在購物車元件中回應 HTML 事件。 在購物車元件中，我們會在表單送出事件時，將...
在第五天，我要示範如何將輸入欄位和核取方塊（checkbox）雙向綁定到響應式（reactive）狀態。當你在輸入欄位編輯數值時，對應的狀態會即時更新並顯示在畫...
清單渲染與刪除按鈕 今天我要示範如何渲染一個項目清單。每列還會有一個刪除按鈕，可以從清單中刪除項目。當清單更新後，模板會反應性地重新渲染清單。 新增了一個 It...
在模板中插值 header 表達式 Vue 3 應用程式 在 ShoppingCart 組件的 script 標籤內，我會建立一個初始值的 header ref...
建立購物車元件 Vue 3 應用程式 刪除了 components/ 資料夾中所有檔案。在 components/ 目錄底下建立 ShoppingCart.vu...
這篇文章內容主要來自 Vue School 的 "Vue.js 3 Fundamental with the Composition API"...
我是 Angular 的 Google Developer Expert（GDE），自 2021 年起開始撰寫各種 Angular 主題的部落格文章。我的前端旅...
iThome鐵人賽
看影片追技術
看更多
connieleung