# 前言 之前提到，元件如果要接收資料，必須用 props 元件如果要向外傳資料，則是定義 emit 事件 假設我們的元件有個 <input> 標籤，我們希望元件內部的 <input> 可以跟外部的資料做到雙向綁定，那們根據之前提到的寫法，可能會這樣寫： const app = Vue.createApp({ setup() { const message = Vue.ref("hello"); const updateMsg = (val) => {...

# 前言 上一篇文章聊到 rebase 可以用來把分支連根拔起，重新栽種到某個分支上。 而這個重新摘種的方式，會把拔起來的分支線所有 commit 內容全部重新 commit 一次。 這也代表說，我們可以用 rebase 做到：「不要將分支移花接木，但全部幫我重新 commit」，這樣就可以達到「修改歷史資料」的目的。 之前在 --amend 章節有提到，如果要修改歷史的 commit ，牽一髮就會動全身，就很像 rebase 在做的事情，而這篇文章的內容，就是要來說說如何使用 rebase 來修改歷史資料。 老樣子，指令講完講 GUI，觀念會在指令說 雖然今天的內容寫完指令…...

# 前言 前篇說到，在定義好元件之後，如果元件需要透過「外部」傳入狀態，可以使用 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*...