# 前言 看到 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...

# 前言 今天來講 v-bind ，一個用來在 HTML 屬性綁資料的指令。 我們已經知道雙大括號的語法可以把「變數」綁在模板內，不過這個語法並不是用於 HTML 的屬性，也就是你不能這樣寫： <a href="{{ urlData }}"></a>為了能在 HTML 屬性綁資料， Vue 提供 v-bind 指令給大家使用 # 基本語法 語法很簡單，使用 v-bind: 加上原本我們已經熟知的屬性即可。 <img...

# 前言 這篇文章的內容，原本是想放在 commit 的常見問題。 結果當時寫完發現內容太多，如果全部塞到同一篇文章，應該會讓人看不下去。 不過這篇文章記錄的兩個問題，可能會是已經學會版控一段時間之後，或是實務上真的遇到時，才會去思考的問題。 很適合拿來當【一起學 Git 吧！】系列文章，中場休息的小品文閱讀。 我們就一起來看看吧！ # 每個 commit 的資料都只有專案「部分」的檔案，每個版本不是應該都要版控「所有」檔案嗎？ 這問題可能一時之間不好理解，容許我重新描述一下問題的意思。 開始在執行版控之後，commit 的內容可能會是這樣： 第一版：新增專案說明檔案，記錄一個檔案：...