# 認識元件 在 Vue 幫我們解決的事情這篇文章中，已經用一個簡單的方式介紹元件的概念。 當時只是提到模板結構跟資料抽離，並且讓結構重複使用，帶上不同的資料。 有沒有覺得這東西跟什麼很像？ 對… 就是上一篇文章的 v-for 在做的事情。 實際上這只是一個最淺的概念來讓新手去「感受」什麼叫做元件，但 v-for 在做的事情，純粹只是讓畫面重複被渲染，嚴格說起來不能稱之為元件。 Vue 的元件，除了能讓模板「重複使用」之外，更重要的還是能在整個 Vue 應用程式中的任何位置使用。 而且除了「畫面」之外，還會可以包含一些資料加工與邏輯整合。 我們剛學習網頁的開發方式，就是你我都熟知的三個檔案：...

# 前言 這篇文章，開始來介紹該如何開始使用分支吧！ 一樣介紹完指令之後，來介紹 GUI 的操作方式。 老樣子，我可能會直接在指令操作的內容敘述一些觀念，也請 GUI 派的讀者也稍微看一下指令的內容。 # 使用指令操作分支 跟分支有關的指令需要認識兩個英文單字： branch ，也就是分支本身 checkout ， 中文是取出 不過我看著「取出」兩個字，實在想不到他的意義是什麼。 所以 checkout 我會直接把他想成「切換」。 # 查詢分支 若要查詢目前專案中的分支，直接使用這個指令就可以了： git branch$ git branch*...

# 前言 看到 for 這個字樣，應該已經知道他在做啥了！ 沒錯，跑迴圈。 在網頁畫面中常常會有清單資料，像是購物網的商品清單，或是 google 搜尋完的每一筆資訊，都算是清單資料的一種。 這種結構相同，但資料不同的內容，就很適合拿 v-for 來處理 # v-for 語法 最基本的 v-for 語法長這樣 <li v-for="item in items">{{ item.message }}</li>items 參數跟 item 都可以自己命名，你想叫做...

# 前言 終於可以進入 Git 的重頭戲，分支篇！ 分支是 Git 極度重要的功能之一，因為有了分支的各種運作，Git 的世界才會變得如此精彩。 同時也會讓我的文章變得很難解釋 在 Git 中要操作分支是一件非常簡單的事情，無論是建立分支、切換分支、分支更名稱，基本上只要簡單一個指令，或是點幾下 GUI，就能完成。 不過在實際學習操作之前，想先用一篇文章的內容，幫大家先建構好看待 Git 分支應該有的觀念，避免在直接學習操作的過程，不知不覺對分支建立錯誤的印象。 接著就來聊聊「為什麼要使用分支」，以及「分支到底是什麼」吧！ #...

# 前言 如果你知道程式的 if 、else if 、else 的操作方式，那麼這篇文章的內容應該很容易理解 程式的條件判斷指令，都會接一個布林值 if (布林值) { // 一些邏輯操作}v-if 的功能也差不多是這樣，會接一個布林值，邏輯只會有一個：決定模板要顯示還是消失。 # v-if 語法 基本語法是這樣寫 <div v-if="hasData">如果有資料，這裡要顯示</div>Vue.createApp({ setup() { const...

# 前言 git reset ，一個之前文章時不時會出現的字詞，但當時文章又一直不認真說明。 看看這篇文章右手邊的滾軸有多小，你大概就能體諒我為什麼當初對 reset 一直要說不說的了 Orz… 在開始介紹 reset 用途之前，有幾個先備知識複習一下，對後面的內容理解可能會有幫助。因為觀念很重要，後續還是會繼續提及。 之前把 「暫存區 (索引)」比喻成「購物車」，接著我們把 「提交版本」 比喻成 「商品下單」，這可能讓讀者以為「提交版本」之後，「索引」就會被清空。 不過在 Git 中，提交版本的行為「不會」清空索引裡面記錄的資料！ 提交版本 更貼切的想像，應該是把 commit...

# 前言 我們已經知道使用雙大括號，可以把資料綁到模板上，並且在 程式中 操作資料時，綁定的資料也會跟著異動。 不過有沒有一種可能，是要讓使用者操作畫面資料內容後，程式要去處理這些資料？ 你猜對了，就是在說表單。 到目前為止介紹的內容，都是我們把資料渲染到畫面中，還沒有任何表單相關的操作。 一般來說，如果要把使用者輸入的資料塞回程式裡面使用，需要同時使用到這兩天說明的 v-bind 、 v-on 指令： <input :value="message" @input="event => message =...

# 前言 有時候我們在執行完 commit 之後，發現有一些「小地方」應該也要記錄在同一個版本，或是發現版本訊息有錯字想要改一下，這些都算是很常見的狀況，畢竟只要是人都一定會有小疏失。 「雖然」 之前把 Commit 訊息比喻成訂單紀錄，在網購世界想操作歷史訂單，只要找到特定訂單就能修改。 不過在 Git 的世界，除了最新一筆的 Commit 之外， 沒辦法 「單獨修改」 其中一個 Commit 。 原因其實也很簡單：每個 Commit 都是緊緊相依的！ Git 的 Commit 視同「資料的變化」，每一版的「變化」都是跟「上一版」相比，更動歷史的 Commit...

# 前言 今天來聊聊 Vue 中事件的寫法。 # 基本語法 如果你有看過怎麼在 HTML 寫事件，像是 onclick="functionToExecute()" 之類的，那你對於 Vue 提供的是鍵語法應該會很熟悉。 基礎與法式使用 v-on:[事件名稱] ，例如 v-on:click="func()" 、 v-on:keydown="func()" 。 這個指令也有縮寫： @ 。也就是說可以寫成 @click="func()" 、...

# 前言 我們在開發專案時，不太可能一帆風順，永遠依循著 開發完 => 暫存 => 提交 的順序持續上版。 有時候手速一個太快，只是想暫存部分檔案，結果執行到 git add . ，但實際上並不是想暫存所有更動的檔案，有沒有辦法將部份內容移出暫存區？ 像是一股腦把所有東西加到購物車，結帳前看到總金額嚇了一跳，想把部分商品移除購物車的行為。 又或者開發到一半發現改爛了，能不能一次捨棄編輯的資料，讓檔案回到原本的 commit 狀態？ 就像是之前提玩遊戲下完存檔點後，繼續打 Boss...