前端初階練習題目：

Hello 大家好：

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

記錄於 2017 iT邦幫忙鐵人賽
實作小範例入門 Vue & Vuex 2.0 系列
github 完整範例

使用 git checkout 切換每天範例。

---

use:

• Vue.js 2
• Vue-cli
• vue-loader
• guide
• Vue-router
• Vuex
• 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 拆成 3 個以上個元件，目的是練習官網上面的元件化結構

進階：

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 當作範例

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

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

進階：

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

---

G. 將 vuex 中所有 action 根據不同的練習範例拆開

ex:

• todo-action.js
  • 只存放 todo 的 action
• count-action.js
  • 只存放 count 的 action

進階：

1. 將所有練習範例 store 分開