学习Vue 做一个简单的Todo List

最新推荐文章于 2024-04-08 15:45:39 发布
最新推荐文章于 2024-04-08 15:45:39 发布
阅读量767 收藏
点赞数 1
分类专栏： vue JavaScript 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/devilangelia/article/details/120013196
版权

目录

一、创建Vue项目

创建项目的方式有很多，这就简单的说两种吧：
1、命令行创建
win+r 输入cmd 回车 cd进入你要创建的目录
输入下面的命令，遇到需要确认的地方按回车就行了，一般没有什么问题

vue init webpack todolist // todolist是项目名称

创建成功以后
进入项目里面安装依赖运行

cd todolist
npm install // yarn 或  cnpm install
npm run dev

2、如果使用的HBuilder开发工具，可以直接在工具中创建项目
点击左上角的文件->新建->项目
输入名称，选好文件夹，点击创建就可以了
在这里插入图片描述
项目创建完成后
1、在src目录下新建pages文件夹，里面创建todolist.vue文件
2、配置路由：
1）安装 npm i router
2）在src目录下新建router文件夹，再创建一个index.js文件用来配置路由

import Vue from "vue"
import Router from "vue-router"
Vue.use(Router)

import Index from '@/pages/todoist'

const router = new Router({
	mode: 'history',
	routes: [
		{
			path: '/',
			name: 'index',
			component: Index
		},
	]
})

export default router

3）main.js文件中引入路由

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import VueRouter from 'vue-router'

Vue.config.productionTip = false
Vue.use(VueRouter)

new Vue({
	router,
	render: h => h(App)
}).$mount('#app')

最终
项目文件如下：
在这里插入图片描述

二、组件

todolist可以分为三个板块
1、头部（添加输入栏目）
2、列表（添加栏目列表）
3、底部（按钮等）
我们可以将这三个板块拆分成三个组件：

1、在todolist文件夹下新建components文件夹
2、在文件夹下新建三个组件：
todoHeader, todoItem, todoFooter
3、引入组件

import todoHeader from './components/todoHeader.vue'
import todoItem from './components/todoItem.vue'
import todoFooter from './components/todoFooter.vue'
export default {
	components: {
		todoHeader,
		todoItem,
		todoFooter
	},
	data() {
		return {}
	},
	methods: {}
}

三、组件代码

index.vue

<template>
	<div class="page flex">
		<div class="card">
			<h1>Todo List</h1>
			<todoHeader @confirm="confirm" />
			<todoItem :list="list" @change="changeList" />
			<todoFooter :list="list" @change="allChange" @delete="show_confirm" />
		</div>
	</div>
</template>

<script>
	import todoHeader from './components/todoHeader.vue'
	import todoItem from './components/todoItem.vue'
	import todoFooter from './components/todoFooter.vue'
	export default {
		components: {
			todoHeader,
			todoItem,
			todoFooter
		},
		data() {
			return {
				list: [
					// {
					// 	value: '吃饭',
					// 	checked: false
					// },
					// {
					// 	value: '睡觉',
					// 	checked: false
					// }
				]
			}
		},
		methods: {
			changeList({checked, index}) {
				this.list[index].checked = checked
			},
			confirm(value) {
				this.list.push({
					value,
					checked: false
				})
			},
			allChange(checked) {
				this.list.map(item => {
					item.checked = checked
				})
			},
			show_confirm() {
				if (this.list.length > 0) {
					let flag = false
					this.list.map(item => {
						if (item.checked) {
							flag = true
						}
					})
					if (flag) {
						let modal = confirm("确定要删除已经完成的任务吗?");
						if (modal) {
							this.del()
						}
					} else {
						alert('只能删除已经完成的任务!')
					}
				} else {
					alert('没有可删除的任务!')
				}
				
			},
			del() {
				let arr = []
				this.list.map((item, index) => {
					if (!item.checked) {
						arr.push(item)
					}
				})
				
				this.list = arr
			}
		}
	}
</script>

