在第16天，當選擇了一個咖啡方案 (coffee plan) 時，我會在該方案周圍加上邊框。其他咖啡方案則變成非活躍狀態，並移除邊框。CoffeePlan 組件...
第 15 天- Add a Coffee Plan Form 在第15天，我擴展了 PlanPicker 組件，加入了一個 AddCoffeePlan 組件，用...
建立 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) 的關係，這個政策是瀏覽...
在第五天，我要示範如何將輸入欄位和核取方塊（checkbox）雙向綁定到響應式（reactive）狀態。當你在輸入欄位編輯數值時，對應的狀態會即時更新並顯示在畫...
前言 在開發中型以上的Angular專案時，建立完整的HTTP服務管理體系是必要的。本文將從RestAPI設計規範開始，深入探討Token安全管理、錯誤處理機制...
清單渲染與刪除按鈕 今天我要示範如何渲染一個項目清單。每列還會有一個刪除按鈕，可以從清單中刪除項目。當清單更新後，模板會反應性地重新渲染清單。 新增了一個 It...
在模板中插值 header 表達式 Vue 3 應用程式 在 ShoppingCart 組件的 script 標籤內，我會建立一個初始值的 header ref...
當我們掌握了基本的資料處理策略後，接下來要面對的挑戰是如何讓表格在各種裝置上都能提供良好的使用者體驗，同時處理大量資料時保持流暢的效能。今天我們將深入探討響應式...
前言 除了文字多跟欄位多的問題，還有許多互動需要處理，使用者會有多重條件限制，符合A搜尋條件之後，還要做排序或是篩選。 資料流程中會先從後端取得資料，才到前端呈...
建立購物車元件 Vue 3 應用程式 刪除了 components/ 資料夾中所有檔案。在 components/ 目錄底下建立 ShoppingCart.vu...
這篇文章內容主要來自 Vue School 的 "Vue.js 3 Fundamental with the Composition API"...
我是 Angular 的 Google Developer Expert（GDE），自 2021 年起開始撰寫各種 Angular 主題的部落格文章。我的前端旅...
前言 在上一篇文章中，我們解決了表格內文字過長的問題。但實務上還有另一個更大的挑戰：比時薪還多欄位數。 當你的表格從10個欄位增加到25個、50個，甚至破百個欄...
connieleung
Zoe Wu
iThome鐵人賽
看影片追技術