todolist案列——vue脚手架（完整版）

目录

一、项目目录

二、各组件

1.  父组件App.vue

2.  components文件夹下得子组件 

2.1：  Header.vue

2.2：  List.vue

2.3：  Footer.vue

2.4：  Item.vue

三、整体效果实现

---

一、项目目录

二、各组件

1.  父组件App.vue

 
 
<script>
import Header from "./components/Header.vue";
import List from "./components/List.vue";
import Footer from "./components/Footer.vue";
 
export default {
  name: 'App',
  data(){
    return {
      todo:[
        {id:1,name:'Vue',done:false},
        {id:2,name:'React',done:false},
        {id:3,name:'Java',done:true},
        {id:4,name:'HTML+CSS',done:true},
      ]
    }
  },
  methods:{
    addTodo(name){
      const item={id:new Date().getTime(),name,done:false};
      this.todo.unshift(item);
      console.log('app',item);
    },
    delTodo(id){
      this.todo=this.todo.filter((item)=>{
        return item.id!=id;
      })
    },
    //修改状态
    editDone(id){
			this.todo.forEach((item)=>{
				if(item.id==id){
					item.done = !item.done;
				}
			})
		},
    //全选/全不选
    editAll(checked){
      this.todo.forEach((item)=>{
        item.done=checked;
      })
    },
    //清除所有已完成任务
    delAll(){
      this.todo=this.todo.filter((item)=>{
        return item.done!=true;
      })
    }
  },
  components:{
    Header,
    List,
    Footer
},
  
}
script>
 
<style>
*{
	margin: 0px;
	padding: 0px;
}
li{
	list-style: none;
}
.main{
	width: 600px;
	margin: auto;
}
.btn{
	 position: absolute;
	 right: 0px;
	 background: red;
	 color: #fff;
	 width: 90px;
	 height: 33px;
	 border: none;
	 border-radius: 5px;
	 cursor: pointer;
	 display:none;
}
 
 
 
style>

2.  components文件夹下得子组件 

2.1：  Header.vue

 
<script>
export default{
    name:'Header',
	props:['addTodo'],
	methods:{
		pressAdd(e){
			this.addTodo(e.target.value);
			console.log('111');
		}
	},
}
script>
 
<style >
/* 头部文件 */
.header{
	border: 1px solid #999999;
	padding: 15px;
}
.header input{
	width: 100%;
	height: 40px;
	line-height: 40px;
}
style>

2.2：  List.vue

 
<script>
import Item from '../components/Item'
 
export default{
    name:'List',
	props:['todo','delTodo','editDone'],
	//测试是否拿到了todo数组的值
	mounted(){
		//console.log(this.todo);
	},
	components:{
        Item,
    },
}
script>
 
<style>
/* list样式 */
.list{
	border: 1px solid #999999;
	padding: 15px;
	margin-top: 15px;
}
.list li{
	height: 40px;line-height: 40px;color: #666;
	border-bottom: 1px solid #999999;
	position: relative;
}
.list li .btn{
		 top:2px;
}
 
.list li:hover .btn{
	display: block;
}
 
style>

2.3：  Footer.vue

 
<script>
export default{
    name:'Footer',
	props:['todo','editAll','delAll'],
	computed:{
		alldone(){
			return this.todo.reduce((total,current)=>{
				return total+(current.done?1:0)
			},0);
		},
		alltodo(){
			return this.todo.length;
		},
		checkall(){
			return this.alldone!=0 && this.alltodo==this.alldone;
		}
	},
	methods:{
		changeAll(e){
			this.editAll(e.target.checked);
		},
		pressDelAll(){
			this.delAll();
		}
	}
}
 
script>
 
<style >
/* 底部 */
.footer{
	border: 1px solid #999999;
	padding: 15px;
	margin-top: 15px;
	position: relative;
}
.footer .btn{
	display: block;
	padding: 10px 20px;
	width: auto;
	height: auto;
	padding-bottom: 9px;
	top:6px;
	right: 5px;
}
style>

2.4：  Item.vue

 
<script>
export default {
    name:'Item',
    props:['item','delTodo','editDone'],
    methods:{
        pressDel(id){
            this.delTodo(id);//调用父组件回调函数 并传递id
        }
    },
    computed:{
        changedone:{
            get(){
                // return true;
                return this.item.done;
            },
            set(done){
                console.log(done);
                this.editDone(this.item.id);
            }
        }
    }
}
script>
 
<style scoped>
 
style>

三、整体效果实现