Try   HackMD

前端初階練習題目：

Hello 大家好：

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

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

使用 git checkout 切換每天範例。

use:

練習題目：

以下功能將使用 router 切換
ex:

  • /count
  • /todo

A. 計數器

  1. 原始狀態: 0
  2. + 按鈕，按了會讓數字 +1
  3. - 按鈕，按了會讓數字 -1

進階：

  1. 有個 input 可以輸入數字
  2. input 的數字會對應到 + / - 按鈕上面
    比如輸入：2, 按鈕變成 +2
  3. 新增乘法按鈕，將目前數字成上設定數字
  4. 新增歸零按鈕，回復 0

超進階：

  1. 試試看實作『計算機』吧 !!

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 分開
Last changed by 
 
Jasper
0
2
15415
Published on HackMD