鐵人檔案
這次鐵人賽的主題，我將以 Vue.js 為核心進行探索與紀錄。由於我本身對 Vue.js 還不算熟悉，因此會以「新手學習」的角度出發，透過實作與紀錄的方式逐步了解這個前端框架。預計會從最基礎的環境建置、語法特性開始，延伸到元件化思維、資料綁定、路由設計與狀態管理等核心概念，並搭配簡單的小專案實踐。希望能透過這 30 天的挑戰，讓自己快速熟悉 Vue.js 的開發流程與應用場景，同時也提供給其他剛入門的開發者參考。雖然一開始可能會遇到不少挫折，但也正是透過紀錄學習過程與心得，才能累積成長，並讓「學習 Vue.js」成為一段有意義的挑戰旅程。
今年第一次參加鐵人賽，心情其實有點複雜。興奮的是終於能 push 自己每天輸出，但也緊張自己能不能撐滿 30 天。之前我在專案裡最常用的還是 React、HT...
今天的任務就是把開發環境準備好。要用到的工具包含 Node.js 和 Vite。其中 Vite 是一個相當輕量又快速的前端建構工具，它內建開發伺服器，可以即時預...
在我們今天進入程式前先來看看專案的架構吧～ 一、Vite 專案結構，快速認識誰是誰 vite-project/：你的專案根目錄（下面所有東西都在這裡）。...
三大核心概念 建立與引入元件 解釋：元件就是 Vue 裡的「小積木」，我們可以把一段畫面和邏輯封裝成獨立檔案，再拼進主畫面。小結：先學會建立一個 .vue 檔，...
昨天我們在組件星雲中學會了「單向通信」：props：父傳子資料emit：子傳父事件 但是，如果父元件和子元件能自然地「保持同步」，就像兩顆被引力牽引的雙星，那不...
昨天我們學了「雙向通信的引力」，透過 v-model 讓資料和畫面保持同步。但在宇宙航行的旅途中，不是所有的星門都能隨時開啟，有些星門需要「條件」才能打開。在...
在宇宙裡，星星可不會只有一顆。昨天我們學會了用 v-if / v-show 控制「要不要顯示」，但如果我們有一整片星座需要顯示在畫面上，難道要一個一個手刻嗎？這...
昨天我們用 v-for 排列出一整片星球，但這些星球還是靜靜地掛在銀河裡。如果想讓它們「動起來」，像是點擊後發光，那我們需要一個能處理互動的工具：v-on。 1...
隨著專案功能越來越複雜，若在模板裡塞進一堆運算式，畫面會變得雜亂難懂，也不好維護。Vue 提供了 computed 和 watch，一個幫你「自動算值」，一個幫...
為什麼要綁定樣式？ 靜態 class：固定造型（例如 .planet）。就像在衣服上縫死的布標籤。例子：<div class="planet&...
