今天的內容要介紹 Vue 如何在元件狀態發生變化時，執行CSS過渡漸變的動畫效果，來增添使用者介面的互動性。 Transition 元件是什麼？ <transition> 是 Vue 提供...
在介紹完Vue基本架構及SFC組件等基本概念後，接下來要介紹Vue是如何載入流程，以能呈現出網頁 首先，於public/index.html中，會提供掛載點，供Vue應用程式掛載 <!--...
前言 假設今天當你打開 figma，準備開始刻前端，發現很多按鈕都是 #9f86ff 這個顏色， 他甚至已經是你的主色了，你卻只能一次一次的複製這個色號，哪天一不小心打成 #9f96ff，哪邊怪怪的卻...
前言 假設今天當你打開 figma，準備開始刻前端，發現很多按鈕都是 #9f86ff 這個顏色， 他甚至已經是你的主色了，你卻只能一次一次的複製這個色號，哪天一不小心打成 #9f96ff，哪邊怪怪的卻...
今日筆者將參考 Vue.js 官方所提供的互動式教學，並以此為基礎再對部份內容做更深入的說明，那麼廢話不多說，我們直接開始吧！ .vue檔案格式：SFC 這種特別的檔案格式被稱為 Single-Fil...
今天將延續昨天的內容，繼續介紹插槽 Slots 將父元件的內容渲染在子元件中指定的位置 條件插槽 若要根據插槽是否存在來渲染內容，可以使用 $slots 屬性和 v-if 指令。 以下是官方文件的範...
上一篇我們聊到了 Components 的使用方式。那讀者可能會想：網路上有些文章教 Vue2，有些文章教 Vue3，那這兩個到底差在哪？今天我們就來聊聊 Vue2 和 Vue3 的差異。 Vue2...
就是要帶大家認識 Vue 元件「出生到死亡」的整個過程，以及可以在什麼時間點插入程式邏輯。 為什麼叫「生命週期」？ 想像一個元件就像一艘飛船： 建造 → 發射 → 執行任務 → 回收 → 解體Vue...
在前面幾天探討了元件資料傳遞的方式，不過若想要傳遞的是 DOM 內容，使得元件在不同的地方，可以渲染不同的內容，並且仍保有相同的樣式，則需要透過使用插槽 Slots，將父元件的內容渲染在子元件中指定的...
前面幾天的內容是在探討父元件和子元件間的資料傳遞，不過當根元件要傳遞到最底部的元件時，如果使用 props 一層一層傳遞，可能會影響到中間層元件造成額外的麻煩，因此透過使用 provide 和 inj...