iT邦幫忙

vue.js相關文章
共有 1664 則文章
鐵人賽 Modern Web DAY 15
Vue.js 什麼意思 系列 第 15

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

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

鐵人賽 Modern Web DAY 21

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

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

鐵人賽 自我挑戰組 DAY 30

技術 Day30 - 輕前端 綜合範例

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

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

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

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

鐵人賽 Modern Web DAY 15

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

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

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

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

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

鐵人賽 Modern Web DAY 19

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

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

鐵人賽 Modern Web DAY 28

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

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

鐵人賽 Modern Web DAY 30

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

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

鐵人賽 Modern Web DAY 20

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

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

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

技術 讓程式碼化為 API Doc

先寫 API 文件。 可以使用mockAPI的服務取得一組 user 的 API。 因應需求寫的 API 文件 GET /user response 200 {...

鐵人賽 Modern Web DAY 20

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

話說~ 從疫情到現在,已經不知道多久沒出去玩了~好想出去玩玩喔~ 從開賽到現在已經默默地來到第二十天了~以目前所學習的內容,已經可以開發一個小小 Vue...

鐵人賽 自我挑戰組 DAY 29

技術 Day29 - 輕前端 Component - jQuery UI Dialog

這個範例實作:在 Dialog 內放入表單,確認 submit 後,才關閉 Dialog。 Case01 Controller 與 Day18 一樣,不需要...

鐵人賽 Modern Web DAY 18

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

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

鐵人賽 Modern Web DAY 29

技術 [重構倒數第02天] - Slots 與 Render Functions 的進階心法

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

鐵人賽 Modern Web DAY 14

技術 [Day14] Storybook - Colors & Typography

Storybook 除了可以為元件攥寫 Story 以外,也可以攥寫純內容的說明文件,不過純內容的說明文件只能使用上一篇所介紹的 MDX 格式,所以如果還太不熟...

鐵人賽 Modern Web DAY 27

技術 Day 27:「流浪到淡水!」- 手風琴選單

嘿,今天是怎樣?都沒有人交作業,是不是昨天的太小菜一疊了! 今天是昨天的延伸,但說難也難不到哪裡去啦~ 因為相信經過前面的兩天,應該已經很清楚步驟了吧? 跟前...

鐵人賽 Modern Web DAY 19

技術 不只懂 Vue 語法:請示範如何使用 Vue 3 的 teleport?

問題回答 teleport 是 Vue 3 新增功能。teleport 就像是多啦A夢的「隨意門」一樣,只要設定了 teleport,就能夠把 DOM 內容隨意...

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

技術 Day14:14 - 購物車服務(2) - 前端 - 購物車總商品顯示、加入購物車

Përshëndetje,我是Charlie!在Day13當中我們完成了後端的購物車總商品顯示、加入購物車功能,今天我們將完成前端的部分。 ==========...

鐵人賽 自我挑戰組 DAY 28

技術 Day28 - 輕前端 Component - 多個 jQuery UI Selectmenu 連動

這篇套用並調整 Day26 的 jQuery UI Selectmenu Vue Component 來產生三個 jQuery UI Selecemenu 下拉...

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

技術 處理 API 層次感之地基篇

先重新封裝 axios 的用法。並且一開始先不打算開放使用 axios 原生功能。 希望可以讓 GET: API.GET(url, params) 其它的就照...

鐵人賽 Modern Web DAY 19

技術 [前端暴龍機,Vue2.x 進化 Vue3 ] Day19.組件練習 ref -分頁(二)

今天我們會利用上一篇的 分頁組件 範例來做更改,不過差別在於,這次我們父子組件的溝通不是透過 props & $emit 而是透過另一個方式來達成相同的...

鐵人賽 Modern Web DAY 17

技術 Day 17. 計算屬性(Computed) VS 方法(Methods)

昨天介紹了computed的基本使用方式,今天多講一點點有關methods的,大家準備好了嗎ε٩(๑> ₃ <)۶з 計算屬性緩存Computed...

鐵人賽 Modern Web DAY 28

技術 [重構倒數第03天] - One-Way Data Flow 單向資料流

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

鐵人賽 Modern Web DAY 28

技術 [30天 Vue學好學滿 DAY28] keep-alive 狀態保留

簡介 vue原生元件,可達到cache目的。使元件狀態維持不變,不重走生命週期。 新增鉤子activated: 被keep-alive涵蓋的原件重新渲染時觸發...

鐵人賽 Modern Web DAY 13

技術 [Day13] Storybook - MDX

MDX 是 Storybook 提供的另一種攥寫文件的格式,MDX 結合了 Markdown 和 JSX 的標准文件格式,使我們可以用一些 Markdown 語...

鐵人賽 Modern Web DAY 26

技術 Day 26:「按鈕博物館」- 輕鬆變化各種按鈕元件

哈囉大家好~不知道昨天的進度條做的怎麼樣? 想要交作業的人可以貼在昨天的留言區給我呦! 那我們今天的內容也很簡單,二話不說,要開始囉? 前置作業 跟昨天的環...

鐵人賽 Modern Web DAY 16

技術 Day 16. 計算屬性Computed Properties

前幾天我們介紹了如何將vue 物件中的屬性綁定到模板中,我們講到可以直接在模板中插入JavaScript 表達式來做運算,但實際上Vue不建議我們這麼做,若是簡...

鐵人賽 Modern Web DAY 18

技術 不只懂 Vue 語法:什麼是 slot?請示範 slot 的用法?

問題回答 slot(插槽)的概念是把外層的內容塞進子元件的指定位置裏。跟插槽的字面意思一樣,前提是:有插口才能插。子元件需要開一個插口(slot),才可以在外層...

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

技術 Vuex 的使用偏好

這是我個人的使用偏好,而且是以抽象資料型別的使用方式來理解 vuex 的使用方式。也許,我是說也許啦!和官網的不太一樣。 昨天介紹了物件設計的核心原則,就是...