黑马模板网专注企业网站模板制作，包括企业pbootcms网站模板，静态网页模板，网站源码下载，HTML网站模板等等。
免责声明：本站所有资源(模板、图片)搜集整理于互联网或者网友提供，仅供学习与交流使用，如果不小心侵犯到你的权益，请及时联系我们删除该资源。
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:{
//添加的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)
},
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>
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>
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>
List.vue
<template>
<ul class="todo-main">
<Item
v-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>
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>
<input
type="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",
//声明接收todo
props: ['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>
