devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue实例-Todo-list案例_vue todolist案例

作者：IT小白 | 2024-03-12 11:24:40

赞

踩

vue todolist案例

基本效果图

 组件化编码流程(通用)
1.实现静态组件:抽取组件，使用组件实现静态页面效果
2.展示动态数据:
        2.1.数据的类型、名称是什么?
        2.2.数据保存在哪个组件?
3.交互一从绑定事件监听开始

 1、实现静态组件:

首先是要拆分组件，要自己判断应该分为几个组件然后再写（按照功能点划分，这是入门案例，以后可能不会分这么详细，学习流程即可），如图App必有，然后划分为四个组件（因为html有一个标签<footer>和<header>，所以说建议改名MyFooter和MyHeader）

 另外一个注意点就是如下，最后不要忘了在MyList当中引入MyItem即可

 组件完成后即是页面样式，一般项目除非从零开始，都是有之前的页面样式的如下

然后我们会发现MyItem里面还没有html代码，是因为其代码在MyList里面 

 HTML代码好了以后就是css样式代码了，注意通用的css代码仍然可以放在放在App.vue里面。。代码有注释就好说，不然就慢慢找，记住这个时候组件内的style就可以加scoped了。

 2、展示动态数据

2.1.数据的类型、名称是什么?

存一堆数据无非就是{}或者[]即对象或者数组。

这里用数组存数组[]，数组里面每一个要做的事是对象{}。（因为案例在的列表还有自己的事件，例如分辨事件是否完成、是否点击了删除按钮）

 每件事有自己的id、name、ok（标识事情是否完成，下面用的是id、title、done表示）

2.2.数据保存在哪个组件?

一般是谁用数据就放在哪里

 （1）首先我们实现列表的基本样式和简单逻辑，所以说将数据放在MyList组件里面

 （2）然后我们来给header的输入框编写代码

注意：现在我们还没有学习兄弟组件之间如何传输数据，只知道propos可以从父组件向子组件传输数据。我们不难发现数组在MyList里面，但是我们现在需要把MyHeader的数据传到MyList里面去，因为是兄弟组件而不能实现。

所以说我们需要重新构造代码，即把数据todos放在App组件内，App向MyList传输数据，MyHeader向App传输数据，至于子组件如何向父组件传输数据如下。

实现子组件给父组件（MyAeader向App）传输数据，即App需要给Header一个函数，Header在自己里调用该函数，函数定义本来是在App里面，所以说App就能收到参数。代码如下

 

 注意下面的v-model双向数据绑定，是监视data中的title，和其进行双向绑定(因为单向的v-bind数据只能从data流向页面，而这里需要的是把页面中输入框的数据传到data中)

所以说，页面的title变了，传到data当中，下面的函数中this.title就可以得到

 （3）实现勾选功能

不难发现，现在的勾选框只是能够勾选，但是数据的done属性还是不会改变，所以说下面的统计也没有实现。

首先保证无论是勾选还是取消勾选，都要保证能拿到这件事的id

  （4）实现删除功能

即实现删除事件，并且鼠标悬停时有一个高亮效果（改变背景色）。仍然是点击删除按钮时能够获取点击处事件id，然后根据id删除。仍然是在App里面定义一个删除函数，然后通过List传到Item当中实现删除功能。

和下面的清除所有已完成事件的过滤一起看，fiter返回新的todos，且内部必有return

这里是箭头函数简写，总之就是返回了id和删除的id不一样的数据

  1. //删除一个todo
  2. deleteTodo(id){
  3. 	this.todos = this.todos.filter( todo => todo.id !== id )
  4. },

所以说代码直接看即可，这里说一下css代码即可

 （5）底部统计和删除按钮

即对页面底部

 所以说又要在App里面将todos传给MyFooter组件

下面的全选按钮还可以通过计算属性数据绑定实现，看看原视频76节

 然后是对清除已完成任务按钮功能的实现。

 然后就是把

 clearAllTodo交给Myfooter同上，MyFooter组件内引入接收然后定义点击事件调用即可

