一個工程師的筆記天地

# 前言 前篇說到，在定義好元件之後，如果元件需要透過「外部」傳入狀態，可以使用 props 來傳遞，同時也提到 props 應該是 readonly 的特性，不該有能力更改外部的狀態。 但如果出現需要將元件的狀態傳遞給外部的情境，或是需要更改外部狀態的情境又該如何處理？ 這時就會提到 Vue 中，元件溝通方式的口訣：「Props in, Event out」。 # 定義元件的事件 emit 可以讓我們定義「元件的事件」，透過這個事件我們可以做到兩件事： 把元件內部的狀態傳出去外部 讓外部決定事件被觸發時要做的事 第二點就像是我們可以針對某個 HTML 標籤定義 click...

# 前言 Rebase 如果直接翻譯，意思會是「重新定義基底」。 行為上就有點像是花草樹木長得太亂，要重新修剪嫁接的感覺。 以這個特性來說，我們也可以做到類似分支合併的操作。 比起用文字說明，直接來看執行 rebase 的效果，可能更能體會 rebase 的意義。 老樣子，前面講指令，後面講 Fork GUI。 # git rebase 執行效果示範 這是目前分支的狀況， master 合併了 Emilia 分支，尚未合併 Rem 分支。 此時我停在 Rem ，並且執行這個指令： git rebase master終端機會跑出成功 rebase 的訊息 $ git rebase...

# 前言 這篇文章來記錄一下，當父層元件傳遞資料給子層元件的語法： props # props 我們已經知道在模版中要使用元件，會是這樣的語法： <div id="app"> <my-component></my-component></div>要讓元件有辦法接收變數，需要先在元件中多加一個 props 屬性： app.component("my-component", { template: ` <div>...

# 前言 相信看完分支的觀念與操作後，還是會有人對分支操作的某些「正常現象」還是會有疑惑，同時也有一些實務上的問題，在之前的文章礙於篇幅而沒有提及。 這篇文章來說說筆者曾經疑惑，或是覺得可以記錄一下的內容。 進入今天的主題： 分支操作常見問題 # 建立分支提交的 commit，不是應該要有「岔路」嗎？ 只有在兩個分支分別走向不同的路，才會出現岔路。 這個問題應該是新手初次接觸分支比較不好體會的地方，我們都以為建立了分支發佈版本之後，線圖應該會有另一個顏色進行區分。但實際操作下來，卻會發現新分支的 commit 好像跟原本的分支在同一條線… 像是下圖的情境，開了新分支 dev 執行...

# 前言 雖說單一元件檔案的程式因為有 script setup 語法，能讓程式變得乾淨俐落。 不過並不是每個人都會使用 vite (或以前的 vue cli) 來使用 Vue。 用 CDN 引入 Vue 的程式開發方式，其實也能使用元件。 這篇文章要來記錄一下，這種方式使用元件的語法。 # 在輕前端使用元件 還記得可以宣告一個變數去接 Vue.createApp 回傳出來的東西嗎？ const app = Vue.createApp({});app.mount("#app");一樣，那個 app 變數，代表能變的數...

# 前言 開始使用分支之後，總是會需要把開發的內容合併回來的一天。 在使用分支之前，操作的指令不太需要在乎目前所在的分支在哪，儘管執行指令操作資料就是了，不過要執行分支合併的動作，代表我們會去處理「兩個分支」的資料，要在哪個分支執行指令就是一件很重要的事情了！ 剛接觸分支合併會遇到的幾個疑問不外乎是這些： 指令該在哪個分支執行？ 分支合併之後會發生什麼事情？ 進行合併分支是不是一定會發生衝突？ 種種的疑問將會在這篇文章解答！ 直接進入今天的主題： 分支合併與衝突解決！ #...

# 認識元件 在 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 分支應該有的觀念，避免在直接學習操作的過程，不知不覺對分支建立錯誤的印象。 接著就來聊聊「為什麼要使用分支」，以及「分支到底是什麼」吧！ #...