iT邦幫忙

vue2相關文章
共有 29 則文章
鐵人賽 Modern Web DAY 30
Vue.js 什麼意思 系列 第 30

技術 Day 30:Keep Going 的意思

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

鐵人賽 Modern Web DAY 29
Vue.js 什麼意思 系列 第 29

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

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

鐵人賽 Modern Web DAY 28
Vue.js 什麼意思 系列 第 28

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

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

鐵人賽 Modern Web DAY 27
Vue.js 什麼意思 系列 第 27

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

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

鐵人賽 Modern Web DAY 26
Vue.js 什麼意思 系列 第 26

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

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

鐵人賽 Modern Web DAY 25
Vue.js 什麼意思 系列 第 25

技術 Day 25:從頭開始的 Scroll Behavior

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

鐵人賽 Modern Web DAY 24
Vue.js 什麼意思 系列 第 24

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

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

鐵人賽 Modern Web DAY 23
Vue.js 什麼意思 系列 第 23

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

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

鐵人賽 Modern Web DAY 22
Vue.js 什麼意思 系列 第 22

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

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

鐵人賽 Modern Web DAY 21
Vue.js 什麼意思 系列 第 21

技術 Day 21:總匯複習-Vuex、Route

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

鐵人賽 Modern Web DAY 20
Vue.js 什麼意思 系列 第 20

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

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

鐵人賽 Modern Web DAY 19
Vue.js 什麼意思 系列 第 19

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

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

鐵人賽 Modern Web DAY 18
Vue.js 什麼意思 系列 第 18

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

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

鐵人賽 Modern Web DAY 17
Vue.js 什麼意思 系列 第 17

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

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

鐵人賽 Modern Web DAY 16
Vue.js 什麼意思 系列 第 16

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

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

鐵人賽 Modern Web DAY 15
Vue.js 什麼意思 系列 第 15

技術 Day 15:在生命週期呼喊 API

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

鐵人賽 Modern Web DAY 14
Vue.js 什麼意思 系列 第 14

技術 Day 14:動態 Route 對號入座

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

鐵人賽 Modern Web DAY 13
Vue.js 什麼意思 系列 第 13

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

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

鐵人賽 Modern Web DAY 12
Vue.js 什麼意思 系列 第 12

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

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

鐵人賽 Modern Web DAY 11
Vue.js 什麼意思 系列 第 11

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

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

鐵人賽 Modern Web DAY 10
Vue.js 什麼意思 系列 第 10

技術 Day 10:v-for 註定綁個 key

承上篇,談到 v-for,就要說說它的最佳良伴——key。 v-for 必須綁定代表唯一值的 key 若未綁定 key 值,Terminal 會直接報錯,表示「...

鐵人賽 Modern Web DAY 9
Vue.js 什麼意思 系列 第 9

技術 Day 09:遍歷資料好便利-v-for

目前為止,我們成功引入了 BootstrapVue 的元件 Navbar,也調整了樣式和內容。 突然發現少放了一個重要項目,於是趕緊補上一個 <b-na...

鐵人賽 Modern Web DAY 8
Vue.js 什麼意思 系列 第 8

技術 Day 08:深仍可測的元件樣式-Deep Selectors

成功渲染出 BootstrapVue Navbar 元件之後,接著來將預設樣式改成自己喜歡的專案色調和排版吧!依據文件介紹,我們可以利用修改 property...

鐵人賽 Modern Web DAY 7
Vue.js 什麼意思 系列 第 7

技術 Day 07:大人更要懂選擇-BootstrapVue 部分引入

上篇透過簡單的 vue add 指令就完成了 BootstrapVue 安裝和引入,其引入 bootstrap-vue plugin 的方式其實是備妥所有 Bo...

鐵人賽 Modern Web DAY 6
Vue.js 什麼意思 系列 第 6

技術 Day 06:小孩子才做選擇-BootstrapVue 全部引入

本篇開始終於要進入解決需求的前置作業了!首先需要讓網站有個基本的置頂導覽列,讓我們有請 BootstrapVue 出場~直接交給 BootstrapVue 幫你...

鐵人賽 Modern Web DAY 5
Vue.js 什麼意思 系列 第 5

技術 Day 05:簡寫好用一直用-v-on、v-bind

延續上篇最後提到 Webpack 設置了別名「@」來取代路徑「/src」,然而在模版語法中,「@」則是另外的用途,因此一開始先分辨清楚各自的定義,之後就能運用自...

鐵人賽 Modern Web DAY 4
Vue.js 什麼意思 系列 第 4

技術 Day 04:.vue 檔三層櫃

繼上篇觀察整個專案資料夾結構之後,接著來觀察子層 components 資料夾裡的 HelloWorld.vue 和父層 views 資料夾裡的 Home.vu...

鐵人賽 Modern Web DAY 3
Vue.js 什麼意思 系列 第 3

技術 Day 03:觀察資料夾

建好專案之後,來看看專案裡已經幫你準備好哪些檔案吧!先大致認識每個資料夾如何分門別類的規則,日後自己在歸檔時也會相對有概念,更方便管理檔案、組織架構。 根目錄...

鐵人賽 Modern Web DAY 1
Vue.js 什麼意思 系列 第 1

技術 Day 01:新手視角

年中才剛攻破 JavaScript 30 挑戰一天一題 JavaScript,過不久因緣際會接了一個專案需要使用框架開發,直接迫使我從 Vanilla.js 新...