To Do List案例
MyFooter.vue
<template>
<!--隐式类型转换-->
<div class="todo-footer" v-show="total">
<label>
<!--这里也可用v-model来替代,此时不需要计算属性了-->
<!-- <input type="checkbox" :checked="isAll" @change="checkAll"/>-->
<input type="checkbox" v-model="isAll"/>
</label>
<span>
<span>已完成{{ doneTotal }}</span> / 全部{{total}}
</span>
<button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
</div>
</template>
<script>
export default {
name: "MyFooter",
props: ['todos', 'checkAllTodo', 'clearAllDoneTodo'],
computed:{
total(){
return this.todos.length;
},
doneTotal(){
return this.todos.reduce((todoTotal, todo) => {
//隐士类型转换
return todoTotal + todo.done;
}, 0);
// return this.todos.filter(todo => todo.done).length;
},
isAll:{
get(){
return this.total === this.doneTotal && this.doneTotal > 0; //计算属性可以通过其他的计算属性接着进行计算得到结果
},
set(value){
//value注意要么为true,要么为false,因为你是把它应用在了checkbox上
this.checkAllTodo(value);
}
}
},
methods:{
// checkAll(e){
// // console.log(e.target.checked); //判断这个checkbox到底是不是全选 true全选 false全不选
// this.checkAllTodo(e.target.checked);
// }
clearAll(){
this.clearAllDoneTodo();
}
}
}
</script>
<style scoped>
/*footer*/
.todo-footer {
height: 40px;
line-height: 40px;
padding-left: 6px;
margin-top: 5px;
}
.todo-footer label {
display: inline-block;
margin-right: 20px;
cursor: pointer;
}
.todo-footer label input {
position: relative;
top: -1px;
vertical-align: middle;
margin-right: 5px;
}
.todo-footer button {
float: right;
margin-top: 5px;
}
</style>
MyHeader.vue
<template>
<div class="todo-header">
<input type="text" placeholder="请输入你的任务名称,按回车键确认" v-model="title" @keyup.enter="add"/>
</div>
</template>
<script>
import { nanoid } from 'nanoid';
export default {
//注意不管是你写的data也还还是methods也好,甚至是computed计算属性也好都会出现在组件事例对象vc身上
//属性值不能重名
name: "MyHeader",
data(){
return {
title: ''
}
},
methods:{
add(){
//将用户的输入包装成一个todo对象
console.log(this.title)
if(!this.title.trim()) {//这个判断的意思就是,如果输入框为空,就跳出这个函数,为什么要取反?因为字符串转为布尔值就是false,所以得取反为true,跳出函数。
//意思就是如果传过来的todo的title也就是输入的值为空的话,就return跳出函数了
alert('代办事项不能为空')
return; //输入的代办事项为空则不走下面流程
}
const todoObj = {
id: nanoid(),//简单的库,比uuid快和轻便很多
title: this.title,
done:false
}//这是兄弟组件,不是父子组件,传数据失败,header和list不互通
//props一般是单向通信,即父传子,官方不建议子传父,会导致数据流向难以理解。
//
// console.log(todoObj);
this.addTodo(todoObj)
this.title = '';
}
},
props:['addTodo'],
}
</script>
<style scoped>
/*header*/
.todo-header input {
width: 560px;
height: 28px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 4px 7px;
}
.todo-header input:focus {
outline: none;
border-color: rgba(82, 168, 236, 0.8);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
</style>
Item.vue
<template>
<li>
<label>
<!-- 这里勾选和取消勾选可以使用change和click作为事件处理-->
<input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
<!--v-model数据的双向绑定,checkbox使用v-model来双向绑定其是否被勾选,也可以实现效果但不推荐(因为其实修改了props中的数据)-->
<!--这里修改了从List修改过来的props,这里的不允许改是浅层次,就是如果props是一个对象则这个修改这个对象的某一个属性vue是放行的-->
<!-- <input type="checkbox" v-model="todo.done"/>-->
<!-- 这里时props传入的数据,不宜使用v-model,因为不允许在子组件中修改父组件的数据 -->
<span>{{ todo.title }}</span>
<!--@change 原型 是js里面的onchange 当input表单value发生改变触发事件-->
</label>
<button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
</li>
</template>
<script>
export default {
name: "Item",
//声明接收todo
props: ['todo', 'checkTodo', 'deleteTodo'],
methods:{
handleCheck(id){
this.checkTodo(id);
},
handleDelete(id){
if(confirm(`确定删除编号为${id}的todo吗`)){
// console.log(id);
this.deleteTodo(id);
}
}
}
}
</script>
<style scoped>
/*item*/
li {
list-style: none;
height: 36px;
line-height: 36px;
padding: 0 5px;
border-bottom: 1px solid #ddd;
}
li label {
float: left;
cursor: pointer;
}
li label li input {
vertical-align: middle;
margin-right: 6px;
position: relative;
top: -1px;
}
li button {
float: right;
display: none;
margin-top: 3px;
}
li:before {
content: initial;
}
li:last-child {
border-bottom: none;
}
li:hover{
background: #ddd;
}
li:hover button{
display: block;
}
</style>
List.vue
<template>
<ul class="todo-main">
<Item
v-for="todoObj in todos"
:key="todoObj.id"
:todo="todoObj"
:checkTodo="checkTodo"
:deleteTodo="deleteTodo"
/>
</ul>
</template>
<script>
import Item from "@/components/Item";
export default {
name: "List",
components: {
Item,
},
props:['todos', 'checkTodo', 'deleteTodo']
}
</script>
<style scoped>
/*main*/
.todo-main {
margin-left: 0;
border: 1px solid #ddd;
border-radius: 2px;
padding: 0px;
}
.todo-empty {
height: 40px;
line-height: 40px;
border: 1px solid #ddd;
border-radius: 2px;
padding-left: 5px;
margin-top: 10px;
}
</style>
App.vue
<template>
<div id="root">
<div class="todo-container">
<div class="todo-wrap">
<MyHeader :addTodo="addTodo"/>
<List
:todos="todos"
:checkTodo="checkTodo"
:deleteTodo="deleteTodo"
/>
<MyFooter
:todos="todos"
:checkAllTodo="checkAllTodo"
:clearAllDoneTodo="clearAllDoneTodo"
/>
</div>
</div>
</div>
</template>
<script>
import MyHeader from "@/components/MyHeader";
import List from "@/components/List";
import MyFooter from '@/components/MyFooter';
export default {
name: "App",
components:{
List,
MyFooter,
MyHeader
},
data() {
return {
todos: [
{id: '001', title: '吃饭', done: false},
{id: '002', title: "睡觉", done: true},
{id: '003', title: '打代码', done: false}
]
}
},
methods:{
//添加的todo
addTodo(todo){
console.log('我是app组件,我收到了数据');
this.todos.unshift(todo);
},
checkTodo(id){
const todo = this.todos.find(todo => 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);
},
clearAllDoneTodo(){
this.todos = this.todos.filter(todo => !todo.done)
}
}
}
</script>
<style>
/*base*/
body {
background: #fff;
}
.btn {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
text-align: center;
vertical-align: middle;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
.btn-danger {
color: #fff;
background-color: #da4f49;
border: 1px solid #bd362f;
}
.btn-danger:hover {
color: #fff;
background-color: #bd362f;
}
.btn:focus {
outline: none;
}
.todo-container {
width: 600px;
margin: 0 auto;
}
.todo-container .todo-wrap {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
/*别人的项目可不这么这么写,CSS写到后面,发现前面的可能要加点什么直接后面补了,真是离了大谱*/
</style>
全都勾选了有可能是MyList里面的done后面写成了字符串,,把单引号或者双引号去掉就行了
因为你们todoList里面是“true”而不是true,done 要写布尔值,不要写字符串
父组件定义函数,子组件调用函数传递参数。子组件定义属性参数列表,父组件调用子标签属性传参。这里的this还是header,只不过header和app里的received方法引用地址相同,你在header里面调用了,也相当于在app中调用了
这里this都是 实例对象vc 函数是地址值 不是传进来个全新的对象,在js中,函数也是对象,传函数本身实际上是引用传递,意思他们两用的是同一块内存空间,一方修改,另一方也会改变
header里并没有修改任何值,只是传了个参数回app,app那个this才真正修改了vc上的数据
072_尚硅谷Vue技术_TodoList案例_添加_哔哩哔哩_bilibili 这5分钟很好
关于addtodo,这里是按下回车后调用的add方法与APP传过来的add方法重名了
勾选
是非常重要,Vue将页面拆分成各种组件,组件间就得通信拿数据,如果不用Vue,就一个页面,数据都在一起那还用啥通信了
@change="todoObj.done=!todoObj.done" 就可以了
v-model底层就是监听checked 绑定change