iT邦幫忙

vue.js相關文章
共有 1414 則文章
鐵人賽 Modern Web DAY 18
Vue.js 進階心法 系列 第 18

技術 用兩支 API 實作新增資料與上傳檔案

實作新增資料與上傳檔案有兩種做法 開一支 API 處理新增使用者,設定成 multipart/form-data 就可以同時上傳檔案和使用者資料。 開一支上傳...

鐵人賽 Modern Web DAY 21

技術 Day 21. 條件渲染 – v-if、v-show

今天來講條件渲染(Conditional Rendering),也就是可以依照條件變化改變渲染元素的 Directives,會舉例讓大家知道v-if跟v-sho...

鐵人賽 Modern Web DAY 18

技術 [Day18] Vue 3 單元測試 (Unit Testing) - Conditional rendering & Elements visibility

Conditional Rendering 在寫元件時最常見的就是會使用 v-if 來動態插入和刪除元素,我們馬上來看看下面的範例程式。 const Compo...

鐵人賽 Modern Web

技術 Day 31:「不夠吃了...哪裡還有紅蘿蔔?」- Tailwind 和 Vue 的資源分享

大家有體會到自己建立元件的樂趣嗎? 如果沒有也沒關係~因為接下來會分享一些相關資源哦! 其實兔兔知道的資源並不是很多啦,因為兔兔的東西都會自己重造輪子 XD 不...

鐵人賽 Modern Web DAY 23

技術 [前端暴龍機,Vue2.x 進化 Vue3 ] Day23.正式進化-Vue3 起手式

ゴキゲンな蝶になってきらめく風に乗って今すぐキミに会いに行こう余計な事なんて忘れた方がマシさ .... Vue2.x 進化 回憶起當時的數碼寶貝經典...

鐵人賽 Modern Web DAY 23

技術 不只懂 Vue 語法:試解釋遞迴元件的用法?

問題回答 遞迴元件是指同一個元件裏不斷引用自己,造成重複一層元件包著一層元件的情況,直至該元件所渲染的資料沒有滿足你設定的 v-if 資料,就代表此遞迴結束,不...

鐵人賽 Modern Web DAY 18
30天肝出購物網站 系列 第 18

技術 Day18:18 - 結帳服務(2) - 前端 - 結帳、訂單新增、結帳成功畫面

Hei,我是Charlie! 在Day17當中,我們完成了後端的結帳功能,在今天我們將完成前端的結帳功能跟結帳成功頁面。 ===================...

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

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

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

鐵人賽 Modern Web DAY 17
Vue.js 進階心法 系列 第 17

技術 actions 就是 Vuex 裡「共用的 method」

有時候,需要 CRUD 以外的行為,後端有時會開專屬的 API,有時候不會。有時候在使用 API 時,前端也有一些「一定會一起執行的事」。 那麼,這些「雜項」就...

鐵人賽 Modern Web DAY 20

技術 Day 20. v-bind - Style的綁定

昨天講了class的綁定,今天換來講style (ノ◕ヮ◕)ノ*:・゚✧ 綁定Style v-bind:style綁定的方式跟昨天的class很像。Style...

鐵人賽 Modern Web DAY 17

技術 [Day17] Vue 3 單元測試 (Unit Testing) - Vue Test Utils + Jest 基本範例 & 核心語法

在開始進入複雜的內容之前,我想先帶大家認識幾個會大量出現在每一個測試程式碼裡的核心語法,這些語法如果不了解的話可能就沒辦法看懂之後的測試程式碼,所以我們趕快開始...

鐵人賽 Modern Web DAY 30

技術 Day 30:「很刺眼,這樣太亮了啦!」- 深色模式切換開關

「最近眼睛都一直盯著電腦,超痠的」「而且這台螢幕還壞掉,不能調整亮度」 這樣啊 ... 辛苦了,不過可以不用調亮度啊,把主題換成深色主題就好了! 「深色主題?...

鐵人賽 Modern Web DAY 22

技術 不只懂 Vue 語法:為何 v-for 的 key 必須是唯一值?v-for 與 v-if 能否同時使用?

問題回答 v-for 的 key 必須是唯一值,才可以讓 Vue 在更新 v-for 所產生的列表時,能準確更新節點。相反,如果使用 index 作為 key,...

鐵人賽 Modern Web DAY 16
Vue.js 進階心法 系列 第 16

技術 getters 就是欲望

用 getters 抽象 state 整個系列寫得太嚴肅了,這次在標題上小小的中二一下。 vuex 的 getters 用來展現欲望,展現想要使用資料的樣子...

鐵人賽 Modern Web DAY 22

技術 [前端暴龍機,Vue2.x 進化 Vue3 ] Day22. Vue 旅遊小幫手(完成)

