iT邦幫忙

鐵人檔案

2017 iT 邦幫忙鐵人賽
回列表
Modern Web

實作小範例入門 Vue & Vuex 2.0 系列

在這前端的三國時代,身為攻城獅,不能不知道一個新崛起的 Framework - Vue.js,因此在 30 天內運用簡單小範例來練習 Vue & Vuex 2.0 並記錄於 2017 年鐵人賽。

鐵人鍊成 | 共 30 篇文章 | 147 人訂閱 訂閱系列文 RSS系列文
DAY 11

vue & vuex 11 - 計數器 - I (vuex 職權與流程說明)

今天目標: 使用者需要一個計數器預設值是 0 有一個 + 的按鈕,按下時會幫我把現在的數值 +1 有一個 - 的按鈕,按下時會幫我把現在的數值 -1 如果...

2016-12-12 ‧ 由 Jacky 分享
DAY 12

vue & vuex 12 - 計數器 - II (action, mutation 傳遞資料)

今天目標: 希望有個可以設定數字的地方。 設定數字會對應到 + / - 按鈕上面 比如設定數字:2,按鈕顯示 +2 新增歸零按鈕,顯示歸 0 c...

2016-12-13 ‧ 由 Jacky 分享
DAY 13

vue & vuex 13 - 經典 todo list - I (create, read)

今天目標: 使用者需要一個簡單的待辦事項清單 希望有新增待辦事項的功能 先從資料開始設計 [ { key: '修改, 刪除做搜尋資料使用'...

2016-12-14 ‧ 由 Jacky 分享
DAY 14

vue & vuex 14 - 經典 todo list - II (改變狀態與 delete)

今天目標: 希望標示已經完成的待辦事項 希望未完成事項與完成的事項分開存放 事項越來越多,希望有刪除功能 getter.js 首先我會從 getter 下...

2016-12-15 ‧ 由 Jacky 分享
DAY 15

vue & vuex 15 - 經典 todo list - III (update)

今天目標: 希望可以更改 todo 內容。 覺得 update 算是 todo 裡面比較複雜的地方。 因為需要切換成有輸入框的修改模式。 todo.vue...

2016-12-16 ‧ 由 Jacky 分享
DAY 16

vue & vuex 16 - 自訂按鈕 custom checkbox ($emit, $on)

今天目標: 標示 todo 狀態的樣式,可以幫我設計一下嗎? custom checkbox 首先必須先從客製化 checkbox 樣式下手.. 有興趣可...

2016-12-17 ‧ 由 Jacky 分享
DAY 17

vue & vuex 17 - 覺得 store 有點亂,動手拆成 modules 吧!

今天目標: 自己的 store 自己整理。 目前我們所用的方法是所有 action 程式放在 actions.js 裡面。 mutations, get...

2016-12-18 ‧ 由 Jacky 分享
DAY 18

vue & vuex 18 - 開發小技巧

今天簡單介紹幾個自己常用的開發小技巧, 也希望iT邦開發者們,如果有更好的方法,可以提供出來讓大家更開心的開發 Vue ^_^ 目錄: vue-devtool...

2016-12-19 ‧ 由 Jacky 分享
DAY 19

vue & vuex 19 - Shopping cart - I (v-bind, :class, 數據驅動)

接下來兩天會實作簡單 Shopping cart 主要練習,數據驅動 UI template 使用:w3school - food blog 當作範例。 vu...

2016-12-20 ‧ 由 Jacky 分享
DAY 20

vue & vuex 20 - Shopping cart - II (購物車,推薦商品加購)

今天一樣是實作簡單 Shopping cart 主要練習,數據驅動 UI template 使用:w3school - food blog 當作範例。 vue...

2016-12-21 ‧ 由 Jacky 分享