# 前端初階練習題目：

Hello 大家好：

前端技術不斷演進從 Angular, React 到最近的 Vue
分享一些每次學習新的前端技術時，給自己練習的小題目：

記錄於 2017 iT邦幫忙鐵人賽
[實作小範例入門 Vue & Vuex 2.0 系列](http://ithelp.ithome.com.tw/users/20103326/ironman/1114)
[github 完整範例](https://github.com/hungjie19/ironman2017vue)
> 使用 git checkout 切換每天範例。

---

## use:
- [Vue.js 2](https://vuejs.org/)
- [Vue-cli](https://github.com/vuejs/vue-cli)
- [vue-loader](http://vuejs.github.io/vue-loader)
- [guide](http://vuejs-templates.github.io/webpack/)
- [Vue-router](https://router.vuejs.org/)
- [Vuex](https://vuex.vuejs.org/)
- [Vue-i18n](https://github.com/kazupon/vue-i18n)

## 練習題目：
以下功能將使用 router 切換
ex:
- /count
- /todo

---

### A. 計數器

1. 原始狀態: 0
2. `+` 按鈕，按了會讓數字 +1
3. `-` 按鈕，按了會讓數字 -1
#### 進階：
4. 有個 `input` 可以輸入數字
5. input 的數字會對應到 + / - 按鈕上面
比如輸入：2, 按鈕變成 +2
6. 新增乘法按鈕，將目前數字成上設定數字
7. 新增歸零按鈕，回復 `0`
#### 超進階：
8. 試試看實作『計算機』吧 !!

---

### B. 經典 Todo List

1. 可以讀取 Todo List
2. 有個 input 可以輸入新的 todo
3. 可以修改 todo
4. 可以刪除 todo
5. 顯示已做完的 todo
6. 顯示未做完的 todo

---

### C. component 練習拆解
請將此頁 [template](http://getbootstrap.com/examples/jumbotron/) 拆成 3 個以上個元件，[目的是練習官網上面的元件化結構](https://cn.vuejs.org/v2/guide/#用组件构建（应用）)

#### 進階：
1. 將元件裡面的重複元件拆解出去
2. 將重複元件使用 JSON 資料帶入 rendor 出來
3. 假設一些可能的功能擴充規劃，如：
- nav 多 link 怎麼做
- 下方介紹卡片 3 個變成 6 個要怎麼做

---

### D. 介接 API 登入頁實作
1. 登入畫面有：帳號/密碼 `input` 輸入
2. 登入後切換頁面顯示 succress response 之資訊

---

### E. login Router 驗證
1. 判斷是否有登入過，如果沒有導向 login 頁面
2. 登入後使用者才可以看到之前做的小範例
3. 新增 404 頁面，不須登入就可以看
4. 使用者如果手動輸入的 url 不在路由表內，導向特定頁面
- ex: /login

---

### F. 練習一個 shopping cart 簡單範例
[可以利用此 w3school template - food blog 當作範例](http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_food_blog&stacked=h)

資料列表示意：
{
    product: String,
    image: String,
    left: Number,
    price: Number
}

1. 商品列表：
1. 規劃 3~6 個產品，顯示價錢，剩餘數量
1. 下方一個購物車按鈕，點了加入購物車
1. 售完的產品不能再加入購物車
2. 購物車列表：
1. 產品列表下方顯示購物車內容，新增的產品會顯示在下方
2. 統計購物車內產品總價錢

#### 進階：
1. 商品列表：
1. 剩餘最後一項的產品，顯示不同顏色按鈕
1. 將刪除的產品數量回復到產品列中
1. 售完的產品照片顏色變成灰階
2. 購物車列表：
1. 新增刪除按鈕將產品從購物車移除

---

### G. 將 vuex 中所有 action 根據不同的練習範例拆開
ex:
- todo-action.js
- 只存放 todo 的 action
- count-action.js
- 只存放 count 的 action

#### 進階：
1. 將所有練習範例 store 分開