2017 iT 邦幫忙鐵人賽，選用 Vue 這個前端框架來做為挑戰。

我將使用這份文件：前端初階練習題目 作為實作目標。

• 第一周：Vue 與 routre 入門
• 第二周：Vuex 入門
• 第三周：Vuex 開發與 ajax
• 第四周：Vue 客製化與 routre 進階功能

使用 git checkout 切換每天範例。

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

• vue & vuex 01 - Vue Introduction & 鐵人賽說明
• vue & vuex 02 - 使用 Vue-cli 安裝 vue 和 webpack 環境與相關套件
• vue & vuex 03 - Hello World & 雙向綁定
• vue & vuex 04 - 使用 vue-router 建構 Single Page Application
• vue & vuex 05 - 攝氏轉換華氏工具 - I (computed)
• vue & vuex 06 - 攝氏轉換華氏工具 - II (v-if, v-show, methods)
• vue & vuex 07 - component - I (元件拆解，合併，靜態資料引用)
• vue & vuex 08 - component - II (v-for 小幫手解決重複元件)
• vue & vuex 09 - component - III (slot 在元件上鑽洞)
• vue & vuex 10 - 什麼是 vuex?
• vue & vuex 11 - 計數器 - I (vuex 職權與流程說明)
• vue & vuex 12 - 計數器 - II (action, mutation 傳遞資料)
• vue & vuex 13 - 經典 todo list - I (create, read)
• vue & vuex 14 - 經典 todo list - II (改變狀態與 delete)
• vue & vuex 15 - 經典 todo list - III (update)
• vue & vuex 16 - 自訂按鈕 custom checkbox ($emit, $on)
• vue & vuex 17 - 覺得 store 有點亂，動手拆成 modules 吧！
• vue & vuex 18 - vue & vuex 18 - 開發小技巧
• vue & vuex 19 - Shopping cart - I (v-bind, :class, 數據驅動)
• vue & vuex 20 - Shopping cart - II (購物車，推薦商品加購)
• vue & vuex 21 - Open Data - I (元件的生命週期、透過 ajax 取得資料)
• vue & vuex 22 - Open Data - II (高雄市 opendata、加上過場 loading 效果)
• vue & vuex 23 - Open Data - III (搜尋條件、select option、v-else、watch)
• vue & vuex 24 - Login - I (action Promise、rouetr change)
• vue & vuex 25 - Login - II (router auth、rouetr beforeEach)
• vue & vuex 26 - 使用 SCSS 管理 CSS - webpack sass-loader
• vue & vuex 27 - 進階路由顯示 - multiples views、nested routes
• vue & vuex 28 - custom Directive (toggle password)
• vue & vuex 29 - custom Filter (currency、Letter Grade、GPA、lowercase)
• vue & vuex 30 - 網站系統國際化(i18n) 多語系與持續學習相關資源

• Vue.js
• Vue-cli
• vue-loader
• guide
• Vue-router
• Vuex
• Vue-i18n