Vue(七) TodoList案例1.0

文章目录

组件化编码流程(通用)
1. 拆分静态组件
2. 初始化列表
- 展示动态数据
- 如何让一个标签动态的拥有某一个属性
3. 按回车添加todo
- 子组件给父组件传值之props
4. 勾选与取消勾选一个Todo
5. 删除
6. footer底部统计
7. footer底部交互
- 7.1 全选框自动打勾
- 7.2 全选框取消勾选
8. 清除已完成任务
总结

组件化编码流程(通用)

1、实现静态组件：抽取组件，使用组件实现静态页面效果

2、展示动态数据：

数据的类型、名称是什么
数据保存再哪个组件

3、交互–从绑定事件监听开始

如果组件名字不好起，想一下是不是组件拆分的不合理

1. 拆分静态组件

根据功能，可划分为以下几个组件：
在这里插入图片描述
将已写好页面的html，css根据组件进行拆分，得到的文件结构如下：
App组件里使用了MyHeader、MyList、MyFooter组件

MyList组件里使用了MyItem组件：

2. 初始化列表

展示动态数据

(1) 确定数据名称、数据类型
数据名称：这一堆的代办事项数据名称可以叫todos，
数据类型：最好用数组存储这一堆的待办事项，而每一个代办事项可以用对象存储。

(2) 数据保存在哪个组件:
谁用这些数据，就写在哪个组件里。后续如果有变化，再改变位置。因此暂时写在MyList组件里。
MyList.vue

<template><ul class="todo-main"><!-- 循环生成多个MyItem，且将具体的代办事项传递给MyItem,否则还是页面的列表里还是yyyy--><MyItem v-for="toboObj in todos" :key="toboObj.id" :todo="toboObj" /></ul>
</template>
<script>javascript">
...data () {return {todos: [{ id: '0001', title: '吃饭', done: true },{ id: '0002', title: '睡觉', done: true },{ id: '0003', title: '打豆豆', done: false }]}}
</script>

MyItem.vue

<template><li><label><!-- 添加checked属性，初始化复选框的数据 --><input type="checkbox" checked /><span>{{ todo.title }}</span></label><button class="btn btn-danger" style="display: none">删除</button></li>
</template><script>javascript">
export default {name: 'MyItem',// 接收MyList组件传递的对象props: ["todo"]
}
</script>

但是添加checked后，所有的复选框都被勾选了。

如何让一个标签动态的拥有某一个属性

答：v-bind动态绑定

  <input type="checkbox" :checked="todo.done" />

在这里插入图片描述

3. 按回车添加todo

输入框在Header组件中，因此Header组件中要添加点击事件

<template><div class="todo-header"><!-- v-model获取表单元素的值 --><input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keydown.enter="add"/></div>
</template>

add回调函数中要做以下几件事：

javascript">import { nanoid } from 'nanoid'
methods: {add () {// 1. 获取到表单元素的内容console.log(this.title); // 或者通过 e.target.value获取到输入框的内容// 2. 将用户的输入包装成一个todo对象const todoObj = { id: nanoid(), title: this.title, done: false }  // 3. 将todo对象添加到todo列表里，即todos数组中// 4. 输入框内容置空。this.title = '' // 或者 e.target.value = '' }
}

nanoid
包装的对象应该有一个唯一的id，uuid这个库可以生成全球唯一的编码，但是太大且生成的编码复杂。采用uuid的精简版：nanoid

安装：npm i nanoid
引用： import {nanoid} from 'nanoid'
使用: nanoid()（这是个函数，直接调用即可）
todoObj在MyHeader组件里，而数据todos在MyList组件里。两组件为兄弟组件，目前还不会兄弟组件之间通信。所以还是采用props属性。
为了方便MyHeader通信，将todos改放在App组件里，而不是MyList组件里。此时:

App可通过props将todos交给MyList组件进行展示。MyHeader该如何将todoObj交给父组件App呢？

子组件给父组件传值之props

父组件给子组件传递带参的函数

<!--App.vue-->
<template>...<!-- 给子组件传函数 --><MyHeader :addTodo="addTodo"></MyHeader><!-- 给子组件传数据 --><MyList :todos="todos"></MyList><MyFooter></MyFooter>...
</template>
<script>javascript">methods: {// 添加todoObjaddTodo (todoObj) {this.todos.unshift(todoObj)}}
}
</script>

子组件接收函数

<!--MyHeader.vue-->
<script>javascript">props: ["addTodo"],methods: {add () {//完善一下：校验数据if (!this.title.trim()) return alert('输入不能为空')const todoObj = { id: nanoid(), title: this.title, done: false }// 调用函数,通过参数将todoObj传递给父组件this.addTodo(todoObj)this.title = ''}}
}
</script>

总结：子组件向父组件传值时，父组件需提前向子组件传递一个带参的函数，子组件通过函数的参数将数据传给父组件。

捋顺一下流程：
1、按下回车，执行MyHeader里的add函数,在add里调用了App组件里的addTodo函数。
2、addTodo函数修改了App组件中data里的todos数据。
3、Vue捕获到todos变了，于是重新解析App里的template模板，重新解析时，将变化后的todos交给了MyList组件。
4、MyList收到数据，重新解析自己组件内的模板，v-for，虚拟DOM对比，更新页面。

