iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
自我挑戰組

與Vue相遇 系列

對於JS的熱情,一直沒變。小時候拼命地使用DOM操作物件,直到框架語言的出現,改變了這個世界。
曾經也懷有一科工程師的夢,但誤打誤撞進入了金融行業。疫情的影響,使我不再當空中飛人,但也因為公司的需要,讓我重回了JS的懷抱。
曾經的它(ES6之前),還是那麼單純,與我那時的青澀相比,我倆真是天生一對。

如今,JS的改變(Vue),讓我更容易了解它的想法,就讓我娓娓道來,我們的相遇。

鐵人鍊成 | 共 30 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文
DAY 21

Day021-Vue 資料控管介紹(一)

Vue:前陣子,我們學到了組件資料的相互傳遞,包含父元件利用props傳遞資料給子元件、子元件利用$emit傳遞給父元件。然而,這些都是單向資料傳遞:對於單一請...

2020-10-05 ‧ 由 EdwardXiong 分享
DAY 22

Day022-Vuex 資料控管介紹(二)-Sate資料內容

Vue:今日首先來了解一下Vuex中的State部分:State部分來說,相當於Vue的data,專門儲存資料。我們首先可以在這邊定義資料來源,將其為我們所需要...

2020-10-06 ‧ 由 EdwardXiong 分享
DAY 23

Day023-Vuex 資料控管介紹(三)-Mutation與Actions資料運作

需要用的頁面上: import Action和 State進來 透過methods調用mapActions 透過computed調用mapState...

2020-10-07 ‧ 由 EdwardXiong 分享
DAY 24

Day024-Vuex 資料控管介紹(四)-Getters改變資料內容

Vue:資料改變,除了利用method或computed,還有getter。 Getter好處是當資料集中管理,部分組件或元件需要用到不同資料下,可提供相對應的...

2020-10-08 ‧ 由 EdwardXiong 分享
DAY 25

Day025-透過Vuex-實作簡易部落格

Vue:接下來透過幾天,我們將把之前學的router、Vuex等,實現在這個專案上面。由上圖首頁,除了基本路由設定(首頁和文章),將會以組件方式生成文章列表:文...

2020-10-09 ‧ 由 EdwardXiong 分享
DAY 26

Day026-透過Vuex-實作簡易部落格-新增文章

Vue:文章為本專案的共用資料。當許多頁面都需要用到時,這個時候使用Vuex就是最佳時機。下圖,可以看到,在其中一個元件下(Add-Article元件)新增文章...

2020-10-10 ‧ 由 EdwardXiong 分享
DAY 27

Day027-透過Vuex-實作簡易部落格-列舉及刪除文章

Vue:昨日,我們已將文章新增實做出來了!現在只要將文章列舉在首頁,只需要使用之前學到的v-for迴圈,即可完成!透過 v-for,將vuex中state的ar...

2020-10-11 ‧ 由 EdwardXiong 分享
DAY 28

Day028-透過Vuex-實作簡易部落格-修改文章

Vue:實做部落格最後一步驟,就是修改文章!上一篇已經了解如何將id生成,如此才可以做個別文章上的操作。原先,在Article頁面上,我們可以加上一個標示,讓文...

2020-10-12 ‧ 由 EdwardXiong 分享
DAY 29

Day029-透過Vuex-實作簡易部落格-打包你的專案吧!

Vue:還記得第10天時,我們才剛認識Vue CLI,但你還記得我的介面嗎? 接著,我們試試看這個指令: npm run build 如此,產生的資料即打包嚕...

2020-10-13 ‧ 由 EdwardXiong 分享
DAY 30

Day030-與Vue相遇--鐵人賽回顧

回顧30天,也讓我回憶了今年從金融業被抓去做開發工程師的日子。這30天中,講述了Vue的基本介紹、性能比較,也依據Vue的特性, 實作出許多app。 當然,雖...

2020-10-14 ‧ 由 EdwardXiong 分享