iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
自我挑戰組

Vue 學習筆記 - 讓你30天掌握 Vue 系列

小弟我剛踏入前端沒多久,目前剛好接觸到 Vue,所以想藉由鐵人賽讓自己更加熟練 Vue 的使用,這30天基本上我預計會介紹 Vue 的基本使用,還有 vue-cli 及 vue-router 的使用方式,是適合沒碰過甚至沒聽過 Vue 的人,對於已經是正在使用甚至很熟練的大神們鐵定是過於簡單的,不過也希望大神們如果有看到錯誤,請不要吝嗇給小弟我建議及指點,謝謝各位,期望自己能達成目標。

鐵人鍊成 | 共 31 篇文章 | 43 人訂閱 訂閱系列文 RSS系列文
DAY 20

補充: Vue-cli 2

Vue-cli 2 其實我還是比較習慣使用 vue-cli 2,所以這裡多補充一下如何使用 vue-cli 2。在官方文件中有提到,因為 vue-cli 3 和...

2018-10-20 ‧ 由 Magisheng 分享
DAY 21

Day 21 : Vue Router

Vue Router 透過 Vue Router 我們可以製作出多視圖的單頁應用程式也就是 SPA,現在先讓我們看看該怎麼使用吧! 如何使用 這邊先用 vue-...

2018-10-21 ‧ 由 Magisheng 分享
DAY 22

Day 22 : 新增路由路徑

新增路由路徑 今天要來介紹如何新增路由路徑,並且如何切換頁面,馬上就來看範例吧! src/components/Page.vue //檔案位置 <tem...

2018-10-22 ‧ 由 Magisheng 分享
DAY 23

Day 23 : 製作巢狀路由

製作巢狀路由 昨天介紹如何新增路由及路由連結,今天再來更深入一點點,就是製作巢狀路由,在切換元件的時候,如果只想切換部份內容,就可以使用巢狀路由的方式,馬上來看...

2018-10-23 ‧ 由 Magisheng 分享
DAY 24

Day 24 : 同一路徑載入多個頁面元件

同一路徑載入多個頁面元件 現在我們已經能夠靠點擊連結來切換我們想要訪問的路徑,並且利用切換頁面元件的方式達到切換頁面的效果,是不是越來越有單頁式應用程式的感覺了...

2018-10-24 ‧ 由 Magisheng 分享
DAY 25

Day 25 : 切換路由方法

切換路由方法 之前有提到切換路由的方法是使用 router-link 來切換,今天我們來介紹另一種不同的方式,這裡附上官方文件 API 參考,搭配官方文件的介紹...

2018-10-25 ‧ 由 Magisheng 分享
DAY 26

Day 26 : Vue - Axios

Vue-Axios 今天來介紹的是,該如何去介接 API,也就是使用 AJAX 取得資料,以前官方推薦的是 Vue-resource,現在則是有 Axios 取...

2018-10-26 ‧ 由 Magisheng 分享
DAY 27

Day 27 : Event Bus

Event Bus 為了接下來幾天的 Vuex,今天先來講一下什麼是 event bus,之前有說過在元件之間的溝通,父元件往內傳資料是用 props,而子元件...

2018-10-27 ‧ 由 Magisheng 分享
DAY 28

Day 28 : Vuex

Vuex 接下來要來介紹的是 Vuex,在這我先附上官方文件。 什麼是 Vuex? Vuex 可以用來管理前端網站的資料狀態,以集中式的方式管理儲存所有元件的狀...

2018-10-28 ‧ 由 Magisheng 分享
DAY 29

Day 29 : Vuex 計數器範例

Vuex 計數器範例 相信昨天介紹完了 Vuex 後還是會有很多人不知道該如何使用,今天就用實際範例來介紹 Vuex 究竟該如何使用,直接看下面的範例吧! 安裝...

2018-10-29 ‧ 由 Magisheng 分享