iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

Vue.js 什麼意思 系列

分享新手視角使用Vue 2執行專案過程中,復刻或模擬遇到各種需求時的解題心路歷程。

鐵人鍊成 | 共 30 篇文章 | 6 人訂閱 訂閱系列文 RSS系列文 團隊好想工作室V5.0
DAY 11

Day 11:Router 怎麼繞-router-link、router-view

大家應該也發現到了,目前點選 Navbar 項目並沒有任何反應;但是點選公版中的 Home 和 About 時: 點選 About,網址跳轉至「 http:/...

2021-09-26 ‧ 由 Teen 分享
DAY 12

Day 12:Router 繞去哪-active-class & exact-active-class

上篇我們為 Navbar 設定好路由之後,接下來的需求則是希望能夠讓選取效果更為明顯,優化使用者體驗: hover 項目時,字體顏色顯示為紅色 ⇒ 跟隨游標移...

2021-09-27 ‧ 由 Teen 分享
DAY 13

Day 13:巢狀路由的孩子-Nested Routes

目前設定的 Navbar 路由架構還算單純,並且只有單層路徑,但是當專案規模愈來愈大、功能類別拆分的愈趨詳細時,整體網站就相對需要更具層級性的規劃,此時路由架構...

2021-09-28 ‧ 由 Teen 分享
DAY 14

Day 14:動態 Route 對號入座

上篇完成了巢狀路由的設置之後,緊接著新需求又出現了!接續會員後台的收藏紀錄頁面,我們要進一步讓收藏的書單可以被購買: 點擊收藏紀錄中的單筆書目資料時,會進入購...

2021-09-29 ‧ 由 Teen 分享
DAY 15

Day 15:在生命週期呼喊 API

在鐵人賽即將過半之際,終於要來串接 API 顯示真實的書單資料了!不過在此之前,我們應該先來了解一下 Vue.js 的生命週期。 生命週期(Lifecycle)...

2021-09-30 ‧ 由 Teen 分享
DAY 16

Day 16:axios 先封裝,API 輕鬆發

上篇我們在單一元件內使用 axios 發送 API,但如果專案規模愈來愈大,需要同時管理多個功能的 API,例如顯示單一書目資料、會員登入系統、查詢會員資料、查...

2021-10-01 ‧ 由 Teen 分享
DAY 17

Day 17:異步行動,同步變動-Vuex Actions、Mutations

Vuex 是個處理全域資料的狀態管理庫,採集中式管理方式,方便任何元件都能從中獲取狀態或觸發事件,實作上通常用來存儲 API 資料後再加以應用,尤其適合應用於開...

2021-10-02 ‧ 由 Teen 分享
DAY 18

Day 18:產地直送,先拿再用-Vuex State、Getters

承上篇從 Actions 進展到 Mutations,接下來讓 Mutations 將結果直接賦值給 State,繼續接棒完成 Vuex 狀態存取流程! Sta...

2021-10-03 ‧ 由 Teen 分享
DAY 19

Day 19:有名模組,無限輔助-Vuex Modules、Map Helper

前兩篇介紹完 Vuex 的核心概念,最後當中大型專案需要組織較為複雜的資料結構時,總不可能一個 index.js 就塞滿所有資料量,這會造成取用和管理上的不便,...

2021-10-04 ‧ 由 Teen 分享
DAY 20

Day 20:全域、路由、元件內-Navigation Guards

之前有預告過,發送 API 的時機點需視不同情境及 UX 體驗規劃而定,因此除了選擇在元件內的生命週期 created 發送,另外在 Vue Router 還有...

2021-10-05 ‧ 由 Teen 分享