4. 勾选与取消勾选一个Todo

在这里插入图片描述

MyItem.vue添加change事件(@click也可以)

  <input  type="checkbox"  :checked="todo.done" @change="handleCheck(todo.id)" />

handleCheck事件里需要对todos数据进行修改。数据在App组件里， 数据在哪里，操作数据的方法就在哪里，所以这里需要把待修改的todo的id传递给App。子组件给父组件传值，父组件需要先传递一个带参函数。此处应该是App传给MyList，MyList再传递给MyItem。

App.vue

<template>
...<!-- 先将函数传递给MyList --><MyList :todos="todos" :checkTodo="checkTodo"></MyList>
...
<script>javascript">// 勾选or取消勾选一个todocheckTodo (id) {this.todos.forEach((todo) => {if (todo.id === id) {todo.done = !todo.done}})}
</script>

MyList.vue

  <MyItem   v-for="toboObj in todos" :key="toboObj.id" :todo="toboObj"  :checkTodo="checkTodo" />
<script>javascript">props: ["todos", "checkTodo"]
</script>

MyItem.vue

javascript">// 接收MyList组件传递的对象
props: ["todo", "checkTodo"],methods: {handleCheck (id) {this.checkTodo(id)}
}

需要注意的是：
:checked="todo.done" ----初始化复选框
@change="handleCheck(todo.id) ----更新复选框
这两个操作可用v-model进行合并

<!-- 这行代码也能实现,但是有点儿违反原则,因为这样修改了props里数据的值,不报错是因为,todo是个对象,地址值没被修改, --> 
<input type="checkbox" v-model="todo.done" />

5. 删除

在这里插入图片描述
点击按钮，获取当前MyItem的id，根据id删除该条数据。同样的套路

添加监听事件，监听事件里调用父组件传递过来的函数。通过父组件里的这个函数对todos进行删除操作。
App.vue:

<MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"></MyList>
<script>javascript">// 删除一个tododeleteTodo (id) {this.todos = this.todos.filter((todo) => {return todo.id !== id})}
</script>

MyList.vue:

<MyItem
v-for="toboObj in todos"
:key="toboObj.id"
:todo="toboObj"
:checkTodo="checkTodo"
:deleteTodo="deleteTodo"
/>
<script>javascript">props: ["todos", "checkTodo", "deleteTodo"]
</script>

MyItem.vue:

<button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
<script>javascript">handleDelete (id) {// 弹框if (confirm('确定要删除吗?')) {// 通知App，删除对应的todothis.deleteTodo(id)}}
</script>

在这里插入图片描述

6. footer底部统计

在这里插入图片描述

<!--Footer.vue--> 
<!--使用计算属性--> 
<span>已完成{{ doneTotal }}</span> / 全部{{ total }}
<script>javascript">props: ["todos"],computed: {total () {return this.todos.length},doneTotal () {// reduce记数return this.todos.reduce((prev, cur) => {return prev + (cur.done ? 1 : 0)}, 0)// 简写// return this.todos.reduce((prev, current) => prev + (current.done ? 1 : 0))}
</script>

7. footer底部交互

这里结合6底部统计一起看

7.1 全选框自动打勾

如果代办事项全都选上，则该框自动打勾，
在这里插入图片描述

<input type="checkbox" :checked="isAll" @change="checkAll" />
<script>javascript">computed: {isAll () {// 已完成的数量是否等于todos的总数return this.doneTotal === this.total}},
</script>

但是这样有个问题：
在这里插入图片描述
改进：

javascript">isAll () {return this.doneTotal === this.total && this.total > 0
}

优化：当没有代办事项时，footer组件不应该显示
在这里插入图片描述

7.2 全选框取消勾选

方式一：添加点击事件
App组件中创建操作todos的函数并传递给子组件
在这里插入图片描述
子组件接收函数并调用

方式二：v-model
(注意此处与第4节的勾选与取消勾选一个Todo的区别)

<!-- :check = "isAll"用于初始化复选框
@change="checkAll"用来更新复选框
-->
<input type="checkbox" :checked="isAll" @change="checkAll" />
<!-- 简写为 -->
<input type="checkbox" v-model="isAll" />

由于isAll是计算属性，且v-model是双向绑定，所以当操作复选框时，对isAll的值进行了修改；
在这里插入图片描述
所以此时isAll不能采用简写形式了

javascript">isAll: {get () {return this.doneTotal === this.total && this.total > 0},set (value) {this.checkAllTodo(value)}
}

8. 清除已完成任务

在这里插入图片描述

添加点击事件
MyFooter.vue

<button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
<script>javascript">
props: ["todos", "checkAllTodo", "clearAllTodo"],
clearAll () {this.clearAllTodo()
}
</script>

App.vue

<MyFooter:todos="todos":checkAllTodo="checkAllTodo":clearAllTodo="clearAllTodo"
></MyFooter>
<script>javascript">
// 清除所有已完成的todoclearAllTodo () {this.todos = this.todos.filter((todo) => {return !todo.done})}
</script>