# 前言 之前的內容都是在地端儲存庫版控的行為，不過如果需要與團隊成員合作版控，我們會需要有一個「遠端儲存庫」，而 GitHub 應該算是一個蠻常聽到的遠端儲存庫了，接著將以 GitHub 作為遠端儲存庫來說明地端資料與遠端資料的操作。 不管是 GitHub ，或是其他的 Git 遠端儲存庫 (GitLab 、TFS 等)，在地端指令的操作上並沒有什麼差異，使用不同儲存庫唯一有感的差異，應改只有「遠端儲存庫」提供的「介面」長得不同而已。 我們在學習的角度，GitHub 網頁上的操作倒是其次，畢竟「不是所有團隊都是使用 GitHub...

# 動態元件 網頁中有一種常見的功能，是能做到某個區塊可以點選畫面中的按鈕 (或標籤) 進行資料的抽換，這種功能在電商網站就很常會看到。 在 Vue 中要實踐這種功能，最直覺的方式可能是用 v-if 來達成。 首先在 Vue 中宣告幾個元件，當作要動態切換的內容，接著在實體宣告一個變數，準備用來讓 v-if 判斷顯示與否的用途。 const app = Vue.createApp({ setup() { const appear = Vue.ref("A"); return { appear, };...

# 前言 話說在前頭，如果進到這篇文章的你還跟 Git 不太熟，目前的你執行了 git commit 之後反悔了，想要把它刪掉卻不知道怎麼刪的話，請左轉參考 git reset 文章，可能比較符合你現階段想完成的事情。 因為 git revert 指令執行下去可能會跟你想的結果完全不一樣。 會以這樣的言論當作開場，就是因為筆者小弟不才本人我，在不熟 Git 的時期想要「刪除」最新的 commit，看到有個 git revert 可以取消 commit，糊里糊塗就給他用下去。 git revert...

# 前言 之前提到，元件如果要接收資料，必須用 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 變數，代表能變的數...