<style>
	.page{
		width: 100%;
		margin-top: 50px;
		justify-content: center;
	}
	
	.flex{
		display: flex;
		align-items: center;
	}
	
	.flex-1{
		flex: 1;
	}
	
	.card{
		width: 500px;
		padding: 15px 16px;
		border-radius: 4px;
		border: 1px solid #DCDFE6;
	}
	
	.card:hover{
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
	}
	
	h1{
		text-align: center;
		margin-bottom: 20px;
	}
</style>

todoHeader.vue

<template>
	<div class="header flex">
		<div class="inputs flex-1" :class="isfocus ? 'focus' :''">
			<input placeholder="请输入你的任务名称,按回车键确定" class="input" type="text" v-model="value" @focus="focus" @blur="blur" @keyup.enter="confirm" />
		</div>
		<button v-show="isfocus" class="btn" type="button">Add</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isfocus: false,
				value: ''
			}
		},
		methods: {
			focus() {
				this.isfocus = true
			},
			blur() {
				this.isfocus = false
			},
			confirm() {
				this.$emit('confirm', this.value)
				this.value = ''
			}
		}
	}
</script>

<style>
	.header{
		width: 100%;
		margin-bottom: 20px;
		justify-content: space-between;
	}
	
	.inputs{
		border-radius: 4px;
		border: 1px solid #DCDFE6;
		padding: 6px 10px;
	}
	
	.inputs.focus{
		border: 1px solid #409EFF;
		box-shadow: 0 1px 8px 0 rgba(64, 158, 255, 0.4)
	}
	
	.input{
		width: 100%;
		height: 20px;
	}
	
	.btn{
		padding: 6px 10px;
		background-color: red;
		color: #FFFFFF;
		border-radius: 4px;
		cursor: pointer;
		margin-left: 20px;
	}
	
	.btn:hover{
		background-color: #F56C6C;
	}
</style>

todoItem.vue

<template>
	<div class="list">
		<ul v-if="list.length">
			<li class="flex" v-for="(item, index) in list" :key="index">
				<div class="flex-1" @click="change(!item.checked, index)">
					<input class="checkbox" type="checkbox" :value="item.value" v-model="item.checked" @change.stop="change(item.checked, index)" />
					<label class="label">{{ item.value }}</label>
				</div>
				<div v-if="item.checked" style="color: #C0C4CC;">已完成</div>
			</li>
		</ul>
		<div class="empty flex" v-else>
			<span>暂无任务</span>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: []
			}
		},
		data() {
			return {}
		},
		methods: {
			change(checked, index) {
				this.$emit('change', {checked, index})
			}
		}
	}
</script>

<style>
	.list{
		width: 100%;
		margin-bottom: 20px;
	}
	
	ul{
		width: 100%;
		border-radius: 4px;
		border: 1px solid #DCDFE6;
	}
	
	li{
		padding: 0 10px;
		border-bottom: 1px solid #DCDFE6;
		justify-content: space-between;
		cursor: pointer;
	}
	
	li > div{
		padding: 8px 0;
	}
	
	li > div >  .label{
		margin-left: 8px;
		font-size: 14px;
		line-height: 14px;
	}
	
	li:last-child{
		border-bottom: none;
	}
	
	li:hover{
		color: #409eff;
		background-color: #ecf5ff;
	}
	
	.empty{
		justify-content: center;
		width: 100%;
		height: 50px;
	}
	
	.empty span{
		color: #C0C4CC;
		font-size: 20px;
	}
</style>

todoFooter.vue

<template>
	<div class="footer flex">
		<div class="flex">
			<input class="checkbox" type="checkbox" value="all" v-model="checked" @change="change(checked)" />
			<label class="label">
				已完成 ({{ count }})
				/
				全部 ({{ total }})
			</label>
		</div>
		<div>
			<button class="btn" type="button" @click="del">Delete</button>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				checked: false
			}
		},
		computed: {
			total() {
				return this.list.length
			},
			count() {
				let count = 0
				this.list.map(item => {
					if (item.checked) {
						count += 1
					}
				})
				return count
			}
		},
		methods: {
			change(checked) {
				this.$emit('change', checked)
			},
			del() {
				this.$emit('delete')
			}
		}
	}
</script>

