【Vue】高階系列(四)Vue模組化實戰-demo2-任務清單todoList

語言: CN / TW / HK

theme: vue-pro highlight: a11y-dark


嗨!~ 大家好,我是YK菌 🐷 ,一個微系前端 ✨,愛思考,愛總結,愛記錄,愛分享 🏹,歡迎關注我呀 😘 ~ [微訊號: yk2012yk2012,微信公眾號:ykyk2012]

「這是我參與11月更文挑戰的第25天,活動詳情檢視:2021最後一次更文挑戰

今天我們來使用Vue再做一個小demo,待辦事項小demo,之前用React也做過一樣功能的demo,可以對比學習~

專案程式碼 https://github.com/yk2012/vue_demo/tree/main/demo3_TodoList

1. 目標功能介面

在這裡插入圖片描述

2. 介面模組拆分

在這裡插入圖片描述 在這裡插入圖片描述

3. 主頁 index.html

```html

vue_demo

```

4. 靜態頁面搭建

4.1 main.js

  • 引入基礎css樣式

```javascript import Vue from 'vue'; import App from './App.vue'; import './base.css';

new Vue({ el: '#app', components: { App }, template: '' }) ```

4.2 App.vue

```html

```

4.3 TodoHeader.vue

```html

```

4.4 TodoList.vue

```html

```

4.5 TodoFooter.vue

```html

```

4.6 展示

在這裡插入圖片描述

5. 動態元件

5.1 動態顯示初始化資料

App.vue

定義資料:陣列 todos {title, complete} ```html

```

TodoList.vue

接收資料,v-for遍歷陣列 ```html

```

TodoItem.vue

得到資料,雙向繫結 ```html

```

展示

在這裡插入圖片描述

5.2 動態互動——首部新增操作

App.vue

定義新增addTodo函式 ```html

```

TodoHeader.vue

v-model雙向繫結資料 定義add滑鼠點選事件函式 1. 檢查輸入合法性 2. 根據輸入生成一個todo物件 3. 新增到todos 4. 清除輸入

```html

```

5.3 動態互動——中間刪除操作+選中變色

選中變色 滑鼠移動事件處理 改變背景顏色,圖示顯示隱藏 刪除元素操作

App.vue

deleteTodo 刪除陣列中指定元素 ```html

```

TodoList.vue

傳遞標籤,刪除函式 ```html

```

TodoItem.vue

滑鼠移動事件 函式操作背景顏色改變、圖示顯示隱藏 刪除按鈕點選事件 函式 ```html

```

5.4 動態互動——底部全選 + 刪除操作(重難點)

App.vue

```html

```

TodoFooter.vue

熟練使用計算屬性 ```html

```

總結TodoList案例

  1. 元件化編碼流程:

    1) 拆分靜態元件:元件要按照功能點拆分,命名不要與html元素衝突。

    2) 實現動態元件:考慮好資料的存放位置,資料是一個元件在用,還是一些元件在用:

    1).一個元件在用:放在元件自身即可。
    
    2). 一些元件在用:放在他們共同的父元件上(<span style="color:red">狀態提升</span>)。
    

    3) 實現互動:從繫結事件開始。

  2. props適用於:

    1) 父元件 ==> 子元件 通訊

    2) 子元件 ==> 父元件 通訊(要求父先給子一個函式)

  3. 使用v-model時要切記:v-model繫結的值不能是props傳過來的值,因為props是不可以修改的!

  4. props傳過來的若是物件型別的值,修改物件中的屬性時Vue不會報錯,但不推薦這樣做。

webStorage

  1. 儲存內容大小一般支援5MB左右(不同瀏覽器可能還不一樣)

  2. 瀏覽器端通過 Window.sessionStorage 和 Window.localStorage 屬性來實現本地儲存機制。

  3. 相關API:

    1. xxxxxStorage.setItem('key', 'value'); 該方法接受一個鍵和值作為引數,會把鍵值對新增到儲存中,如果鍵名存在,則更新其對應的值。

    2. xxxxxStorage.getItem('person'); 該方法接受一個鍵名作為引數,返回鍵名對應的值。

    3. xxxxxStorage.removeItem('key'); 該方法接受一個鍵名作為引數,並把該鍵名從儲存中刪除。

    4. xxxxxStorage.clear() 該方法會清空儲存中的所有資料。

  4. 備註:

    1. SessionStorage 儲存的內容會隨著瀏覽器視窗關閉而消失。
    2. LocalStorage 儲存的內容,需要手動清除才會消失。
    3. xxxxxStorage.getItem(xxx)如果xxx對應的value獲取不到,那麼getItem的返回值是null。
    4. JSON.parse(null)的結果依然是null。

6. 本地儲存版本

App.vue

```html

``` 專案程式碼 https://github.com/yk2012/vue_demo/tree/main/demo3_TodoList

最後,歡迎關注我的專欄,和YK菌做好朋友

「其他文章」