todo-list案例（尚硅谷）

已于 2022-12-07 15:58:24 修改
阅读量795 收藏 3
点赞数
文章标签： css javascript 前端 vue.js
于 2022-12-04 17:48:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_44791442/article/details/128161248
版权

文章目录

1.拆分组件

按照功能点拆分

  • TodoHeader
  • TodoList
  • TodoItem
  • TodoFooter

2.静态组价拆分编写

App.vue

<template>
  <div id="root">
    <div class="Todo-container">
      <div class="Todo-wrap">
        <Todo-header></Todo-header>
        <Todo-list></Todo-list>
        <Todo-footer></Todo-footer>
      </div>
    </div>
  </div>
</template>

<script>
  import TodoList from "./components/TodoList"
  import TodoHeader from "./components/TodoHeader"
  import TodoFooter from "./components/TodoFooter"
  
  export default {
    name:"App",
    components:{
      TodoList,
      TodoFooter,
      TodoHeader
    },
  }
</script>

<style>
  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:focus {
     outline: none;
   }

   .Todo-container {
     width: 600px;
     margin: 0 auto;
   }
   .Todo-container .Todo-wrap {
     padding: 10px;
     border: 1px solid #ddd;
     border-radius: 5px;
   }
</style>

TodoHeader.vue

<template>
  <div class="Todo-header">
		<input type="text" placeholder="请输入你的任务名称，按回车键确认"/>
	</div>
</template>

<script>
  export default {
    name:"TodoHeader"
  }
</script>

<style scoped>
  .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>

TodoList.vue

<template>
  <ul class="Todo-main">
		<Todo-item></Todo-item>
		<Todo-item></Todo-item>
		<Todo-item></Todo-item>
		<Todo-item></Todo-item>
	</ul>
</template>


<script>
  import TodoItem from '@/components/TodoItem'

  export default {
    name:"TodoList",
    components:{TodoItem}
  }
</script>

<style scoped>
  .Todo-main {
	  margin-left: 0px;
	  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>

TodoItem.vue

<template>
  <li>
		 <label>
				<input type="checkbox"/>
				<span>xxxxx</span>
		 </label>
			  <button class="btn btn-danger" style="display:none">删除</button>
	</li>
</template>

<script>
  export default {
    name:"TodoItem"
  }
</script>

<style scoped>
  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;
	}   
</style>

TodoFooter.vue

<template>
  <div class="todo-footer">
    <label>
      <input type="checkbox">
    </label>
    <span>
      <span>已完成0 </span> / 全部4
    </span>
    <button class="btn btn-danger">清除已完成任务</button>
  </div>
</template>

<script>
  export default {
    name:"TodoFooter"
  }
</script>
 
<style scoped>
  .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>

页面效果：
在这里插入图片描述

3.初始化列表

TodoList.vue

<template>
  <ul class="Todo-main">
	<Todo-item v-for="todoObj in todos" :key="todoObj.id" :todoObj="todoObj"></Todo-item>
  </ul>
</template>

<script>
	export default{
		data(){
		      return {
		        todos:[
		          {id:"01",name:"吃饭",done:true},
		          {id:"02",name:"睡觉",done:true},
		          {id:"03",name:"学习",done:false},
		          {id:"04",name:"开车",done:true},
		        ]
		      }
		    }
		 }
	......
</script>

TodoItem.vue

<script>
<template>
  <li>
	<label>
		<input type="checkbox" :checked="todoObj.done"/>
		<span>{{todoObj.name}}</span>
	</label>
	<button class="btn btn-danger" style="display:none">删除</button>
  </li>
</template>
  export default {
    name:"TodoItem",
    props:["todoObj"]
  }
  ......
</script>

3.添加一个todo

由于目前我们所学的知识不能完成兄弟组件进行传值，因此我们将兄弟组件所需要用到的数据需要用到的数据放入他们共同的父组件中，进而进行传值，既可以传data中的数据，也可以传方法

父组件App.vue，存放数据todos

<template>
  <div id="root">
    <div class="Todo-container">
      <div class="Todo-wrap">
        <Todo-header :addTodo="addTodo"></Todo-header>
        <Todo-list :todos="todos"></Todo-list>
        <Todo-footer></Todo-footer>
      </div>
    </div>
  </div>
</template>

