一個工程師的筆記天地

# 前言 如果你知道程式的 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 的內容可能會是這樣： 第一版：新增專案說明檔案，記錄一個檔案：...

# 指令介紹 開始進入指令的章節，先前有提到，在 Vue 中，只要看到 v- 開頭的東西，就是指令。 指令的用途很多，例如：資料綁定、事件綁定、條件判斷、迴圈等等。 而只要是指令，都會是寫在 HTML 標籤的「屬性」中，像這樣： <div v-if="isShow">我會顯示嗎？</div>如同 HTML 屬性一樣，指令可以單獨出現，也會有不用帶「屬性值」的指令，像這樣： <span v-once>This will never change:...

# 前言 基本指令外加一些輔助操作，到目前為止應該算是介紹完畢。 在開始進入下一個主題之前的 幾篇 文章，我打算來聊聊一些能承上啟下的觀念。 對… 大概會有一兩篇都是閒聊性質 這些觀念跟指令沒什麼關係，但是如果沒把他搞懂的話，卻會 直接影響 部分指令的操作。 由於筆者不太喜歡在主要內容中穿插各種補充讓文章失焦 雖然已經…，於是乾脆把一些觀念與問題獨立出來聊。 希望大家能因為這幾篇文章更認識 Git ，同時可以在開始介紹其他操作之前，奠定一些概念。 # 聊聊 CommitID 我們再次把這個線圖請出來，並且把關注點放在最右邊的 CommitID 。 這些字母「看起來」很沒意義，不過它卻是我們在用...