一、使用時機：slots通常使用在以下情境： 子元件寫好固定不變的html架構，父元件決定要動態改變的html。 子元件封裝共通程式碼邏輯(composabl...
若nav選單是由後端api提供，且是多層級的選單（以2層級為例）：可以將路由表分成4層第1層：Login，登入前頁面Dashboard，登入後頁面，nav的選單...
一、匹配当前路由 使用<RouterLink>，且路徑相符時，渲染出來的<a>會自帶有2種className：router-link-a...
PS: 僅記錄自己不熟的概念。 一、嵌套路由：根目錄path要加 / ，子路由path則不用 const routes = [ { path: '/...
https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%AE%8C%E6%9...
一、全局前置beforeEach router.beforeEach，如果在函式裡面觸發再次導向，return { name: 'Login' }，那麼會再次...
test 為動態路由參數名稱。組件中可透過以下方式取得該參數值： const route = useRoute(); route.params.test...
允許一網址中寫多個動態路由，如下列的:name, :id const routes = [ { path: 'test1/:name...
總結 直到今天就算是正式結束今年的鐵人賽了! 總集回顧 第一章基礎概念 在 Vue 過氣前要學的第一件事 - 先了解自己在 Vue 過氣前要學的第二件事 - V...
前言 終於! 我們進到最後一個篇章，進階使用之生命週期篇; 之所以會把生命週期擺在這麼後面是因為 :只有實際寫過的人，才能更好的理解，所謂不同生命週期具體是指什...
前言 廢話少說開始寫扣吧! 請確保你以下所有套件都有安裝在專案中，如果還沒安裝建議到各篇文章中看如何安裝。 在 Vue 過氣前要學的第十九件事 - Vue Ro...
前言 在網頁開發中，常見的功能包括登入、註冊與各式表單等等這些功能，那前端有個很重要的職責就是提前做好格式驗證。這麼做的原因主要有三點： 減少不必要的 AP...
前言 在此篇章中我們將會帶到如何使用狀態管理工具 + 驗證工具 來實現跨頁表單驗證的功能讓各位在實作中了解何為狀態管理，驗證的時機，以及還有什麼工具可以做延伸閱...
前言 假設今天當你打開 figma，準備開始刻前端，發現很多按鈕都是 #9f86ff 這個顏色， 他甚至已經是你的主色了，你卻只能一次一次的複製這個色號，哪天一...
前言 上一篇我們講到 Tailwind，這篇我們來講解 PrimeVue，怎麼安裝、配置、使用。 剛開始挑套件框架時挑了滿久的，那時候是想搭配 UI desig...
前言 先說! 我覺得版上已經有很多寫得非常好的 Tailwind 系列文章例如 排版神器 Tailwind CSS～和兔兔一起快速上手漂亮的元件開發！或 Ta...
前情提要 昨天我們帶入了最簡單的 Vue Router 安裝並使用。那今天我們將要進入稍稍進階的使用方法，運用得當可以讓你省去很多程式碼，同時還有保有原本的效果...
前言 為什麼我們會需要 Vue Router，或放大來說: 為甚麼我們需要路由管理呢? 現代大多的前端框架都是採 SPA 架構，這也代表了頁面切換是不再依靠...
前言 在設計元件時使用 slot，可以為元件設計帶來很高的彈性。 並減少過度拆元件造成的傳遞參數問題，也就是 props drilling ，常見使用方法有 &...
前言 在 Vue 過氣前要學的第十六件事 - 愛是雙向的 中，我們提到了 vue 的雙向綁定，這僅止於父子關係的組件。 但如果今天這個元件跨了兩層，跨了三層嗎，...
我很自豪能跳出舒適圈，學習 Vue 3 和 Svelte 5/SvelteKit，整個過程非常愉快。在30天裡，我用三個框架完成了5個示範，共15個示範。雖然過...
前言 你可能會聽說 vue 是雙向綁定，但我又說 Vue 是單向資料流。先別生氣。 這就要提到 `emit 了，在 Vue 過氣前要學的第十五件事 - 單向資料...
前言 Vue 是一個資料驅動的框架，畫面是由資料的狀態所決定的，當資料改變，畫面會自動更新。 因此，掌握資料的流向、變動方式與渲染時機，是深入理解 Vue 的核...
在第 29 天，我新增了一個載入器（一個 <div>Loading ...</div>）來顯示頁面正在載入資料。 在 Angular 2...
前言 在 Vue 中，當你希望做某些動作並觸發事件時，可能就會需要用到事件綁定，譬如說呢，今天要點擊一個按鈕數字會 +1: const count = ref(...
第 28 天 - 取得貼文作者 在第 28 天，我使用貼文的 userId 呼叫 users 端點來取得使用者名稱。 在 Vue 3 中，我建立了另一個 com...
前言 在前端開發中，難免動態決定該渲染什麼資料的情況，舉例來說，今天有一個畫面是 : 要根據 API 回傳的資料來渲染該公司的員工列表 那公司員工這個資料可...
第27天 - 建立一個簡單的部落格頁面 在第27天，我完成了Vue 3 Vue 3 Composition API 課程，建立一個簡單的部落格來顯示文章。該網站...
前言 在 Vue 開發中，我們經常需要根據條件顯示或隱藏特定 DOM 元素。 常見的情境有： 表單錯誤訊息只在輸入驗證失敗時顯示。 API 請求後才顯示資料、...
在第26天，我檢視了 AlertBar 元件的程式碼，並發現兩項改進可以讓它更乾淨。 該元件包含一個靜態標籤 (static label) 和一個雙向綁定...
Yanya
connieleung
iThome鐵人賽
看影片追技術