【Day07】總複習!摻在一起做成...


NUTC imacヽ(✿゚▽゚)ノ

謝謝老師和社群的推廣💖

IoT大佬der系列文因為太忙就放棄惹,so sad (;´༎ຶД༎ຶ')


前言

Day07 終於來到最後一天啦!今天我們就來把前面六天所提到的功能做個總複習,
基本上都會用到啦>< 這是個基礎、簡單又實用的應用-Todo list!
地基打好才能蓋好房子;) 照做有問題歡迎提出討論~

GO GO GO!


安裝Vue-cli

跟昨天一樣,可以參考昨天Day06的教學
更快的安裝方法:我們不要選擇預設,在自訂這邊改成這樣
請用空白鍵去選取/取消要或不要的。

等他安裝好我們就可以開始了~


正文開始

先來做個版面,今天是簡單的應用,我們就簡單畫個代辦清單!
由輸入表單(TodoForm)和每項item(TodoList)的元件集結成的頁面

懶的開XD慢慢設計UI拉畫面,就只能有請小畫家惹

先來檢查一下等下會用到的地方~
看到store下的index.js,已經幫忙配置好了

getters要記得自己加上去

就算他幫你用好了,也要了解為什麼這麼做:
import Vuex from 'vuex' : 導入vuex,因為是外部套件要把他引進來使用
Vue.use(Vuex) : 要在Vue底下使用Vuex


main.js 這裡也幫你配置好了,Sooo sweet!


元件

根據畫出來的設計圖,我們先來創兩個元件-TodoListTodoForm

內容先空著沒關係不用著急~一步一步的來

把元件import和註冊到主畫面App.vue裡,然後使用元件!

檢查看看是不是正常,在這個專案目錄下我們npm run 專案名稱
打開頁面後應該會長這樣:

跟我們設計的版面看起來有幾分相似了!


現在來創立幾筆todo item,為了要讓這幾筆資料能夠在元件間共享,我們把他寫在state

為什麼要給他id?請複習Day03v-forkey部分!

接下來把創建出來的item渲染到TodoList上面

這裡也可以改成

那麼上面todo-listv-for要怎麼改?自己試試看囉;)


把三筆item渲染上去了,但是要在TodoList這個元件上顯示,要怎麼用呢?
我們之前說過,父傳子是用props
那麼這裡要怎麼從App.vuetodo-list標籤把stateitem傳給TodoList元件呢?

這裡請自己做做看!忘記可以戳Day04回去複習一下元件傳遞方式~


成功的話會如圖所示~


接著來做輸入表單部分,要有inputbutton才可以輸入事項!
輸入的地方要做雙向綁定,這樣才能接收到改變的值~

現在看起來有模有樣了!

那要怎麼把東西推到statetodo裡面呢?

Day04的地方有說到不能直接更改state,必須透過commit mutations

這裡直接把流程圖再畫一次,加深自己印象QQ

做出來會是這樣的~

這裡按下enter之後也可以新增項目,為什麼呢?

(提示:@keyup.enter Day01中的修飾符)


如果剛剛的新增項目能理解,那麼刪除也不難哦~(●゜▽゜●)
一樣是先dispatch action,再commit mutations!
只是刪除部分我們要怎麼做呢?

// 語法
Array.prototype.indexOf()
Array.prototype.splice()

// 範例
let index = state.todo.indexOf(todoItem)
state.todo.splice(index, 1)

indexOf() :會回傳給定元素於陣列中第一個被找到之索引,若不存在於陣列中則回傳 -1。
splice():可以藉由刪除既有元素並(/或)加入新元素來改變一個陣列的內容。

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])


代辦事項如果完成,要有什麼功能呢?

  1. 按下項目,state的done狀態變為true,這部分跟上面一樣用dispatch。
  2. done變為true後TodoList應該要劃掉:用text-decoration: line-through;
    在樣式部分,我們可以綁定class,當條件達成才用某個class,像是:
    :class="{done:todo.done}"


完成功能應該如上


最後~我們要顯示幾個項目未完成/已完成,需要getter的幫助!


↑ 這裡的getters可以怎麼改讓他更簡潔呢?請參考昨天的map~


最後完成品~作品如下↓↓

如果之後有時間會寫其他教學,原本還想做購物車車的~~~Q_Q
Vue官方網站也提供了許多範例,可以參考看看!


參加心得

在開始活動之前有先寫3、4篇草稿囤著,寫作松第一天才著手修改。
結果開學沒太多時間,文章越寫越雜亂,想到什麼就寫下去
今天的東西也是邊做邊寫,完全沒規劃TT 肚子還很餓寫完已經兩點了
到越後面就一直脫離原本預計的進度、內容(つд⊂)
回頭看Day00到現在...有一種虎頭蛇尾的感覺:(
之後寫文章會先好好規劃才動筆。

參加這次活動,讓我好好鞭策自己去動手實作。
雖然已經學過了,但有些觀念是在重新複習中才領悟到。
還有因為懶惰一直懶得看得Vuex也學習到了~其實不是很難理解~

這七天真的很累:( 寫完校閱後發現長篇大論都不想看了

謝謝閱讀文章的觀眾,辛苦您們的眼睛了 m( )m

謝謝按愛心、收藏的好人,願大大們一生平安喜樂~ε٩(๑> ₃ <)۶з


📢 參考文章

#javascript #Vue #Web #前端
學習 Vue.js 一段時間了, 會基本的語法,但做一些應用還是要看官方文件... 一邊查著一邊思考這些不是學過了嗎嗚嗚嗚 就跟剛認識的朋友一樣生疏 QQ 所以呢!! 這系列我會利用七天的時間將 Vue 重新、快速的學習! 搭配一些簡單的應用:)






Related Posts

MTR04_0924

MTR04_0924

每日心得筆記 2020-06-27(六)

每日心得筆記 2020-06-27(六)

【譯】Tokio 內部機制:從頭理解 Rust 非同步 I/O 框架

【譯】Tokio 內部機制:從頭理解 Rust 非同步 I/O 框架



Comments