鐵人檔案
寫 Vue 的人幾乎都聽過這句話：「v-for 要加 key，而且不要用 index。」 但如果再追問一句「為什麼？」，很多人（包括以前的我）只能回答「因為會出...
寫原生 JS 的時候，下面兩段應該都不陌生： // 表單送出，不要讓頁面重新整理 form.addEventListener('submit', (e) =&g...
登入、註冊、搜尋、篩選條件，幾乎每個專案都少不了表單。只要有使用者輸入，就得處理一件事：畫面上輸入框裡的值，要怎麼跟程式裡的資料保持一致？ v-model 大家...
寫 jQuery 的年代，要對某個元素做事，第一步通常是 $('#xxx') 把它抓出來。來到 Vue 之後，大部分時間我們改資料、畫面自己跟著變，已經很少需要...
寫專案寫到一半，常常會有一個瞬間：打開 App.vue，捲軸拉了半天還到不了底。上面是 header，中間有搜尋框和商品列表，旁邊塞了一個計時器，最下面還有一個...
Day16 - props：defineProps 與單向資料流的規矩 前言：同一張商品卡片，為什麼不能寫死？ 假設你在做一個商品列表頁，每個商品都要顯示名稱、...
上一篇講 props 的時候，留了一個很常見的情境：商品卡片上有個「收藏」按鈕，卡片手上的 product 是父組件給的，照單向資料流的規矩，子組件不該直接去改...
Day 13 我們把 v-model 綁在 input、checkbox、select 這些原生表單元素上，打字、勾選、下拉，資料就自動同步。 今天的問題是：如...
做專案一定寫過共用按鈕：樣式統一、圓角統一、hover 效果統一，每個頁面只要放上不同的文字就好。 這種「外框是固定的，內容由使用的人決定」的需求，Vue 給的...
Day 19 做了一顆共用按鈕 BaseButton。實際專案裡，按鈕很少單獨出現：表單底部有「取消／儲存」，列表上方有一整排工具列按鈕。設計稿通常會要求同一組...
