main.js
//引入Vue
import Vue from "vue";
//引入App
import App from './App';//关闭Vue的生产提示
Vue.config.productionTip = false;new Vue({el: '#app',render: h => h(App),beforeCreate() {//事件总线Vue.prototype.$bus = this;}
});App.vue
<template><div id="root"><div class="todo-container"><div class="todo-wrap"><MyHeader @addTodo="addTodo"/><List:todos="todos"/><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';
import pubsub from "pubsub-js";
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}// ]todos:JSON.parse(localStorage.getItem('todos')) || []}},methods:{//添加的todoaddTodo(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)},updateTodo(id, title){this.todos.forEach(todo => {if(todo.id === id) todo.title = title;})}},watch:{//深度监视todos:{deep: true, //深度监视当我监视数组中的对象的某个属性的变化它也会产生反应handler(newValue) {//本地存储存的是key和value都是字符串//数据存放在本地存储中localStorage.setItem("todos", JSON.stringify(newValue))}},},//已挂在绑定事件总线mounted() {this.$bus.$on('checkTodo', this.checkTodo);this.$bus.$on('updateTodo', this.updateTodo);this.pubId = pubsub.subscribe('deleteTodo', this.deleteTodo);},//被卸载注意解绑beforeMount() {this.$bus.$off('checkTodo');this.$bus.$off('updateTodo');pubsub.unsubscribe(this.pubId); //取消订阅的方式与取消定时器的方式是类似的，记住}
}
</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-edit{color: #fff;background-color: skyblue;border: 1px solid rgb(103, 159, 180);margin-right: 5px;
}.btn:focus {outline: none;
}.todo-container {width: 600px;margin: 0 auto;
}
.todo-container .todo-wrap {padding: 10px;border: 1px solid #ddd;border-radius: 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()) {alert('代办事项不能为空')return; //输入的代办事项为空则不走下面流程}const todoObj = {id: nanoid(),title: this.title,done:false}// console.log(todoObj);// this.addTodo(todoObj);//采用自定义事件来修改this.$emit('addTodo',todoObj);this.title = '';}},
}
</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>
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'],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);//采用自定义事件来修改this.$emit('checkAllTodo', value);}}},methods:{// checkAll(e){// // console.log(e.target.checked); //判断这个checkbox到底是不是全选 true全选 false全不选// this.checkAllTodo(e.target.checked);// }clearAll(){// this.clearAllDoneTodo();//修改为自定义事件this.$emit('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>
List.vue
<template><ul class="todo-main"><Itemv-for="todoObj in todos":key="todoObj.id":todo="todoObj"/></ul>
</template><script>
import Item from "@/components/Item";export default {name: "List",components: {Item,},props:['todos']
}
</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>
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"/>--><span v-show="!todo.isEdit">{{ todo.title }}</span><inputtype="text":value="todo.title"v-show="todo.isEdit"@blur="handleBlur(todo, $event)"ref="inputTitle"/></label><button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button><button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button></li>
</template><script>
import pubsub from "pubsub-js";
export default {name: "Item",//声明接收todoprops: ['todo'],methods:{handleCheck(id){//事件总线this.$bus.$emit('checkTodo',id);},handleDelete(id){if(confirm(`确定删除编号为${id}的todo吗`)){// console.log(id);//事件总线// this.$bus.$emit('deleteTodo',id);//消息订阅改写pubsub.publish('deleteTodo', id);}},//编辑handleEdit(todo){// todo.isEdit = true; //注意这里添加的数据并不是响应式的 一定清楚if(Object.prototype.hasOwnProperty.call(todo, 'isEdit')){todo.isEdit = true;}else{this.$set(todo, 'isEdit', true); //保证初次加入的时候存在响应式的数据}//自动获取焦点//this.$refs.inputTitle.focus(); //此时你这行代码执行了，但是注意vue并没有重新解析模版(input并没有出现在页面上，dom节点并没有被更新)，它一定要等这个回调函数执行完之后才会去重新渲染模版//使用nextTick来解决this.$nextTick(() => {//这里的回调函数注意是在dom节点被更新之后才会运行的this.$refs.inputTitle.focus();})console.log(todo);},//失去焦点回调handleBlur(todo, e){todo.isEdit = false; //注意我在这里确保你身上一定存在isEdit属性if(!e.target.value.trim()) {alert('输入不能为空');return;}this.$bus.$emit('updateTodo', todo.id, e.target.value);}}
}
</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>