前言
使用vue组件化编码，实现代办事项功能。
在顶部输入框输入功能，按下回车确认后，在下方添加一个事项，事项有一个勾选框，代表该事项是否完成，若完成可以删除，在下方有一个统计事件整体情况，源码放在最后。
开发一个前端模块可以概括为以下几个步骤：
写静态页面；
拆分为静态组件（框架，样式，图片）；
发请求（API）获取服务器的动态展示；
完成相应的动态业务逻辑。
实现静态组件
按照功能点抽取组件，使用组件实现静态效果
在src/compornents文件夹下创建四个组件文件，在name属性中定义组件名（避开原生标签名），VUE推荐我们使用多单词组成文件名。
组件name属性的作用：
开发者工具VueDevtools可以看见组件名字；
注册全局组件的时候可以通过组件实例获取组件名字
在父组件中用import语句声明组件，在各个组件中的template标签写出文档结构，如果做渐进增强，剪切走原生HTML时要留下组件标签，以防遗忘
在style标签中写出样式，如果不是全局样式添加scoped属性来保证不会污染全局，父级组件如果有全局共享的样式就不可加scoped属性，比如会在APP组件里面存放全局风格统一的按钮样式
非路由组件使用的四步：定义（编写组件文件）；引入（impact语句）；注册（在components对象中暴露）；使用（在模板标签中插入组件）。
初始化列表展示动态数据
将代办事项全部存储在一个数组中，每一件代办事项存储为一个对象，对象中设置三个属性{id，代办事项名，完成状态}，因为所有组件都要使用该数组，所以把该数组放在APP组件中声明（状态提升），在MyList标签中用属性绑定将该数组传给MyList组件，在MyList组件中用props接收该数组，在MyItem标签中用v-for指令遍历数组展示。
在Myltem标签中用属性绑定每个对象分别传入，在MyItem组件中用props接受对象，用插值语法显示对象的代办事项名。（尽量用复制粘贴来写传输对象，以防写错😀）
在MyLtem组件中的input标签 checked绑定事件完成状态todo.done
我在此处写了一个bugchecked的值确实为false但是勾选框是选中状态
在我发现勾选框状态不对时，我打印了todo.done的值发现确实是false,我就去开发者工具中看发现值确实没问题，我犯了一个错误我只考虑了打印出的结果，我没有考虑数据类型
显示todo.done的值
我调整了checked的属性绑定，我写了一个表达式todo.done==true ，发现我在定义对象给done属性赋值时手残加了引号😀
edbug不止要检查属性值还要检查数据类型typefo
实现添加代办事项功能
有多个组件公用的数据，放在他们共同的父组件上
在APP组件的methds实例中定义一个添加事项的方法addTodo(todoObjs)在该方法中用unshift在数组前端添加对象。
父组件给子组件传参，用props传一个值；子组件给父组件传参，用props传一个函数，在子组件调用这个函数并把值传给他
将方法绑定给MyHeader标签，MyHeader组件中props接受addTodo方法。
MyHeader组件中在data实例中定义一个空字符型title变量，在input标签中双向数据绑定。
在methods实例中定义一个todoObj对象作为接受输入的代办事项名，调用addTodo将接受输入代办事项名的对象添加到数组。
id可以用nanoid来动态赋予。
在input标签事件绑定add方法
实现勾选代办事项功能
在MyItem组件methods实例中定义handleCheck方法，接受该id，将其传给APP组件中负责修改done属性的checkTodo方法。
将handleBheck事件绑定到input标签
在APP组件methods实例中定义一个方法CheckTodo(id),用forEach方法遍历数组，用if查找对应id的对象更新
实现删除代办事项
在MyItem组件methods实例中定义handleDelete方法，接受该id，将其传给APP组件中散出选中事项的deleteTodo方法。
将handleBheck事件绑定到input标签。
在APP组件methods实例中定义deleteTodo方法，接受该id；用filter方法筛选数组，用布尔运算选出要删除的对象删除。
实现代办事项的底部统计功能
- 事件总数统计
在MyFooter组件computed实例中定义total方法，利用todos的length属性输出返回值，在span标签中用插值语法插入total。 - 已完成事件统计
在MyFooter组件computed实例中定义total方法，用reduce方法累加todo.done，用三目运算符将done转化为1和0。
实现底部交互功能
- 全选勾选框
在MyFooter组件input标签中双向数据绑定isAll方法，在computed实例中声明isAll方法
用get上传勾选状态，用总数和和已完成来判断。
用set获取勾选状态传给checkAllTodo方法。
在App组件methods实例中定义checkAllTodo方法，通过forEach方法遍历，将todo.done的状态设置为MyFooter组件input标签的状态。 - 清除已完成代办事件
在MyFooter组件button标签中绑定事件clearAll，在clearAll方法中绑定clearAllTodo方法。
在app组件methods实例定义clearAllTodo方法，用filter方法赛选todos，返回done值为假false放回数组。
全局事件总线优化事项的勾选功能和删除功能
ue3从实例中移除了$on、$off 和$once 方法，所以我们如果希望继续使用全局事件总线，要通过第三方的库：
Vue3官方有推荐一些库，例如 mitt
源码
- APP
<template>
<div>
<div class="todo-container">
<div>
<MyHeader :addTodo="addTodo"></MyHeader>
<MyList
:todos="todos"
:checkTodo="checkTodo"
:deleteTodo="deleteTodo"
></MyList>
<MyFooter
:todos="todos"
:checkAllTodo="checkAllTodo"
:clearAllTodo="clearAllTodo"
></MyFooter>
</div>
</div>
</div>
</template>
<script>
import MyHeader from './components/MyHeader.vue'
import MyFooter from './components/MyFooter.vue'
import MyList from './components/MyList.vue'
export default {
name: 'App',
components: {MyHeader , MyFooter,MyList},
data(){
return {
todos : [
{id:'1',title:'headlock',done:true},
{id:'2',title:'loglock',done:true},
{id:'3',title:'butterflysweep',done:true}
]
}
},
methods:{
//添加todo
addTodo(todoObj){
this.todos.unshift(todoObj)
},
//勾选取消一个todo
checkTodo(id){
this.todos.forEach((todo)=>{
if(todo.id===id)todo.done=!todo.done
})
},
//找出被删除的对象删除
deleteTodo(id){
this.todos=this.todos.filter(todo=>todo.id!==id)
},
//全选和取消全选
checkAllTodo(done){
this.todos.forEach((todo)=>{
todo.done=done
})
},
//清除已完成的todo
clearAllTodo(){
this.todos=this.todos.filter((todo)=>{
console.log(todo.done)
return !todo.done
})
}
}
}
</script>
<style>
bodoy{
background-color: #fff;
}
.btn{
display:inline-block;
padding:4px 12px;
font-size:114px;
}
.todo-container{
width:600px;
margin:0 auto;
}
</style>
- MyHeader
<template>
<div class="todo-Header">
<input
type="text"
placeholder="请输入任务名"
v-model="title"
@keyup.enter="add"
/>
</div>
</template>
<script>
export default {
name:'MyHeader',
//接收APP传递的addTodo
props:['addTodo'],
data() {
return {
title:''
};
},
methods:{
add(){
//打报用户输入
const todoObj={
id:'1',//ID还未调整成为每个不同的
title:this.title,
done:false
}
//通知APP组件添加一个todo对象
this.addTodo(todoObj)
},
}
}
</script>
<style scoped>
.todo-Header input {
width:560px;
height:28px;
border-radius:4px;
border:1px solid #ccc;
padding:4px 7px;
}
</style>
- Mylist
<template>
<ul class="todo-main">
<MyItem
v-for="todoObj in todos"
:key="todoObj.id"
:todo="todoObj"
:checkTodo="checkTodo"
:deleteTodo="deleteTodo"
/>
</ul>
</template>
<script>
import MyItem from './MyItem.vue'
export default {
name:'MyList',
components:{MyItem},
props:['todos','checkTodo','deleteTodo'],
methods:{
}
};
</script>
<style scoped>
.todo-main{
margin-left: 0px;
border:1px solid #ddd;
border-radius:2px;
padding:0px;
}
</style>
- MyItem
<template>
<li>
<label>
<input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
<span>{{todo.title}}</span>
<button class="btn-danger" @click="handleDelete(todo.id)">删除</button>
</label>
</li>
</template>
<script>
export default {
name:'MyItem',
props:['todo','checkTodo','deleteTodo'],
methods:{
handleCheck(id){
this.checkTodo(id)//通知对应的todo.done取反
},
handleDelete(id){
this.deleteTodo(id)
}
}
};
</script>
<style scoped>
li {
list-style: none;
height:36px;
padding: 0 5px;
border-bottom: 1px solid rgb(85, 10, 214);
}
li label{
float:left;
cursor:pointer;
}
li button{
float:right;
display:none;
}
li:hover{
background-color: rgb(159, 183, 238);
}
li:hover button{
display:block;
}
</style>
- MyFooter
<template>
<div class="todo-footer" v-show="total">
<label>
<input type="checkbox" v-model="isAll"/>
</label>
<span>
<span>已完成{{doneTotal}}</span>全部{{total}}
</span>
<button class="btn-danger" @click="clearAll">清除已完成项目</button>
</div>
</template>
<script>
export default {
name:'MyFooter',
props:['todos','checkAllTodo','clearAllTodo'],
computed: {
//总数
total(){
return this.todos.length
},
//已完成
doneTotal(){
return this.todos.reduce((pre,todo)=> pre+todo.done ,0)
},
// 控制全部选框
isAll:{
//对比总数和已完成来勾选全选的状态切换
get(){
return this.doneTotal===this.total && this.total>0
},
//获取勾选状态来操作todo.done勾选状态
set(value){
this.checkAllTodo(value)
}
}
},
methods:{
clearAll(){
this.clearAllTodo()
}
},
};
</script>
<style scoped>
.todo-footer{
height:40px;
line-height:40px;
}
button{
float:right;
margin-top:5px;
}
</style>