3、把写死的数据改成全手动添加

即根据现实需求，一开始应该是没有任何数据，全是用户手动添加的。用到了浏览器本地存储，因为之前不难发现，只要页面刷新用户的数据便会全部丢失。

注意：不是要在输入框、删除按钮、清除全部按钮都写上监视事件来给浏览器的Storage修改数据

        而是直接监视todos数据，todos改变就带动Storage的改变即可

JSON.parse() | 菜鸟教程

JSON.stringify() | 菜鸟教程

使用watch监视（要复习）

建议看下源代码

## 总结TodoList案例

1. 组件化编码流程：

    ​ (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

    ​ (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

    ​       1).一个组件在用：放在组件自身即可。

    ​       2). 一些组件在用：放在他们共同的父组件上（<span style="color:red">状态提升</span>）。

    ​ (3).实现交互：从绑定事件开始。

2. props适用于：

    ​ (1).父组件 ==> 子组件 通信

    ​ (2).子组件 ==> 父组件 通信（要求父先给子一个函数）

3. 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！

4. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

4、把子向父传数据全部改成组件自定义事件

此处重点是header和footer向App传数据，List组件因为其还有子组件，后边组件内容等会学到了再来修改

首先是header组件的修改，

//由组件自定义事件可以知道，App.vue里直接把：变成@即可

<MyHeader @addTodo="addTodo"/>

//MyHeader.vue组件内也不需要props接收addTodo了,直接删除即可

然后是通知App添加一个todo对象时，也不是this.addTodo(todoObj)，而是使用$emit

触发addTodo

  1. methods：{
  2.     //之前是this.addTodo(todoObj)
  3.     this.$emit('addTodo',todoObj)
  4. }

然后是Footer组件向App传输数据

注意下图，红色框内不改成@，因为todos是数据是数组，不是函数

 所以说在Footer中仍然需要props传入数组todos，其余删掉。如何就是修改两个函数的触发代码即可。被注释的是之前的代码

  1.         props:['todos'],
  2. 		computed: {
  3. 			isAll:{
  4. 				//isAll被修改时set被调用
  5. 				set(value){
  6. 					// this.checkAllTodo(value)
  7. 					this.$emit('checkAllTodo',value)
  8. 				}
  9. 			}
  10. 		},
  11. 		methods: {
  12. 			//清空所有已完成
  13. 			clearAll(){
  14. 				// this.clearAllTodo()
  15. 				this.$emit('clearAllTodo')
  16. 			}
  17. 		},

5、利用全局事件总线优化组件间的数据传输

父给子，子给父使用props本身就很方便，所以说不需要修改

此处修改Item和App之间的数据传输

之前是通过中间组件List来接收App传入的事件，然后再利用props传到Item当中

现在我们是App和Item能够直接传输数据，先删除之前不需要的部分

 

 然后我们在main.js内安装全局事件总线，然后我们分析，知道是Item向App传输id（勾选和删除都是传id）

vm.$emit( event, arg ) //触发当前实例上的事件

vm.$on( event, fn );//监听event事件后运行 fn；

所以说在接收数据的App上绑定事件，然后在发送数据的Item内触发事件并且带上参数id

6、利用消息订阅修改修改Item组件的删除事件

不推荐消息订阅，全局事件总线更好

首先，Item删除事件，是根据事件Id，并且需要将Id传到App组件当中（删除函数handleDelete在App中），5中已经用全局事件总线写了删除了，这里改写就行，简单

首先App和Item当中引入js库，

App组件中

 Item组件中

 7、新增事件编辑功能

鼠标悬浮在事件上时添加一个新编辑按钮，点击后时间文字变到输入框内且可以修改（鼠标移出输入框即表示修改完成，同时事件名也被修改）。注意，鼠标焦点事情很多，如点击编辑后出现input框（同时编辑按钮消失），这时焦点应该自动到input输入框内

