Vue实例-Todo-list案例

anxiangzsq

已于 2024-02-28 19:27:46 修改

阅读量407

点赞数

文章标签： vue.js 前端 javascript

于 2023-08-10 10:19:27 首次发布

本文链接：https://blog.csdn.net/anxiangzsq/article/details/132159308

版权

基本效果图

组件化编码流程(通用)
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不一样的数据

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

所以说代码直接看即可，这里说一下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

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

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

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

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

        props:['todos'],
		computed: {
			isAll:{
				//isAll被修改时set被调用
				set(value){
					// this.checkAllTodo(value)
					this.$emit('checkAllTodo',value)
				}
			}
		},
		methods: {
			//清空所有已完成
			clearAll(){
				// this.clearAllTodo()
				this.$emit('clearAllTodo')
			}
		},

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

<template>
	<div id="root">
		<div class="todo-container">
			<div class="todo-wrap">
				<MyHeader @addTodo="addTodo"/>
				<MyList :todos="todos"/>
				<MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
			</div>
		</div>
	</div>
</template>

<script>
	import pubsub from 'pubsub-js'
	import MyHeader from './components/MyHeader'
	import MyList from './components/MyList'
	import MyFooter from './components/MyFooter'

	export default {
		name:'App',
		components:{MyHeader,MyList,MyFooter},
		data() {
			return {
				//由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
				todos:JSON.parse(localStorage.getItem('todos')) || []
			}
		},
		methods: {
			//添加一个todo
			addTodo(todoObj){
				this.todos.unshift(todoObj)
			},
			//勾选or取消勾选一个todo
			checkTodo(id){
				this.todos.forEach((todo)=>{
					if(todo.id === id) todo.done = !todo.done
				})
			},
			//更新一个todo
			updateTodo(id,title){
				this.todos.forEach((todo)=>{
					if(todo.id === id) todo.title = title
				})
			},
			//删除一个todo
			deleteTodo(_,id){
				this.todos = this.todos.filter( todo => todo.id !== id )
			},
			//全选or取消全选
			checkAllTodo(done){
				this.todos.forEach((todo)=>{
					todo.done = done
				})
			},
			//清除所有已经完成的todo
			clearAllTodo(){
				this.todos = this.todos.filter((todo)=>{
					return !todo.done
				})
			}
		},
		watch: {
			todos:{
				deep:true,
				handler(value){
					localStorage.setItem('todos',JSON.stringify(value))
				}
			}
		},
		mounted() {
			this.$bus.$on('checkTodo',this.checkTodo)
			this.$bus.$on('updateTodo',this.updateTodo)
			this.pubId = pubsub.subscribe('deleteTodo',this.deleteTodo)
		},
		beforeDestroy() {
			this.$bus.$off('checkTodo')
			this.$bus.$off('updateTodo')
			pubsub.unsubscribe(this.pubId)
		},
	}
</script>

MyItem.vue代码

<template>
	<li>
		<label>
			<input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
			<!-- 注意下面的v-show控制这些部件的显示与否 -->
			<span v-show="!todo.isEdit">{{todo.title}}</span>
			<input 
				type="text" 
				v-show="todo.isEdit" 
				:value="todo.title" 
				@blur="handleBlur(todo,$event)"<!-- 两个参数，下面有用 -->
				ref="inputTitle"
			>
		</label>
		<button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
		<button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button>
	</li>
</template>

<script>
	import pubsub from 'pubsub-js'
	export default {
		name:'MyItem',
		//声明接收todo
		props:['todo'],
		methods: {
			//勾选or取消勾选
			handleCheck(id){
				//通知App组件将对应的todo对象的done值取反
				this.$bus.$emit('checkTodo',id)
			},
			//删除
			handleDelete(id){
				if(confirm('确定删除吗？')){
					//通知App组件将对应的todo对象删除
					pubsub.publish('deleteTodo',id)
				}
			},
			//编辑
			handleEdit(todo){
				//hasOwnProperty:判断该todo内有没有idEdit属性，有就直接变true
				if(todo.hasOwnProperty('isEdit')){
					todo.isEdit = true
				}else{
					//没有就需要添加属性，用下面的方式添加才能保证isEdit是响应式的，不然是死数据
					this.$set(todo,'isEdit',true)
				}
				//上面是把文字变成输入框，下面是输入框获取焦点
				//this.$nextTick必须加，因为vue是等编辑函数执行完了才渲染页面，导致下main获取焦点代码执行时页面上无东西可执行
				//this.$nextTick：其作用是这一轮不执行，要等下一轮，即在DOM节点更新完后再执行
				this.$nextTick(function(){
					this.$refs.inputTitle.focus()
				})
			},
			//失去焦点回调（真正执行修改逻辑）,要获取输入框的内容handleBlur(todo,$event)有第二个参数即通过下面的e表示该事件对象即input输入框
			//触发updateTodo后返回id和输入框的值
			//失去焦点即isEdit为false，但是要确保事件名不能被修改为空，为空则不能触发最后一行真正的修改功能
			handleBlur(todo,e){
				todo.isEdit = false
				if(!e.target.value.trim()) return alert('输入不能为空！')
				this.$bus.$emit('updateTodo',todo.id,e.target.value)
			}
		},
	}
</script>

8、新增动画、过度效果

QQ录屏20230828170755

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

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

Item当中：

List当中：

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

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

anxiangzsq

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Vue实例-Todo-list案例

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

扫一扫