iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

Vue.js 什麼意思 系列

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

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

Day 21:總匯複習-Vuex、Route

前幾篇介紹了 Vuex 管理資料狀態,以及在生命週期或導航守衛發送 API 的時機點,再次回到專案範例,目前已處理好顯示導覽列中的全部書單內容,我們接續完成其他...

2021-10-06 ‧ 由 Teen 分享
DAY 22

Day 22:兒子乖聽爸的話-Props 傳入資料

之前在 Day15 曾示範單獨在 All.vue 發送 API 取得資料後渲染至畫面上,而上篇我們接續完成其他導覽項目所需要的畫面資料時,應該會發現頁面內容的排...

2021-10-07 ‧ 由 Teen 分享
DAY 23

Day 23:兒子有事交給爸-$emit 傳出事件

透過 Props 可以讓子元件接收來自父元件的「資料」,相對地,父元件則可以接收來自子元件的「事件」,雙方互相傳遞內容,最終可讓子元件變成單純處理畫面樣式的 p...

2021-10-08 ‧ 由 Teen 分享
DAY 24

Day 24:路由搜查隊-route.query

目前我們實現了即時搜尋顯示書名相符的書單資料,但是當我切換到其他路由之後又想再回到上一頁的搜尋結果,或是直接在當前路徑重新整理頁面時,搜尋欄位就被清空了,而書單...

2021-10-09 ‧ 由 Teen 分享
DAY 25

Day 25:從頭開始的 Scroll Behavior

目前導覽項目頁面愈來愈完整,相對有愈來愈多小細節需要留意,尤其是資料量變多時,許多瀏覽時伴隨的滾動效果多少會影響使用者體驗,因此除了顧及版面資料和操作功能,UX...

2021-10-10 ‧ 由 Teen 分享
DAY 26

Day 26:v-if 才做選擇,v-show 全都秀

目前的版面配置是基本的瀑布流效果,而此模式較著重在顯示書本封面圖片,一列只能出現三本書單,RWD 的情況下又會再壓縮顯示空間,相對在瀏覽資訊上的速度會較慢,因此...

2021-10-11 ‧ 由 Teen 分享
DAY 27

Day 27:語系包在 i 身上-Vue I18n 前置作業

因應國際化的需求,專案決定也要符合 international 的規格,Navbar 右上角的「選擇語系」功能總算要開工了!話不多說,直接介紹接下來要安裝的 p...

2021-10-12 ‧ 由 Teen 分享
DAY 28

Day 28:順手挖洞給 i 跳-vue-i18n

基本上設置多國語系算是相對簡單的事情,只要在 <template> 中有使用模板語法的位置,加上 $t() 放入變數即可。因此可以的話,會建議在專案...

2021-10-13 ‧ 由 Teen 分享
DAY 29

Day 29:神奇語法糖-v-model

整個系列都快要完結篇了,怎麼可能獨漏 Vue 的神奇語法糖—— v-model 呢?我們已經知道 Vue 基於 MVVM 架構模式,最大的特色就是可以將資料與...

2021-10-14 ‧ 由 Teen 分享
DAY 30

Day 30:Keep Going 的意思

就這樣接連 30 天順利完成鐵人賽系列了~ 為所有自律且成功達標的參賽者們一起喝采!!! 在產出本系列文章的同時,也再次複習了當初實作專案時面對到不熟悉的語法,...

2021-10-15 ‧ 由 Teen 分享