一個工程師的筆記天地

# 前言 今天來補完 Vue 資料加工的最後一塊拼圖，監聽器。 在 computed 的內容中有提到，如果在 computed 寫 set 語法，不要寫出有副作用的內容。 不過應用程式千變萬化，總會有機會需要寫含有副作用的邏輯，例如我們希望某個資料異動之後，可以連帶去改動其他狀態 (資料)。 為了因應這樣的需求，Vue 提供一個叫「監聽器」的東西來完成這件事。 # Watch 監聽器 監聽器的概念，就像是監視器一般，時時刻刻的觀測著某個狀態，在狀態異動的時候要去做某些事情。 如果是要監聽一個 ref() 或 computed 的資料，可以這樣寫，例如下面這樣： const {...

# 前言 今天的主題其實在之前開始介紹如何使用 Git 時就可以先說明，不過還是希望能先把基本觀念一次說明到位，讓讀者先對 Git 有一定的認識再說，畢竟設定類的說明，隨時補都來得及。 回到主題，實務上的專案中，總是會有一些「設定檔」、「編譯檔」、「日誌 (log)」，之類不影響專案本體的內容，他們並不需要 (有些甚至不可以) 被記錄到儲存庫中，該如何定義那些「不想被版控」的資料，會是個重要的問題。 為此 Git 提供了一個方式讓我們去定義這些內容：設定 .gitignore 檔案。 # 設定 .gitignore 檔案 首先來說文解字一下， ignore 中文是「忽略」的意思，所以...

# 前言 今天聊聊 Vue 實體中的 methods， 中文叫做「方法」。 如同我們在說「物件的方法」一樣，Vue 世界如果說到「方法」，其實就是在講函式 (function)，而且 methods 的用途就跟 JavaScript 函式一樣，是拿來封裝邏輯。 如果方法有個回傳值，那它就可以寫在模版中。 除此之外，就像 JS 的 function 一樣，他也可以被拿來封裝「事件」要做的事情。 這篇文章會稍微用到 v-on 的指令 ，簡寫 @ ，雖然還沒寫到，不過語法就還蠻直覺的，應該很容易懂。 (其實之前的文章就有出現過，沒這東西實在有點難寫例子) # method 撰寫位置 Vue...

# 前言 到目前為止，大家應該已經學會「提交一個版本」所需要的指令以及操作方式了。 不過在提交完版本之後，總是會有需要回頭查看之前 commit 的資訊的情況。 除非你執行 commit 就像「拿出手機拍下黑板上的筆記」一樣，只是拍個心安感，回家根本不會拿出來看，那我們另當別論… 在 沒有 GUI 的世界，commit 完的東西沒有漂漂亮亮的畫面可以讓我們看到。 需要看歷史的話，只有那個冷冰冰的終端機可以使用。 git log 就是用來做這件事情的指令，這篇文章將來介紹如何使用 git log 來查看歷史的提交資訊。 老樣子，會先介紹指令，再來說明 Fork 介面。 #...

# 前言 我們已經知道模板語法中可以直接寫 JS 表達式，也知道表達式的邏輯可以抽方法來重複使用。 實務上還有一種情況，是需要「依據資料」整理出「對資料的說明」，簡單來說，就是希望透過一包「資料」來產出相依的「資料」。 舉例來說，我們有一份「陣列資料」，除了把資料呈現到畫面上之外，還要特別把「是否有資料」也呈現在畫面。 這就很適合使用 Vue 提供的計算屬性：computed。 # computed 計算屬性 這個計算屬性如同 ref() 一樣，是 Vue 物件提供的方法，需要使用時，記得從 Vue 解構， 並且在使用時，需要用 變數.value 取值 const {...

# 前言 上一篇文章，我們已經學會使用 git status 來查看檔案狀態，不過 git status 呈現的檔案狀態，好像不是只有 暫存 (stage) 與 未暫存 (unstage) 這麼簡單。 這篇文章我們來更細部的探討 Git 中，資料會出現的狀態。 預告一下： 文章預計會說明四個名詞定義，最後還會證明其中兩個名詞 未追蹤 等於 未暫存，整篇內容可能會讓新手看完覺得頭很暈！ 如果你畏懼字詞解釋的話，可以直接滑到文章最底端，看結論。 # 已追蹤 (Tracked) 、未追蹤 (Untracked)，已暫存 (Staged)、未暫存 (Unstaged) 執行 git status...

# 模板語法 先說一個觀念：模板，其實不完全等於 HTML，只是剛好 Vue 使用的模板語法，完全支援 HTML。所以我們使用 Vue 的時候如果提到的「模板」，可以直接把他當成 HTML。 不過這其實有點太鑽牛角尖，在跟人討論 Vue 的時候，講 模板 或是 HTML ，大家應該都聽得出就是在操作那個東西。 回到官網看說明吧： Vue 官方文件的第一句話： Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML...

# 前言 幾篇文章下來，我們已經建立「暫存區」、「儲存庫」的觀念，同時學習到幾個重要的指令： git add git commit 這兩個行為如同添加商品到購物車，然後結帳的動作。 用一個「激問句」來開啟這篇文章的主題： 你會在不查看購物車有什麼商品的狀況下，就直接點結帳嗎？ # 查看 Git 目前的狀態 查看狀態的指令，是指令派的使用者「必學」的指令。 在執行 git add 後，與執行 git commit 前，終端機畫面其實不會告訴我們目前哪些資料是在暫存區，Git 於是提供一個指令讓我們可以查詢： git status我們在一個「空資料夾」執行 git init...

# 前言 你可能會疑惑，我們還沒接觸元件，為什麼現在在講元件的生命週期 事實上，一個 Vue 實體，就是一個元件，所以我們只要開始使用 Vue 之後，就必須跟元件的生命週期打交道了。 # 元件的生命週期 之前應該有說明過「元件」是啥東東了，現在又出現了看起來很困難的詞彙：生命週期。 人的生老病死，月的陰晴圓缺，這種生命週期相信大家應該都能體會。 沒辦法理解的地方大概是，「程式」的生命週期是什麼東西… 事實上就跟你我理解的生命週期一樣，Vue...

# 前言 今天的主題是最近跟一個朋友討論 Git 時，他提出跟我所理解的 Commit 不同的觀點，筆者認為很有意思。 原本打算把這個議題紀錄在上一篇文章的「常見問題」，不過內容打完之後，發現 廢話太多 內容太長，想要刪減內容卻發現無法一言以蔽之，決定還是獨立成一篇文章。 絕對沒有要水一天的意思！！ 先說這個問題的答案：因人而異、因專案而異。 # 每個 commit 都應該是一個完成品才對吧？ 朋友提出了一般聽到發佈「版本」、發佈「新版」時會意識到的事情，這個用詞大多是會出現於「已經可以使用的產物」上。 例如： 工程師寫好的第一版程式 Windows 發佈的安全性版本 蘋果發佈了新版的...