使用 v-model 綁定 Radio
v-model 不僅僅只能綁定到 Textbox，也可以綁定到 Radio，當在 HTML 改變 Radio 狀態時，JavaScript 也會連動改變 State。
タグ : Vue
使用 v-model 綁定多個 Checkbox
v-model 不僅僅只能綁定到 Textbox，也可以綁定到多個 CheckBox，當在 HTML 改變 Checkbox 狀態時，JavaScript 也會連動改變 State。
使用 v-model 綁定單一 Checkbox
v-model 不僅僅只能綁定到 Textbox，也可以綁定到單一 CheckBox，當在 HTML 改變 Checkbox 狀態時，JavaScript 也會連動改變 State。
使用 v-model 綁定 Textbox
當我們由 HTML 輸入資料，並由 JavaScript 取得時，就要使用 v-model Directive 將 HTML Element 綁定到 Vue 的 State，如此當 HTML 輸入變動時，JavaScript 就會 Reactive 地跟著改變。
使用 Computed 根據 Computed 連動
除了 HTML 可以根據 State 連動以外，還可以建立 Computed 根據另一個 Computed 連動，只要其中一個 State 改變，所有根據此 State 建立的 Computed 也會 Reactive 地跟著改變。
使用 Computed 根據 State 連動
除了 HTML 可以根據 State 連動以外，還可以建立 Computed 根據 State 連動，只要其中一個 State 改變，所有根據此 State 建立的 Computed 也會 Reactive 地跟著改變。
使用 v-else Toggle 兩個 HTML Element
v-if 常搭配 v-else 根據 State 的 true 與 false Toggle 兩個 HTML Element。
使用 ref() 實現 JavaScript 與 HTML 連動
ref() 為 Reactivity API 最重要的 API，用來宣告 State。只要我們在 JavaScript 修改 state，HTML 就會 Reactive 地跟著改變；反之若我們在 HTML 修改 state，JavaScript 也會隨之改變。
Hugo X Vue 3 實現 Todo List
Hugo 雖然常搭配 Petite-vue，但只能使用 reactive()，也沒 computed() 可用，若搭配 Vue 3 就能使用 ref() 與 computed()。
使用 NVM 管理 Node.js 版本
雖然 Vue 3 並不太挑 Node.js 版本，只要符合最低需求 Node.js 18.0 以上即可，但其所使用的 NPM Package 則可能會挑版本，因此實務上還是建議使用 NVM (Node Version Manager) 管理 Node.js 版本。
Vue 之 Script Setup
從 Vue 3 開始，Vue 經過多次語法演進，到目前 Vue 3.2 所提供的 Script Setup 後，Vue 的寫法總算穩定下來，也是目前 Vue 官網範例的正式寫法，但還是有不少網路上範例或書籍用的是 Vue 3 早期寫法，雖然不再建議這樣寫，但還是得看得懂，並藉此了解 Vue 語法的演變軌跡。
Vue DevTools (Chrome Extension)
Vue 官方提供 DevTools (Chrome Extension) 協助我們 Debug，讓我們可以少寫很多 Log。
使用 ESLint 檢查 Vue
在 Vue 專案安裝 ESLint Package 與 VS Code 安裝 ESLint Extension 後，就可在 VS Code 內使用 ESLint 檢查 Vue 代碼。
使用 Prettier 美化 Vue
在 Vue 專案安裝 Prettier Package 與 VS Code 安裝 Prettier Extension 後，就可在 VS Code 內使用 Prettier 美化 Vue 代碼。
使用 Vite 建立 Vue 3 專案 (完整版)
本文介紹以 Vite 快速建立 Vue 3 專案，官方建議在 Node.js 18.0 以上，目前我是使用 Node.js 19.9.0 (最新 LTS 是 20.11.0)。
Vue 2 與 Vue 3 主要差異
Vue 3.0 在 Sep.18, 2020 發表，Vue 2.7 也在 Dec.31, 2023 正式終止支援，目前最新版本是 Vue 3.4，Vue 3 已經到了成熟期，API 與生態系都趨於穩定，是學習 Vue 3 的好時機。
由 Computed 切換 CSS Class
實務上 CSS Class 可能會根據 JavaScript 的邏輯而改變，此時可將 CSS Class 綁定到 Computed，並將邏輯寫在 Computed 內。
使用 Vue CLI 建立 Vue
現代前端的 Tooling 繁雜， 一直是跨入前端的門檻，讓 CLI 成為 Tooling 的抽象層，由 Vue CLI 幫我們整合繁瑣的 Tooling。
將 Computed 重複部分也抽成 Computed
Computed 是 Vue 很偉大的發明，它簡單地實現了 Reactive Programming，當 computed 所相依的 mode 或 computed 改變時，computed 也會自動改變。
Vue 之 Computed
Computed 為 Vue 的獨門武功，當 Model 改變時，Computed 可以 Reactive 隨之改變，是 Vue 的 Reactive Programming 實踐。
使用 v-model.number 將 String 轉成 Number
儘管原始數據為 Number，<input type="text"> 只要輸入後就會變成 String，這會造成如 Computed 內的 + 錯誤，最簡單的方式是在 v-model 加上 .number modifier，Vue 會自動幫我們將 String 轉成 Number，避免 + 的運算錯誤。
Vue CLI 之 Mode 與 .env
實務上一定會遇到在不同 server ( development、lab、staging 與 production) ，且各有各的 環境變數，該如何設定這些環境變數並且自動切換呢 ?