ironman2017vue
2017 iT 邦幫忙鐵人賽，選用 Vue 這個前端框架來做為挑戰。
我將使用這份文件：前端初階練習題目 作為實作目標。
規劃：
- 第一周：Vue 與 routre 入門
- 第二周：Vuex 入門
- 第三周：Vuex 開發與 ajax
- 第四周：Vue 客製化與 routre 進階功能
使用 git checkout 切換每天範例。
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build實作小範例入門 Vue & Vuex 2.0 系列
- 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) 多語系與持續學習相關資源