<style>
	.footer{
		width: 100%;
		justify-content: space-between;
	}
	
	.btn{
		padding: 6px 10px;
		background-color: red;
		color: #FFFFFF;
		border-radius: 4px;
		cursor: pointer;
	}
	
	.btn:hover{
		background-color: #F56C6C;
	}
	
	.label{
		margin-left: 15px;
		line-height: 14px;
		font-size: 14px;
	}
</style>

组件通信

1、父子组件之间往往是需要进行数据交互的，他们之间的数据传递的方法也有很多，这里使用的是props的方法

props: {
	list: {  // 传递的数据名称
		type: Array,  // 数据类型
		default: []  // 默认值
	}
}

2、在子组件中想要调用父组件的方法这里是采用的$emit

// 子组件中
change(checked, index) {
	this.$emit('change', {checked, index})  // 第一个参数是传递的方法名称， 第二个参数是需要项外传递的参数
}  

// 父组件中
// 通过子组件中定义的change来接收执行方法
<todoItem :list="list" @change="changeList" />

图片演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

DevilAngelia
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue学习：简单的ToDoList开发
Derrick
10-30 141
Vue学习：简单的ToDoList开发   一、知识点 1.1 v-for v-for=“item in list”，这里告诉vue需要去循环list里面的数据，循环的每一项我都放进item里面，然后利用插值表达式{{}}去使用item， <html lang="en"> <head> <meta charset="UTF-8"> ...
利用vue做一个简单的todolist
qq_50280292的博客
11-03 2133
vue
vue——制作简易版to do list
summer爱前端
05-20 493
使用vue做了一个简单的to do list ，之后想写一个全栈的to do list APP出来，目前这个demo作为一个逻辑铺垫，顺带练习vue
用vue.js写案例——ToDoList待办事项 （步骤和全码解析）
最新发布
m0_73490019的博客
04-08 4295
首先在ToDoMain组件中声明并触发自定义事件，传递参数 6 id，接着在App组件中监听自定义事件，当自定义事件被触发时，执行对应的方法，进 行删除操作，删除任务的具体实现步骤如下。单击切换状态区域时，默认状态为all，即显示全部任务，当状态切换为active时， 显示未完成的任务，当状态切换为completed时，显示已完成的任务。② 新建并封装组件。App 组件为根组件，数据在App组件中，现在需要将App根组件中的初始数据传递 到列表区域，ToDoMain组件中。
用 vue 快速做一个简单点的 TODO-LIST
赵博林
10-16 528
思路整理 主要涉及知识点: vue 如何创建并运行项目 vue create xxx; 如何定义data() { return {} }及渲染数据 {{stu}}; 如何定义移除/增添函数; 添加form表单; 提交数据; filter() 方法的使用来遍历并过滤数组; 如何阻止函数的默认行为: e.preventDefault() ; 如何拷贝对象 const stu = Object.asign({}, this.stu) ; push() 方法的使用, 为数组添加元素 清空表单 代码块 &lt
Vue自定义组件
R1SE_yao的博客
07-23 169
1.在src下的components中，新建List.vue组件 2.在新建的List.vue中，输入vue，选择第一个提示，进行基本框架的快速搭建 3、在app.vue中引用组件 第一步：引入组件 第二步：在export default中注册组件 第三步：使用组件 效果图如下： ...
Vue 组件封装之 List 列表
热门推荐
杏子
06-16 2万+
实现 List 列表布局排版。
vue 基础（一）
youhaiguo的博客
07-26 292
VUE 一. 开发工具 VUE开发环境个人推荐使用VS code, 然后安装特定的插件即可开发，可用插件如下： Vetur —— 语法高亮、智能感知、Emmet等 EsLint—— 语法纠错 Auto Close Tag —— 自动闭合HTML/XML标签 Auto Rename Tag —— 自动完成另一侧标签的同步修改 Path Intelli...
Vue系统学习(一) vue-cli3 创建项目并简单实现list增加删除功能
王小右的博客
04-11 1526
其实很早就把这几个demo代码写完了(可参照github提交时间)，现在想着把对应操作的博客给补起来, 代码全部托管在 github : https://github.com/wgPython/vue_study_demo 首先看实现效果 ...
Vue TodoList案例（组件化编程的流程）
MCCLS的博客
07-23 348
一、拆分组件(功能点)并实现静态组件 这边定义组件,并且只考虑组件的结构和样式,不考虑数据交互点击等,不包括动态的数据也不包括动态的交互 二、进行动态动态展示数据 一、这边考虑数据的时候 应该设置为[]里面为{}的形式 二、数据写在哪里,哪边要进行展示就把数据放在哪边 这边要在list里面展示出来,就写在list组件上 使用v-for和props传入数据实现数据的动态 ...
用vue的双向绑定简单实现一个todo-list的示例代码
01-19
于是乎，尝试着去实践自己学到的知识，用vue的一些基本原理实现一个简单的todo-list，完成对深度复杂对象的双向绑定以及对数组的监听，加深了对vue基本原理的印象。 github地址：todo-list 学习链接 前排感谢以下...
Vue制作Todo List网页
11-27
跟着老师学习Vue，我喜欢清爽的界面，就自己改了样式，看起来还不错，以后就用来记录要做的事情，实用性还蛮强。 Vue非常容易上手，运用到了双向绑定机制，即HTML里的DOM元素与JS里的Vue实例进行双向绑定，只要Vue...
Vue.js实现一个todo-list的上移下移删除功能
12-10
这是一个基于vue.js的一个简单的todo-list小demo。首先要实现添加非空list，点击list切换finished状态这样的一个效果，推荐学习地址—->点击打开链接 接下来是实现的一个上移，下移，删除的效果图： 删除效果： 讲...
vue-todo:一个简单的待办事项列表应用程序，用于学习Vue.js
04-18
待办事项清单 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
vue实现一个 todoList
01-20
1.实现一个todo List Hello world div#app{ margin: auto; } 确认 {{i}} var app = new Vue({ el:’#app’, data:{ list:[‘1.学习vue’,’2.学习bootstrap’], todoValue:...
Vue实战——TodoList案例(附js原生和vue源码）
2301_76885465的博客
05-12 946
分别用原生js和Vue框架实现todolist项目（附有源码）
【vue3】06. 跟着官网学习vue3
qq_17335549的博客
09-03 384
跟着官网学习vue3 ，class style的绑定，使用cs变量
vue创建汇总
学习使我快乐_玉祥
11-11 611
引入Ant-Design-Vue $ npm install ant-design-vue --save $ yarn add ant-design-vue
Vue学习 02循环创建列表
legend_lv的博客
09-13 960
<body> <div id="app"> <ul> <li v-for="item in movies">{{item}}</li> </ul> </div> <script src="../js/vue.js"></script> <script> const app=new V.
用vue3写一个todo案例
05-18
好的，下面是一个用 Vue3 写的基本的 TodoList 案例： ```html <template> <div class="todo"> <h1>Todo List</h1> <form @submit.prevent="addTodo"> <input type="text" v-model="newTodo" placeholder="Add a new todo"> <button>Add</button> </form> <ul> <li v-for="(todo, index) in todos" :key="index"> <input type="checkbox" v-model="todo.done"> <span :class="{ completed: todo.done }">{{ todo.text }}</span> <button @click="deleteTodo(index)">Delete</button> </li> </ul> </div> </template> <script> import { reactive } from 'vue'; export default { setup() { const state = reactive({ todos: [], newTodo: '', }); function addTodo() { if (state.newTodo.trim() === '') return; state.todos.push({ text: state.newTodo, done: false, }); state.newTodo = ''; } function deleteTodo(index) { state.todos.splice(index, 1); } return { ...state, addTodo, deleteTodo, }; }, }; </script> <style> .completed { text-decoration: line-through; } </style> ``` 这个 TodoList 组件有一个输入框和一个添加按钮，用于添加新的待办事项。已经添加的待办事项会显示在一个列表中，每个待办事项都有一个复选框和一个删除按钮。用户可以勾选复选框来标记已完成的任务，也可以点击删除按钮来删除任务。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

DevilAngelia

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

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

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

打赏作者

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

抵扣说明：

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

余额充值