iT邦幫忙

鐵人檔案

2017 iT 邦幫忙鐵人賽
回列表
Modern Web

實作小範例入門 Vue & Vuex 2.0 系列

在這前端的三國時代,身為攻城獅,不能不知道一個新崛起的 Framework - Vue.js,因此在 30 天內運用簡單小範例來練習 Vue & Vuex 2.0 並記錄於 2017 年鐵人賽。

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

vue & vuex 21 - Open Data - I (元件的生命週期、透過 ajax 取得資料)

之前的範例,我們都是直接在 vuex 的 state 中把資料設計好, 然後練習 vuex 的流程與操作。 在專案中,資料的部分可能是向後端 server 取得...

2016-12-22 ‧ 由 Jacky 分享
DAY 22

vue & vuex 22 - Open Data - II (高雄市 opendata、加上過場 loading 效果)

open 1999 高雄市政府資料開放系統提供派工通報資料。 一次可以 get 600 筆資料, 資料內容滿豐富的,從停水停電到空氣污染等.., 主要是看到高...

2016-12-23 ‧ 由 Jacky 分享
DAY 23

vue & vuex 23 - Open Data - III (搜尋條件、select option、v-else、watch)

今天目標: 加上地區搜尋。 加上關鍵字搜尋。 HTML select option 下拉式選單 在下拉式選單中 select tag 上使用 v-mod...

2016-12-24 ‧ 由 Jacky 分享
DAY 24

vue & vuex 24 - Login - I (action Promise、rouetr change)

前面做了幾個範例,今天我們來做一個登入頁面,試試看 vue-router 轉跳頁面以及 vuex 如何驗證搭配 Promise 使用。 今天目標: 新增 l...

2016-12-25 ‧ 由 Jacky 分享
DAY 25

vue & vuex 25 - Login - II (router auth、rouetr beforeEach)

昨天我們做了一個登入頁面,可是使用者還是可以任意轉跳到其他頁面,今天我們要讓其它頁面加上驗證項目,讓登入頁面變成我們的大門。 今天目標: 設定 router...

2016-12-26 ‧ 由 Jacky 分享
DAY 26

vue & vuex 26 - 使用 SASS 管理 CSS - webpack sass-loader

今天我們將改變 CSS 引用方式,改為使用 SASS 開發,管理我們的 CSS,因此 style tag 也可以寫 SCSS 囉! 今天目標: 移除從 st...

2016-12-27 ‧ 由 Jacky 分享
DAY 27

vue & vuex 27 - 進階路由顯示 - multiples views、nested routes

今天我們將練習 vue-router 兩種進階顯示方式,多重顯示與巢狀路由,這樣的設計會讓我們的系統,搭配 router path 顯得語意化且更具結構性。 今...

2016-12-28 ‧ 由 Jacky 分享
DAY 28

vue & vuex 28 - custom Directive (toggle password)

Vue 幫我們制定許多常用的 directive 如:v-if, v-show, v-for.. 功能強大,也好奇是怎麼做到的呢?讓我們一起動手來設計自己的 d...

2016-12-29 ‧ 由 Jacky 分享
DAY 29

vue & vuex 29 - custom Filter (currency、Letter Grade、GPA、lowercase)

今天動手來實作過濾器 Filter 通常用來 format model 的格式,功能上有點類似 computed 因此我們可以利用 Filter 制定系統中常用...

2016-12-30 ‧ 由 Jacky 分享
DAY 30

vue & vuex 30 - 網站系統國際化 - 多語系(i18n)與持續學習相關資源

web 無遠弗屆可以接觸到世界各地的人們,因此網站的內容必須要準備多種語言供應不同的 user 讓大家知道我們正在解決什麼問題,所以最後一天就來看看 Vue 怎...

2016-12-31 ‧ 由 Jacky 分享