目录

一、项目目录

二、各组件

1.  父组件App.vue

2.  components文件夹下得子组件 

2.1：  Header.vue

2.2：  List.vue

2.3：  Footer.vue

2.4：  Item.vue

三、整体效果实现

一、项目目录

二、各组件

1.  父组件App.vue

 <template>
  <div class="main">
			<!-- 头部组件 -->
      <Header :addTodo="addTodo"></Header>
      <!-- 数据组件 -->
      <List :todo="todo" :delTodo="delTodo" :editDone="editDone"></List>
      <!-- 底部组件 -->
      <Footer :todo="todo" :editAll="editAll" :delAll="delAll"></Footer>
		</div>
</template>

<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

<template>
    <div class="header">
		<input type="text" placeholder="输入项目，按回车键添加" @keyup.enter="pressAdd"/>
	</div>
</template>

<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

<template>
    <div class="list">
		<ul>
			<Item v-for="item in todo" :key="item.id" :item="item" :delTodo="delTodo" :editDone='editDone'></Item>
		</ul>
	</div>
</template>

<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

<template>
    <div class="footer">
		<input type="checkbox" :checked="checkall" @change="changeAll"/> 已完成({{alldone}}) / 总任务({{alltodo}})	
		<input type="button" value="清除所有已完成任务" class="btn" @click="pressDelAll"/>
	</div>
</template>

<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

<template>
    <div>
        <li><input type="checkbox" v-model="changedone" />{{item.name}}<input type="button" value="删除" class="btn" @click="pressDel(item.id)"/></li>
    </div>
</template>

<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>

三、整体效果实现

最后

以上就是单纯老鼠为你收集整理的todolist案列——vue脚手架（完整版）一、项目目录二、各组件三、整体效果实现的全部内容，希望文章能够帮你解决todolist案列——vue脚手架（完整版）一、项目目录二、各组件三、整体效果实现所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。