Vue 實作 check box 全選與取消全選check box 全選與取消全選有 2 種做法可以實現這個功能，可以使用 methods 來實現，也可以使用 computed 來監聽「全選的核取框」。 使用 methods 方法實作 全選的 check box 雙向綁定到 allChecked 這個資料狀態，預設的布林值為 false。 checkList 這個資料狀態是一個陣列，存放所有的 c

在原生的 Java Script 中常常會使用 id 來取得 DOM 元素，但是開發到最後常常會用了太多的 id，搞的 id 的名稱互相衝突。在 VUE 中提供了 $refs 的方法，讓我們用 ref 代替 id 來取得 DOM 元素。 ref 的作用： 用來選取與操控 DOM 元素。 用來取得元件的內容。 Bootstrap Modal 元件的封裝。 使用 ref 取得 DOM 元素在 in

當初為什麼報名這堂課？我曾經參加過 2022 春季 VUE 直播班，後來去當了一陣子的 PM。本以為沒機會當工程師了，因緣際會，拿了直播班的作品去參加了一場面試，結果順利拿到了工作機會。因為有半年時間沒有接觸程式，所以想要重新複習一下 VUE 的語法與使用。 第一週~第八週的學習過程雖然每周五下班都累得像條狗，上課也是偶而會打瞌睡，還是撐著上完了，連假日直播也都沒有錯過。第八周課程的那一天剛好也是

在開發中驗證表單欄位是一件前後端都必須處理的事情，不僅前端要驗證使用者輸入的欄位資訊，後端也要驗證送往伺服器的資料。 而前端的驗證如果要自己寫，會牽扯到正則，而且也會容易掛一漏萬，所以如果要在 Vue 裡面進行表單驗證，通常會引用套件，但是並不是所有的套件都支援中文語系。 Vee-Validate 是目前比較完整而且支援繁體中文語系的驗證套件。雖然說是套件，如果你去看 Vee-Validate 的

PM 開了一項需求，希望在開發環境與正式部屬環境使用不同的 Google-Analytics 的評估碼 g-tag，之前在開發的時候都是寫死的，剛聽到這個需求，我有點不明所以。 請教了有處理過這個 issue 的前輩，才明白是使用了 vite-plugin-html 這個插件，分別在不同環境的env 檔案寫入對應的 g-tag，然後動態依據不同環境替換不同的 g-tag。 首先安裝 vite-pl

Vue 3 主要有 2 種處理路由的方式，分別是 Hash Mode 以及 HTML5 (History API) Mode 兩種。(其實還有一種 abstract 模式) createWebHashHistory 模式網址列多了一個 # 字號。 Hash 也就是 我們用來設定連結錨點的那個 # 字號。 <a hhref="https://xxx.co

pinia 是 Vue 官方推薦的狀態管理工具，可以解決跨元件之間資料傳遞要反覆的 props 及 emit 的問題，只要把資料跟方法放在 store 裡面，就可以讓所有的元件取用，不但傳遞變簡單了，在管理資料上面也變得更清楚。 首先安裝 pinia npm install pinia main.js 中初始化 import { createApp } from "vue";

之前寫過一篇在 《在 Composition API 中使用 props 與 emit 操控 modal》的筆記，那時是使用 props 跟 emit 處理外部元件與內部元件之間資料傳遞的問題。 但是當有兩個以上的 modal/彈跳視窗 的時候，第一個 modal 是開啟狀態，這時觸發第二個 modal 開啟，同時第一個 modal 要關閉。這種情形下，兩個內部元件彼此要傳遞訊息變得十分

在前端工程師的日常中，modal/ 彈出視窗 是常常會遇到的工作情境。畫面大概就是外部元件有一個按鈕，按下去會有一個對話框（內部元件）彈出來，對話框上有個按鈕，點擊後對話框就會關閉。 如果前端框架是 Vue 的話，一般我們會在外部元件定義一個布林值，預設為 false ，按下外部的按鈕後，布林值會變為 true。 開啟：在內部元件 modal 用 props 接收外部元件的布林值，綁上

hover 是一種常見的網頁滑鼠互動，用法十分簡單，但是卻可以變化出各種形式。以下筆記幾種常見的用法： 基本用法HTML元素先設定基本的樣式，再用 選取器:hover{...} 設定滑鼠滑上元素後變化的樣式。 <div class="box"></div> .box { width: 100px;