終於來到 Vue2.x 介紹的尾聲了,藉由完成今天自己的旅遊小幫手範例一起收尾吧,GO~ 加入 YouBike 的訊息進去 1. 根據選擇地區篩選 YouBik...

鐵人賽 Modern Web DAY 19

技術 Day 19. v-bind - Class的綁定

在Vue中,如果我們需要綁定屬性就可以用到v-bind,是不是有對這個指令有印象啊,我們在Day 14的時候有大略提到,這幾天再來特別介紹v-bind用在cla...

鐵人賽 Modern Web DAY 16

技術 [Day16] Vue 3 單元測試 (Unit Testing) - Vue Test Utils + Jest 基本介紹 & 安裝

什麼是單元測試? 單元測試 (Unit Testing) 是針對程式碼的最小單位來進行正確性檢驗的測試工作,並確保程式碼不會在迭代維護的過程中出現 Bug,通過...

鐵人賽 Modern Web DAY 29

技術 Day 29:「欸!你填一下這張表!」- 彈跳視窗、Modal

「注意,您的表單尚未填寫完成」 好,我知道了。 (按下確定) 欸? 為什麼關不掉!?不是按下確定就要關掉了嗎? 這是誰做的爛東西啊,看我怎麼整死你!   (開...

鐵人賽 Modern Web DAY 30

技術 [30天 Vue學好學滿 DAY30] 總結 & 完賽感言

最後一篇文,擠出了一些覺得在開發上容易踩的雷以及要注意的事情 要使用、渲染的變數除了傳遞進入元件的,都需定義於data HTML中不需使用 this...

鐵人賽 Modern Web DAY 21

技術 不只懂 Vue 語法:試說明 computed 的 get 與 set 運作機制?

問題回答 computed 有 getter(取值) 和 setter (寫入值)可使用,但預設只會有 getter 使用,因此 computed 預設是唯讀,...

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

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

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

鐵人賽 自我挑戰組 DAY 30

技術 Day30 - 輕前端 綜合範例

Case01 這個範例綜合了之前提到所有的部份 ! 就是把項目的 CRUD 都放在同一個頁面 ! Controller View Case01 _...

鐵人賽 Modern Web DAY 21

技術 [前端暴龍機,Vue2.x 進化 Vue3 ] Day21. 『小專題◕ᴥ◕』 Vue 旅遊小幫手(二)

今天繼續來增加功能,並再取得另一批資料來使用 目標四,再加入旅館 API 有了景點,再來解決住的部份,所以我們再繼續加入另一支 API ,取得旅館的訊息高雄市一...

鐵人賽 Modern Web DAY 16
30天肝出購物網站 系列 第 16

技術 Day16:16 - 購物車服務(4) - 前端 - 購物車數量增減、刪除

হ্যালো,我是Charlie!在Day15當中我們完成了後端的購物車數量增減跟刪除,而今天我們將完成前端的購物車數量增減跟刪除。 =============...

鐵人賽 Modern Web DAY 30

技術 [重構倒數第01天] - Vue的表單自動暫存

前言 該系列是為了讓看過Vue官方文件或學過Vue但是卻不知道怎麼下手去重構現在有的網站而去規畫的系列文章,在這邊整理了許多我自己使用Vue重構很多網站的經驗...

鐵人賽 Modern Web DAY 15

技術 [Day15] Storybook - Publish Storybook (Static web application & Chromatic)

我們透過前幾天介紹的所有內容 Storybook - 基本介紹 & 安裝 Storybook - What's a story and how...

鐵人賽 Modern Web DAY 18

技術 Day 18. 計算屬性(Computed) VS 偵聽屬性(Watched Property)

昨天拿computed跟methods做比較,今天換來跟watch比比看過五關斬六將ヾ(´︶`*)ノ♬ Watchers 偵聽器 大部分情況可以用compute...

鐵人賽 Modern Web DAY 15
Vue.js 進階心法 系列 第 15

技術 不要在 mutation 加工 API 回來的資料

mutation當作 state 的 setter 使用。要符合 setter 的使命,擋掉錯誤格式。 在 GET 和 POST 格式差很多時。可以在 mut...

鐵人賽 Modern Web DAY 28

技術 Day 28:「今天幾月幾號啊?」- 簡易日曆

「今天是幾月幾號啊?」 今天是 ... 等等!不准看電腦上的! 你先等我造出一個,我們要看日期 ... 就看我們自己做的日曆! (這兔是有什麼毛病,連這個時候...

鐵人賽 Modern Web DAY 20

技術 不只懂 Vue 語法:試解釋 computed、watch 與 methods 的差異?

問題回答 簡短答法:computed 最大特點是必須回傳一個值,並且會把它緩存起來,當函式裏的依賴改變時,才會重新執行和求值。但 watch 與 methods...