前端是数据驱动页面，此时数据是todo.title。并且todo需要新属性todo.isEdit来判断此时事件是否处于被编辑的状态，来判断是否正常展示或者以输入框显示。

首先因为或许会用到全局事件总线，所以说main.js内安装.......

1、confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。

如果访问者点击"确定"，此方法返回true，否则返回false。

2、hasOwnProperty(propertyName)方法 是用来检测属性是否为对象的自有属性，如果是，返回true，否者false

3、@blur ：当 <input> 字段失去焦点时发生 blur 事件，常与 focus() 方法一起使用。

4、trim() 函数移除字符串两侧的空白字符或其他预定义字符（下面加上判断输入空更严谨）

5、$nextTick（回调函数）：其作用是这一轮不执行，要等下一轮，即在DOM节点更新完后再执行其中的回调即函数

6、this.$set(原数组, 索引值, 需要赋的值)：数据没有被双向绑定的时候，需要使用set

vue中$set用法详细讲解_Oralinge的博客-CSDN博客

App.vue代码

  1. <template>
  2. 	<div id="root">
  3. 		<div class="todo-container">
  4. 			<div class="todo-wrap">
  5. 				<MyHeader @addTodo="addTodo"/>
  6. 				<MyList :todos="todos"/>
  7. 				<MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
  8. 			</div>
  9. 		</div>
  10. 	</div>
  11. </template>
  12.  
  13. <script>
  14. 	import pubsub from 'pubsub-js'
  15. 	import MyHeader from './components/MyHeader'
  16. 	import MyList from './components/MyList'
  17. 	import MyFooter from './components/MyFooter'
  18.  
  19. 	export default {
  20. 		name:'App',
  21. 		components:{MyHeader,MyList,MyFooter},
  22. 		data() {
  23. 			return {
  24. 				//由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
  25. 				todos:JSON.parse(localStorage.getItem('todos')) || []
  26. 			}
  27. 		},
  28. 		methods: {
  29. 			//添加一个todo
  30. 			addTodo(todoObj){
  31. 				this.todos.unshift(todoObj)
  32. 			},
  33. 			//勾选or取消勾选一个todo
  34. 			checkTodo(id){
  35. 				this.todos.forEach((todo)=>{
  36. 					if(todo.id === id) todo.done = !todo.done
  37. 				})
  38. 			},
  39. 			//更新一个todo
  40. 			updateTodo(id,title){
  41. 				this.todos.forEach((todo)=>{
  42. 					if(todo.id === id) todo.title = title
  43. 				})
  44. 			},
  45. 			//删除一个todo
  46. 			deleteTodo(_,id){
  47. 				this.todos = this.todos.filter( todo => todo.id !== id )
  48. 			},
  49. 			//全选or取消全选
  50. 			checkAllTodo(done){
  51. 				this.todos.forEach((todo)=>{
  52. 					todo.done = done
  53. 				})
  54. 			},
  55. 			//清除所有已经完成的todo
  56. 			clearAllTodo(){
  57. 				this.todos = this.todos.filter((todo)=>{
  58. 					return !todo.done
  59. 				})
  60. 			}
  61. 		},
  62. 		watch: {
  63. 			todos:{
  64. 				deep:true,
  65. 				handler(value){
  66. 					localStorage.setItem('todos',JSON.stringify(value))
  67. 				}
  68. 			}
  69. 		},
  70. 		mounted() {
  71. 			this.$bus.$on('checkTodo',this.checkTodo)
  72. 			this.$bus.$on('updateTodo',this.updateTodo)
  73. 			this.pubId = pubsub.subscribe('deleteTodo',this.deleteTodo)
  74. 		},
  75. 		beforeDestroy() {
  76. 			this.$bus.$off('checkTodo')
  77. 			this.$bus.$off('updateTodo')
  78. 			pubsub.unsubscribe(this.pubId)
  79. 		},
  80. 	}
  81. </script>

 MyItem.vue代码

  1. <template>
  2. 	<li>
  3. 		<label>
  4. 			<input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
  5. 			<!-- 注意下面的v-show控制这些部件的显示与否 -->
  6. 			<span v-show="!todo.isEdit">{{todo.title}}</span>
  7. 			<input 
  8. 				type="text" 
  9. 				v-show="todo.isEdit" 
  10. 				:value="todo.title" 
  11. 				@blur="handleBlur(todo,$event)"<!-- 两个参数，下面有用 -->
  12. 				ref="inputTitle"
  13. 			>
  14. 		</label>
  15. 		<button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
  16. 		<button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button>
  17. 	</li>
  18. </template>
  19.  
  20. <script>
  21. 	import pubsub from 'pubsub-js'
  22. 	export default {
  23. 		name:'MyItem',
  24. 		//声明接收todo
  25. 		props:['todo'],
  26. 		methods: {
  27. 			//勾选or取消勾选
  28. 			handleCheck(id){
  29. 				//通知App组件将对应的todo对象的done值取反
  30. 				this.$bus.$emit('checkTodo',id)
  31. 			},
  32. 			//删除
  33. 			handleDelete(id){
  34. 				if(confirm('确定删除吗？')){
  35. 					//通知App组件将对应的todo对象删除
  36. 					pubsub.publish('deleteTodo',id)
  37. 				}
  38. 			},
  39. 			//编辑
  40. 			handleEdit(todo){
  41. 				//hasOwnProperty:判断该todo内有没有idEdit属性，有就直接变true
  42. 				if(todo.hasOwnProperty('isEdit')){
  43. 					todo.isEdit = true
  44. 				}else{
  45. 					//没有就需要添加属性，用下面的方式添加才能保证isEdit是响应式的，不然是死数据
  46. 					this.$set(todo,'isEdit',true)
  47. 				}
  48. 				//上面是把文字变成输入框，下面是输入框获取焦点
  49. 				//this.$nextTick必须加，因为vue是等编辑函数执行完了才渲染页面，导致下main获取焦点代码执行时页面上无东西可执行
  50. 				//this.$nextTick：其作用是这一轮不执行，要等下一轮，即在DOM节点更新完后再执行
  51. 				this.$nextTick(function(){
  52. 					this.$refs.inputTitle.focus()
  53. 				})
  54. 			},
  55. 			//失去焦点回调（真正执行修改逻辑）,要获取输入框的内容handleBlur(todo,$event)有第二个参数即通过下面的e表示该事件对象即input输入框
  56. 			//触发updateTodo后返回id和输入框的值
  57. 			//失去焦点即isEdit为false，但是要确保事件名不能被修改为空，为空则不能触发最后一行真正的修改功能
  58. 			handleBlur(todo,e){
  59. 				todo.isEdit = false
  60. 				if(!e.target.value.trim()) return alert('输入不能为空！')
  61. 				this.$bus.$emit('updateTodo',todo.id,e.target.value)
  62. 			}
  63. 		},
  64. 	}
  65. </script>

8、新增动画、过度效果

QQ录屏20230828170755

添加和删除事件时有一个缓慢消失的过程

首先分析应该把动画写在哪里：Item和List都可以但是写法会有所不同

Item当中：

List当中：

组件List内嵌套了Item。我们发现，可以直接在List当中，因为List当中的<template>内也有Item代码。在MyList组件内

  1. <template>
  2. 	<ul class="todo-main">
  3. 		<transition-group name="todo" appear>
  4.            <!--  注意这只写了一个Item，然后通过v-for遍历生成事件列表，有多少个事件就会生成多少个MyItem，所以说上面使用的是transition-group, 并且也自带了key-->
  5. 			<MyItem 
  6. 				v-for="todoObj in todos"
  7. 				:key="todoObj.id" 
  8. 				:todo="todoObj" 
  9. 			/>
  10. 		</transition-group>
  11. 	</ul>
  12. </template>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/223856
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号