本篇開始終於要進入解決需求的前置作業了!首先需要讓網站有個基本的置頂導覽列,讓我們有請 BootstrapVue 出場~直接交給 BootstrapVue 幫你...
大家應該也發現到了,目前點選 Navbar 項目並沒有任何反應;但是點選公版中的 Home 和 About 時: 點選 About,網址跳轉至「 http:/...
上篇我們在單一元件內使用 axios 發送 API,但如果專案規模愈來愈大,需要同時管理多個功能的 API,例如顯示單一書目資料、會員登入系統、查詢會員資料、查...
Vuex 是個處理全域資料的狀態管理庫,採集中式管理方式,方便任何元件都能從中獲取狀態或觸發事件,實作上通常用來存儲 API 資料後再加以應用,尤其適合應用於開...
目前導覽項目頁面愈來愈完整,相對有愈來愈多小細節需要留意,尤其是資料量變多時,許多瀏覽時伴隨的滾動效果多少會影響使用者體驗,因此除了顧及版面資料和操作功能,UX...
上篇透過簡單的 vue add 指令就完成了 BootstrapVue 安裝和引入,其引入 bootstrap-vue plugin 的方式其實是備妥所有 Bo...
承上篇,談到 v-for,就要說說它的最佳良伴——key。 v-for 必須綁定代表唯一值的 key 若未綁定 key 值,Terminal 會直接報錯,表示「...
整個系列都快要完結篇了,怎麼可能獨漏 Vue 的神奇語法糖—— v-model 呢?我們已經知道 Vue 基於 MVVM 架構模式,最大的特色就是可以將資料與...
上篇我們為 Navbar 設定好路由之後,接下來的需求則是希望能夠讓選取效果更為明顯,優化使用者體驗: hover 項目時,字體顏色顯示為紅色 ⇒ 跟隨游標移...
因應國際化的需求,專案決定也要符合 international 的規格,Navbar 右上角的「選擇語系」功能總算要開工了!話不多說,直接介紹接下來要安裝的 p...
建好專案之後,來看看專案裡已經幫你準備好哪些檔案吧!先大致認識每個資料夾如何分門別類的規則,日後自己在歸檔時也會相對有概念,更方便管理檔案、組織架構。 根目錄層...
基本上設置多國語系算是相對簡單的事情,只要在 <template> 中有使用模板語法的位置,加上 $t() 放入變數即可。因此可以的話,會建議在專案...
延續上篇最後提到 Webpack 設置了別名「@」來取代路徑「/src」,然而在模版語法中,「@」則是另外的用途,因此一開始先分辨清楚各自的定義,之後就能運用自...
繼上篇觀察整個專案資料夾結構之後,接著來觀察子層 components 資料夾裡的 HelloWorld.vue 和父層 views 資料夾裡的 Home.vu...
前兩篇介紹完 Vuex 的核心概念,最後當中大型專案需要組織較為複雜的資料結構時,總不可能一個 index.js 就塞滿所有資料量,這會造成取用和管理上的不便,...
目前設定的 Navbar 路由架構還算單純,並且只有單層路徑,但是當專案規模愈來愈大、功能類別拆分的愈趨詳細時,整體網站就相對需要更具層級性的規劃,此時路由架構...
在鐵人賽即將過半之際,終於要來串接 API 顯示真實的書單資料了!不過在此之前,我們應該先來了解一下 Vue.js 的生命週期。 生命週期(Lifecycle)...
DAY 5 - Vue 2 > Vue 3 破壞性改動,了解不同版本 為什麼要了解不同版本呢 ? 1. 版本間差異寫法大,只學一種不理解其中差...
承上篇從 Actions 進展到 Mutations,接下來讓 Mutations 將結果直接賦值給 State,繼續接棒完成 Vuex 狀態存取流程! Sta...
目前我們實現了即時搜尋顯示書名相符的書單資料,但是當我切換到其他路由之後又想再回到上一頁的搜尋結果,或是直接在當前路徑重新整理頁面時,搜尋欄位就被清空了,而書單...
之前有預告過,發送 API 的時機點需視不同情境及 UX 體驗規劃而定,因此除了選擇在元件內的生命週期 created 發送,另外在 Vue Router 還有...
成功渲染出 BootstrapVue Navbar 元件之後,接著來將預設樣式改成自己喜歡的專案色調和排版吧!依據文件介紹,我們可以利用修改 property...
年中才剛攻破 JavaScript 30 挑戰一天一題 JavaScript,過不久因緣際會接了一個專案需要使用框架開發,直接迫使我從 Vanilla.js 新...
上篇完成了巢狀路由的設置之後,緊接著新需求又出現了!接續會員後台的收藏紀錄頁面,我們要進一步讓收藏的書單可以被購買: 點擊收藏紀錄中的單筆書目資料時,會進入購...
目前為止,我們成功引入了 BootstrapVue 的元件 Navbar,也調整了樣式和內容。 突然發現少放了一個重要項目,於是趕緊補上一個 <b-nav...
就這樣接連 30 天順利完成鐵人賽系列了~為所有自律且成功達標的參賽者們一起喝采!!! 在產出本系列文章的同時,也再次複習了當初實作專案時面對到不熟悉的語法,在...
目前的版面配置是基本的瀑布流效果,而此模式較著重在顯示書本封面圖片,一列只能出現三本書單,RWD 的情況下又會再壓縮顯示空間,相對在瀏覽資訊上的速度會較慢,因此...
之前在 Day15 曾示範單獨在 All.vue 發送 API 取得資料後渲染至畫面上,而上篇我們接續完成其他導覽項目所需要的畫面資料時,應該會發現頁面內容的排...
前幾篇介紹了 Vuex 管理資料狀態,以及在生命週期或導航守衛發送 API 的時機點,再次回到專案範例,目前已處理好顯示導覽列中的全部書單內容,我們接續完成其他...
透過 Props 可以讓子元件接收來自父元件的「資料」,相對地,父元件則可以接收來自子元件的「事件」,雙方互相傳遞內容,最終可讓子元件變成單純處理畫面樣式的 p...