<script>
  import TodoList from "./components/TodoList"
  import TodoHeader from "./components/TodoHeader"
  import TodoFooter from "./components/TodoFooter"
  
  export default {
    name:"App",
    components:{
      TodoList,
      TodoFooter,
      TodoHeader
    },
    data(){
      return {
        todos:[
          {id:"01",name:"吃饭",done:true},
          {id:"02",name:"睡觉",done:true},
          {id:"03",name:"学习",done:false},
          {id:"04",name:"开车",done:true},
        ]
      }
    },
    methods:{
      addTodo(todoObj){
        this.todos.unshift(todoObj)
        console.log(todoObj);
      }
    }
  }
</script>
<style>
......
</style>

子组件TodoList.vue通过props接收数据

<template>
  <ul class="Todo-main">
		<Todo-item v-for="todoObj in todos" :key="todoObj.id" :todoObj="todoObj"></Todo-item>
	</ul>
</template>


<script>
  import TodoItem from '@/components/TodoItem'

  export default {
    name:"TodoList",
    components:{TodoItem},
    data(){
      return {
      }
    },
    props:["todos"]
  }
</script>

子组件TodoHeader.vue通过props接收父组件App.vue传过来的方法，在适当时机可以直接调用父组件App.vue的方法，并且可以在方法中传值

<template>
	<div class="Todo-header">
		<input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="name" @keyup.enter="add"/>
	</div>
</template>

<script>
import {nanoid} from "nanoid"

export default {
	name: "TodoHeader",
	data() {
		return {
			name: "",
		};
	},
	props:["addTodo"],
	methods:{
		add(){
			// 将用户的输入包装成一个TODO对象
			const todoObj={id:nanoid(),name:this.name,done:false}
			this.addTodo(todoObj)
		}
	}
};
</script>

3.勾选or取消todo

在App.vue中添加一个方法，然后将其通过属性先传给TodoList.vue，再通过TodoList传给TodoItem.vue

App.vue中添加方法：

 // 取消or勾选一个todo
      checkTodo(id){
        this.todos.forEach(item => {
          if(item.id==id){
            item.done=!item.done
          }
        });
      }

最终在TodoItem.vue中通过props接收到该方法，当勾选状态发生改变时，触发父组件该方法,并且将id值传过去

TodoItem.vue：

<template>
	<li>
	 <label>
		<input type="checkbox" :checked="todoObj.done" 	@change="handleCheck(todoObj.id)"/>
		<span>{{todoObj.name}}</span>
	 </label>
	 <button class="btn btn-danger" style="display:none">删除</button>
	</li>
</template>

<script>
	export default {
		name:"TodoItem",
		props:["todoObj","checkTodo"],
		methods:{
			handleCheck(id){
				this.checkTodo(id)
			}
		}
	}
</script>

3.初版本代码

App.vue

TodoList.vue

<template>
  <ul class="Todo-main">
		<Todo-item v-for="todoObj in todos" :key="todoObj.id" :todoObj="todoObj" 
     :checkTodo="checkTodo" :deleteTodo="deleteTodo">
    </Todo-item>
	</ul>
</template>


<script>
  import TodoItem from '@/components/TodoItem'

  export default {
    name:"TodoList",
    components:{TodoItem},
    data(){
      return {
      }
    },
    props:["todos","checkTodo","deleteTodo"]
  }
</script>

