1、main.js
//该文件是整个项目的入口文件
//引入Vue
import Vue from 'vue'
//引入APP组件,他是所有组件的父组件
import App from './App.vue'
//关闭Vue是生产提示
Vue.config.productionTip = false;
//应用插件
//创建Vue实例对象---vm
new Vue({
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this;
}
}).$mount('#app');
2、MyItem.vue
<template>
<li>
<label>
<input type="checkbox" :checked="todo.done" @change="changecheckItem(todo.id)"/>
<span v-show="!todo.isEdit">{{todo.title}}</span>
<input v-show="todo.isEdit" type="text" v-model="title2" @blur="handlerBlur(todo)" ref="inputTitle">
</label>
<button class="btn btn-danger" @click="removeTodo(todo.id)">删除</button>
<button class="btn btn-edit" @click="editTodo(todo)">编辑</button>
</li>
</template>
<script>
export default {
name: "MyItem",
props:['todo'],
data(){
return{
title2:this.todo.title
}
},
methods:{
changecheckItem(id){
//this.changeDone(id);
this.$bus.$emit('changeDone',id);
},
removeTodo(id){
if(confirm('是否删除')){
//this.deleteToto(id);
this.$bus.$emit('deleteToto',id);
}
},
editTodo(todo){
if (todo.hasOwnProperty('isEdit')) {
this.todo.isEdit = true;
}else {
this.$set(todo,'isEdit',true);
}
this.$nextTick(function () {
this.$refs.inputTitle.focus();
})
},
handlerBlur(todo){
todo.isEdit = false ;
this.$bus.$emit('updateTodo',this.todo.id,this.title2);
}
}
}
</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 button{
display: block;
}
</style>
3、App.vue
<template>
<div id="app">
<div class="todo-container">
<div class="todo-wrap">
<my-header @addTodo="addTodo"></my-header>
<my-list :todos="todos"></my-list>
<my-footer :todos="todos" @changeTodoDones="changeTodoDones" @clearTodoDone="clearTodoDone"></my-footer>
</div>
</div>
</div>
</template>
<script>
import MyHeader from './components/MyHeader'
import MyFooter from './components/MyFooter'
import MyList from './components/MyList'
export default {
name: 'App',
components: {
MyHeader,MyList,MyFooter
},
data(){
return{
todos:JSON.parse(localStorage.getItem('todos')) || []
}
},
watch:{
todos:{
deep:true,
handler(newvalue) {
localStorage.setItem('todos',JSON.stringify(newvalue));
}
}
},
methods:{
addTodo(obj){
// console.log(obj);
this.todos.unshift(obj);
},
changeDone(id){
this.todos.forEach((p)=>{
if(p.id === id){
p.done = !p.done
}
})
},
deleteToto(id){
this.todos=
this.todos.filter(p=>p.id !== id);
},
changeTodoDones(value){
console.log(value);
this.todos.forEach(p=>{
p.done=value;
});
},
clearTodoDone(){
this.todos=this.todos.filter(p=>{
return !p.done
})
},
updateTodo(id,title){
this.todos.forEach(p=>{
if (p.id===id){
p.title = title;
}
})
}
},
mounted() {
this.$bus.$on('changeDone',this.changeDone);
this.$bus.$on('deleteToto',this.deleteToto);
this.$bus.$on('updateTodo',this.updateTodo);
},
beforeDestroy() {
this.$bus.$off('changeDone');
this.$bus.$off('deleteToto');
this.$bus.$off('updateTodo');
}
}
</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-edit {
color: #fff;
background-color: green;
border: 1px solid #bd362f;
margin-right: 7px;
}
.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;
}
</style>