【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菌做好朋友

「其他文章」