<style scoped>
  .Todo-main {
	  margin-left: 0px;
	  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>

TodoItem.vue

<template>
	<li>
		 <label>
				<input type="checkbox" :checked="todoObj.done" @change="handleCheck(todoObj.id)"/>
				<span>{{todoObj.name}}</span>
		 </label>
		 <button class="btn btn-danger" @click="handleDelete(todoObj.id)">删除</button>
	</li>
</template>

<script>
	export default {
		name:"TodoItem",
		props:["todoObj","checkTodo","deleteTodo","deleteTodo"],
		methods:{
			handleCheck(id){
				this.checkTodo(id)
			},
			handleDelete(id){
				this.deleteTodo(id)
			}
		}
	}
</script>

<style scoped>
	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:hover{
		background-color: #e2e2e2;
	}

	li:hover button{
		display: block;
	}

	li button {
		float: right;
		display: none;
		margin-top: 3px;
	}

	li:before {
		content: initial;
	}

	li:last-child {
		border-bottom: none;
	}   
</style>

TodoHeader.vue

<template>
	<div class="Todo-header">
		<input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="name" @keyup.enter="add"/>
	</div>
</template>

<script>
import {nanoid} from "nanoid"

export default {
	name: "TodoHeader",
	data() {
		return {
			name: "",
		};
	},
	props:["addTodo"],
	methods:{
		add(){
			// 将用户的输入包装成一个TODO对象
			const todoObj={id:nanoid(),name:this.name,done:false}
			this.addTodo(todoObj)
		}
	}
};
</script>

<style scoped>
.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>

TodoFooter.vue

<template>
  <div class="todo-footer" v-show="totalTodo">
    <label>
      <input type="checkbox" v-model="checkAll">
    </label>
    <span>
      <span>已完成{{doneTotal}} </span> / 全部{{totalTodo}}
    </span>
    <button class="btn btn-danger" @click="clearDone">清除已完成任务</button>
  </div>
</template>

<script>
  export default {
    name:"TodoFooter",
    props:["todos","checkAllTodo","clearDoneTodo"],
    computed:{
      totalTodo(){
        return this.todos.length
      },
      doneTotal(){
        return this.todos.reduce((pre,current)=>{
          return current.done?pre+1:pre
        },0)
      },
      checkAll:{
        get(){
          return this.totalTodo==this.doneTotal&&this.totalTodo>0
        },
        set(value){
          this.checkAllTodo(value)
        }
      }
    },
    methods:{
      clearDone(){
        this.clearDoneTodo()
      }
    }
  }
</script>
 
<style scoped>
  .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>

3.最终代码

todo-list案例资源

尚硅谷—TodoList案例
h_jQuery的博客
08-26 871
1.组件化编码流程 ​ 1.1 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突 ​ 1.2实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用 ​ 1.2.1 一个组件在用：放在该组件的data中即可 ​ 1.2.2 一些组件在：放在他们共同的父组件上 ​ 1.3实现交互：从绑定事件开始 2.props适用于： ​ 2.1父组件——>子组件 通信 ​ 2.2子组件——>父组件 通信（要求父组件先给子组件一个函数，然后子组件调用该函数，将数据当参数传给父元素
尚硅谷笔记——React组件通信——TodoList案例(详细版)
weixin_53317758的博客
11-10 1260
todolist案例 组件之间的通信 父传子 子传父 js数组的方法 filter reduce map 用propTypes对props进行类型、必要性的限制 defaultChecked仅适用于一次
Vue：实现TodoList案例（尚硅谷）
热门推荐
做一只猫的博客
08-04 1万+
TodoList案例
尚硅谷vue2的todolist案例解析,基本概括了vue2所有知识点，结尾有具体代码，复制粘贴学习即可
最新发布
Zwwxd666的博客
06-25 1141
因为vc关闭事件也跟着没，而这里的事件是在 原型上的，一直存在的不受vc关闭而关闭。而emit相当于说，说给耳朵听， 之前单纯的emit只能在父子组件通信，现在引入了一个传话的，隔代通信，事件名相当于一个人名，和谁通信的标识，当然这个on必须在挂载后执行类似于父组件监听子组件的 打个比方，所有子组件只是个可以反复利用的壳子，类似于高达积木，而正在要来拼接他们的是我们的APP组件，有大脑想法，可以决定怎么拼好看，且怎么上色也就是赋予数据得当。
尚硅谷todolist案例
weixin_45830863的博客
07-21 1822
组件化编码流程​(1).拆分静态组件组件要按照功能点拆分，命名不要与html元素冲突。​(2).实现动态组件考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用​1).一个组件在用放在组件自身即可。​2).一些组件在用放在他们共同的父组件上（状态提升）。​(3).实现交互从绑定事件开始。props适用于​(1).父组件==>子组件通信​(2).子组件==>父组件通信（要求父先给子一个函数）使用v-model时要切记。......
【Vue2】Vue功能实例——基于尚硅谷教程ToDoList案例（一）
02-09
【Vue2】Vue功能实例——基于尚硅谷教程ToDoList案例（一）
Todo-List案例
zh08150815的博客
11-12 480
TodoList案例
ToDoList 案例完整 尚硅谷
weixin_64778225的博客
09-25 1240
3.使用v-model时要注意:v-model绑定的值不能是props传过来的值,因为props是不可以修改的.我这些代码都是跟着老师敲的,其中已经运用到了组件自定义事件和全局事件总栈,有代码需要的小伙伴可以自行删除.(2).实现动态组件:考虑好数据的存放位置,数据是一个组件再用,还是一些组件在用.(1).拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突.(2).子组件 ===> 父组件 通信 (要求父组件先给子组件一个函数)b:一些组件在用,放在他们共同的父组件上(状态提升).
TodoList 案例
m0_53762175的博客
08-20 774
上市产品：ToDoList、奇妙清单、滴答清单 学习练手项目 ：TodoMVC、Vue官方示例 为什么选择这样的案例： 产品功能简洁，需求明确，所需知识点丰富；实现基本功能容易，涵盖所学基础知识；而可扩展性强，完善所有功能比较复杂，所需技术众多；在学习中，可以灵活取舍； 1.1 项目初始化 在项目目录中执行npm install命令，下载所需静态资源 ; 将Vue.js框架代码，复制到 js 目录，在index.html中引入 vue :<script src="./j...
todolist案例
qq_64207331的博客
09-05 365
今天分享到此结束，拜拜
Vue TodoList完整案例
09-05
案例根据 http://todomvc.com/examples/vue/ 编写 完成功能：完成了所有的功能，如：添加、双击修改、ESC键取消编辑、清除所有已完成任务、一键全选任务、自动聚焦，本地保存等等。
TodoList案例
m0_64439018的博客
04-07 1883
1. 组件化编码流程： ​ (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。 ​ (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： ​ 1).一个组件在用：放在组件自身即可。 ​ 2). 一些组件在用：放在他们共同的父组件上（<span style="color:red">状态提升</span>）。 ​ (3).实现交互：从绑定事件开始。 2. pro...
To-Do List资源例子
de14141983的专栏
07-19 403
To-Do List资源例子 在这个例子中，你将为第2章中的To-Do List例子程序添加新的外部资源，来增加一些额外的功能。在这里创建的字符串和图片资源，将在第4章为To-Do List应用程序实现菜单时用到。 接下来的步骤将教你为添加、删除菜单项创建文本和icon资源，并如何为应用程序创建一个主题： 1. 创建两个PNG图片来代表增加、删除项。每个图...
ToDoList案例（重要）
weixin_50119334的博客
10-17 1279
ToDoList案例 1.文本框里面输入内容，按下回车，就可以生成代办事项 2.点击代办事项复选框，就可以把当前数据添加到已完成事项里面 3.点击已完成事项复选框，就可以把当前数据添加到代办事项中 4.但是本页面内容不会丢失 分析： 1.刷新页面不会丢失数据，因此需要用到本地存储locastorage 2.核心思路：不管按下回车还是点击复选框，都是把本地存储加载到页面中，这样保证书信关闭页面不会丢失数据。 3.存储的数据格式： var todolist = [ { title : ‘xxx’ done
没有报错但是实现不了删除操作（尚硅谷todolist案例）
hngne的博客
07-14 348
尚硅谷vue学习的案例todolist的删除功能。点击删除却没有实现功能
Vue 学习笔记07：Todo-list 案例
iFulling的博客
03-29 1227
Todo-list 案例一、组件化编码流程二、props 扩展三、webStorage四、自定义事件五、全局事件总线六、消息订阅与发布七、nextTick八、案例代码1. Header2. List3. Item4. Footer5. App.vue6. main.js 一、组件化编码流程 拆分静态组件：组件要按照功能点拆分，命名不要与 html 元素冲突。 实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件再用： （1）一个组件在用：放在组件自身即可。 （2）一些组件再用：放在他们共同
Vue | TodoList 案例【完整过程】
不爱吃菜的菜菜的博客
07-19 2889
是要渲染的数据，一开始存放在List里面，然后发现我们现在还没有学从Header传数据到List，所以现在把要渲染的数据放到App.vue里面。这里是todo案例，包含你要做的事情，是否完成，所以用对象来包裹最好，每一件事情item都是一个对象，所有事情list用数组来存放。父亲需要提前给儿子一个函数[props]，儿子再调用这个函数，函数的定义本身在父亲里，父亲就能收到参数了。每一个事情都是独一的，生成的id也是，为了简便，引入了。考虑数据的类型，名称，以及怎么存放。，里面的每一个对象为。........
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小小姜鸭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值