偵聽器 基本示例 計算屬性允許我們聲明性地計算衍生值。然而在有些情況下，我們需要在狀態變化時執行一些“副作用”：例如更改 DOM，或是根據異步操作的結果去修改另一處的狀態。 在組合式 API 中，我們...
生命週期鉤子 每個 Vue 組件實例在創建時都需要經歷一系列的初始化步驟，例如設置好數據偵聽，編譯模板，掛載實例到 DOM，以及在數據改變時更新 DOM。在此過程中，它也會運行被稱為生命週期鉤子的函數...
表單輸入綁定(2) 值綁定 對於單選按鈕，複選框和選擇器選項，v-model 綁定的值通常是靜態的字符串 (或者對複選框是布爾值)： <!-- `picked` 在被選擇時是字符串 "...
表單輸入綁定(1) 在前端處理表單時，我們常常需要將表單輸入框的內容同步給 JavaScript 中相應的變量。手動連接值綁定和更改事件監聽器可能會很麻煩： <input :value=&q...
在 Vue 3 中，Portals 是一種強大的技術，允許我們將組件的部分內容渲染到應用中的其他 DOM 節點，而不受父子組件層級的限制。這種技術可以在構建複雜的用戶介面時提供極大的靈活性，特別是當我...
今天要介紹SOLID的第四篇- 介面分離原則(Interface Segregation Principle, ISP)，一開始第一次學習接觸會覺得SOLID這幾個原則，在實際應用上會有幾分類似。 不...
在 Vue 的宇宙裡，表單輸入綁定不再是令人頭痛的問題！有了 v-model，你只需要一句簡單的指令，就可以讓使用者的輸入與你的應用程式完美同步。無論是輸入框、複選框、還是下拉選單，v-model...
在這個系列中，我們一共實作了約 27 種不同的 Atomic Components。但在實際開發上，我們不總是只需要顧好 Client Side Rendering（CSR）。如果我們今天要實作的專...
今天要來把我們先前辛苦寫的作品部署到GitHub！（Git應該都不用再多介紹大家都很熟了），但我們還是紀錄一下第一次部署Vue專案的過程，就怕太久沒碰之後就忘了！ ◎小提示：本篇是以簡易部署個人作品角...
高效的表單處理與動效反饋設計 你是否曾經在填寫表單時，感覺整個過程有些枯燥乏味？或是點擊「提交」後遲遲沒有回應，讓人懷疑到底有沒有成功送出？ 其實，表單不僅是網站上用來收集資料的工具，它也可以變得...