vue3 todolist 简单例子

于 2024-06-02 22:12:52 发布
阅读量1.2k 收藏 23
点赞数 14
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pacong/article/details/139392805
版权

vue3 简单的TodList
地址： https://gitee.com/cheng_yong_xu/vue3-composition-api-todo-app-my

效果
在这里插入图片描述

step-1

初始化项项目
在这里插入图片描述
我们不采用vue cli 搭建项目

直接将上图文件夹，复制到vscode编辑器，清空App.vue的内容

安装包

# 安装包
npm i
# 启动
npm run serve

在这里插入图片描述

step-2

先写样式结构
在这里插入图片描述

<!-- src\App.vue -->
<template>
	<h1>ToDo App</h1>
	<form>
		<label for="">添加待办项</label>
		<input type="text" name="newTodo" autocomplete="off" />
		<button>添 加</button>
	</form>

	<h2>待办列表</h2>
	<ul>
		<li>
			<span>代办列表</span>
			<button>删 除</button>
		</li>
	</ul>
</template>

<script>
export default {}
</script>

<style lang="scss">
$size1: 6px;
$size2: 12px;
$size3: 18px;
$size4: 24px;
$size5: 48px;
$backgroundColor: #27292d;
$primaryColor: #EC23F3;
$secondTextColor: #1f2023;

$border: 2px solid rgba($color: white,
		$alpha: 0.35,
	);

$textColor: white;
$border_r: 2px solid red;
$border_y: 2px solid rgb(241, 229, 50);
$border_g: 2px solid rgb(50, 241, 50);
$border_w: 2px solid white;

body {
	margin: 0;
	padding: 0;
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: $backgroundColor;
	color: $textColor;

	#app {
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
		padding: 20px;
		// border: $border_w;

		h1 {
			font-weight: bold;
			font-size: 28px;
			text-align: center;
			// border: $border_r;
		}

		form {
			display: flex;
			flex-direction: column;
			width: 100%;

			label {
				font-size: 14px;
				font-weight: bold;
			}

			input,
			button {
				height: $size5;
				box-shadow: none;
				outline: none;
				padding-left: $size2;
				padding-right: $size2;
				border-radius: $size1;
				font-size: 18px;
				margin-top: $size1;
				margin-bottom: $size2;
				transition: all 0.2s ease-in-out;
				/* 添加过渡效果，使变化平滑 */
			}

			input {
				background-color: transparent;
				border: $border;
				color: inherit;
			}

			input:hover {
				border: 2px solid rgb(236, 35, 243);
			}

			button {
				cursor: pointer;
				background-color: rgb(236, 35, 243);
				border: 1px solid $primaryColor;
				font-weight: bold;
				color: white;
				border-radius: $size1;
			}
		}

		h2 {
			// border: $border_g;
			font-size: 22px;
			border-bottom: $border;
			padding-bottom: $size1;

		}

		ul {
			padding: 10px;

			li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border: $border;
				padding: 10px;
				border-radius: $size1;
				margin-bottom: $size2;

				span {
					cursor: pointer;
				}

				button {
					cursor: pointer;
					font-size: $size2;
					background-color: rgb(236, 35, 243);
					border: 1px solid $primaryColor;
					font-weight: bold;
					color: white;
					padding: 5px 15px;
					border-radius: $size1;
				}
			}
		}
	}
}
</style>

step-3

双向绑定数据

<!-- src\App.vue -->
<template>
	<h1>ToDo App</h1>
	<form @submit.prevent="addTodo()">
		<label for="">添加待办项</label>
		<input type="text" name="newTodo" autocomplete="off" v-model="newTodo"/>
		<button>添 加</button>
	</form>

	<h2>待办列表</h2>
	<ul>
		<li>
			<span>代办列表</span>
			<button>删 除</button>
		</li>
	</ul>
</template>

<script>
import {ref } from 'vue';
export default {
	name: 'App',
	setup(){
		const newTodo = ref('');

		function addTodo(){
			if(newTodo.value){
				console.log(newTodo.value);
			}
		}

		return {
			newTodo,
			addTodo
		}
	}
}
</script>

在这里插入图片描述

step-4

定义数据并将数据变成响应式的
将数据持久化到本地

定义数据并将数据变成响应式的


<script>
import { ref } from 'vue';
export default {
	name: 'App',
	setup() {
		const newTodo = ref('');
		const defaultData = ref([
			{
				done: false,
				content: '今天要学习Vue'
			}
		]);

		const todos = ref(defaultData);

		function addTodo() {
			if (newTodo.value) {
				todos.value.push({
					done: false,
					content: newTodo.value
				})
			}
			console.log(todos.value)
		}

		return {
			newTodo,
			addTodo
		}
	}
}
</script>

在这里插入图片描述

将数据持久化到本地

<script>
import { ref } from 'vue';
export default {
	name: 'App',
	setup() {
		const newTodo = ref('');
		const defaultData = ref([
			{
				done: false,
				content: '今天要学习Vue'
			}
		]);

		const todos = ref(defaultData);

		function addTodo() {
			if (newTodo.value) {
				todos.value.push({
					done: false,
					content: newTodo.value
				})
			}
			saveData()
			console.log(sessionStorage.getItem('todos'))
		}

		function saveData () {
			const storageData = JSON.stringify(todos.value)
			sessionStorage.setItem('todos', storageData)
		}

		return {
			newTodo,
			addTodo
		}
	}
}
</script>

在这里插入图片描述

step-5

渲染待办列表

	<h2>待办列表</h2>
	<ul>
		<li v-for="(todo, index) in todos" :key="index">
			<span>{{ todo.content }}</span>
			<button>删 除</button>
		</li>
	</ul>

在这里插入图片描述
点击文字划横线
点击删除从待办列表移除

<!-- src\App.vue -->
<template>
	<h1>ToDo App</h1>
	<form @submit.prevent="addTodo()">
		<label for="">添加待办项</label>
		<input type="text" name="newTodo" autocomplete="off" v-model="newTodo" />
		<button>添 加</button>
	</form>

	<h2>待办列表</h2>
	<ul>
		<li v-for="(todo, index) in todos" :key="index">
			<span
			:class="{ done: todo.done }"
			@click="todo.done = !todo.done"
			>{{ todo.content }}</span>
			<button @click="removeTodo(index)">删 除</button>
		</li>
	</ul>
</template>

<script>
import { ref } from 'vue';
export default {
	name: 'App',
	setup() {
		const newTodo = ref('');
		const defaultData = ref([
			{
				done: false,
				content: '今天要学习Vue'
			}
		]);

		const todos = ref(defaultData);

		function addTodo() {
			if (newTodo.value) {
				todos.value.push({
					done: false,
					content: newTodo.value
				})
				newTodo.value = ''
			}
			saveData()
			console.log(sessionStorage.getItem('todos'))
		}

		function removeTodo(index) {
			todos.value.splice(index, 1)
			saveData()
		}
		function saveData() {
			const storageData = JSON.stringify(todos.value)
			sessionStorage.setItem('todos', storageData)
		}

		return {
			newTodo,
			todos,
			addTodo,
			removeTodo
		}
	}
}
</script>
<style lang="scss">
$size1: 6px;
$size2: 12px;
$size3: 18px;
$size4: 24px;
$size5: 48px;
$backgroundColor: #27292d;
$primaryColor: #EC23F3;
$secondTextColor: #1f2023;

$border: 2px solid rgba($color: white,
		$alpha: 0.35,
	);

$textColor: white;
$border_r: 2px solid red;
$border_y: 2px solid rgb(241, 229, 50);
$border_g: 2px solid rgb(50, 241, 50);
$border_w: 2px solid white;

body {
	margin: 0;
	padding: 0;
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: $backgroundColor;
	color: $textColor;

	#app {
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
		padding: 20px;
		// border: $border_w;

		h1 {
			font-weight: bold;
			font-size: 28px;
			text-align: center;
			// border: $border_r;
		}

		form {
			display: flex;
			flex-direction: column;
			width: 100%;

			label {
				font-size: 14px;
				font-weight: bold;
			}

			input,
			button {
				height: $size5;
				box-shadow: none;
				outline: none;
				padding-left: $size2;
				padding-right: $size2;
				border-radius: $size1;
				font-size: 18px;
				margin-top: $size1;
				margin-bottom: $size2;
				transition: all 0.2s ease-in-out;
				/* 添加过渡效果，使变化平滑 */
			}

			input {
				background-color: transparent;
				border: $border;
				color: inherit;
			}

			input:hover {
				border: 2px solid rgb(236, 35, 243);
			}

			button {
				cursor: pointer;
				background-color: rgb(236, 35, 243);
				border: 1px solid $primaryColor;
				font-weight: bold;
				color: white;
				border-radius: $size1;
			}
		}

		h2 {
			// border: $border_g;
			font-size: 22px;
			border-bottom: $border;
			padding-bottom: $size1;

		}

		ul {
			padding: 10px;

			li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border: $border;
				padding: 10px;
				border-radius: $size1;
				margin-bottom: $size2;

				span {
					cursor: pointer;
				}
				.done {
					text-decoration: line-through;
				}

				button {
					cursor: pointer;
					font-size: $size2;
					background-color: rgb(236, 35, 243);
					border: 1px solid $primaryColor;
					font-weight: bold;
					color: white;
					padding: 5px 15px;
					border-radius: $size1;
				}
			}
		}
		h4 {
			text-align: center;
			opacity: 0.5;
			margin: 0;
		}
	}
}
</style>

在这里插入图片描述

step-6

目前我们的数据虽然存在本地，但是我们使用的是内存中的数据，应该使用本地的数据
关闭浏览器再打开看到的还是和关闭之前一样的数据

<template>
	<h1>ToDo App</h1>
	<form @submit.prevent="addTodo()">
		<label>New ToDo </label>
		<input
			v-model="newTodo"
			name="newTodo"
			autocomplete="off"
		>
		<button>Add ToDo</button>
	</form>
	<h2>ToDo List</h2>
	<ul>
		<li
			v-for="(todo, index) in todos"
			:key="index"
		>
			<span
				:class="{ done: todo.done }"
				@click="doneTodo(todo)"
			>{{ todo.content }}</span>
			<button @click="removeTodo(index)">Remove</button>
		</li>
	</ul>
	<h4 v-if="todos.length === 0">Empty list.</h4>
</template>

<script>
	import { ref } from 'vue';
	export default {
		name: 'App',
		setup () {
			const newTodo = ref('');
			const defaultData = [{
				done: false,
				content: 'Write a blog post'
			}]
			const todosData = JSON.parse(localStorage.getItem('todos')) || defaultData;
			const todos = ref(todosData);
			function addTodo () {
				if (newTodo.value) {
					todos.value.push({
						done: false,
						content: newTodo.value
					});
					newTodo.value = '';
				}
				saveData();
			}

			function doneTodo (todo) {
				todo.done = !todo.done
				saveData();
			}

			function removeTodo (index) {
				todos.value.splice(index, 1);
				saveData();
			}

			function saveData () {
				const storageData = JSON.stringify(todos.value);
				localStorage.setItem('todos', storageData);
			}

			return {
				todos,
				newTodo,
				addTodo,
				doneTodo,
				removeTodo,
				saveData
			}
		}
	}
</script>

<style lang="scss">
$border: 2px solid
	rgba(
		$color: white,
		$alpha: 0.35,
	);
$size1: 6px;
$size2: 12px;
$size3: 18px;
$size4: 24px;
$size5: 48px;
$backgroundColor: #27292d;
$textColor: white;
$primaryColor: #a0a4d9;
$secondTextColor: #1f2023;
body {
	margin: 0;
	padding: 0;
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: $backgroundColor;
	color: $textColor;
	#app {
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
		padding: 20px;
		h1 {
			font-weight: bold;
			font-size: 28px;
			text-align: center;
		}
		form {
			display: flex;
			flex-direction: column;
			width: 100%;
			label {
				font-size: 14px;
				font-weight: bold;
			}
			input,
			button {
				height: $size5;
				box-shadow: none;
				outline: none;
				padding-left: $size2;
				padding-right: $size2;
				border-radius: $size1;
				font-size: 18px;
				margin-top: $size1;
				margin-bottom: $size2;
			}
			input {
				background-color: transparent;
				border: $border;
				color: inherit;
			}
		}
		button {
			cursor: pointer;
			background-color: $primaryColor;
			border: 1px solid $primaryColor;
			color: $secondTextColor;
			font-weight: bold;
			outline: none;
			border-radius: $size1;
		}
		h2 {
			font-size: 22px;
			border-bottom: $border;
			padding-bottom: $size1;
		}
		ul {
			padding: 10px;
			li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border: $border;
				padding: $size2 $size4;
				border-radius: $size1;
				margin-bottom: $size2;
				span {
					cursor: pointer;
				}
				.done {
					text-decoration: line-through;
				}
				button {
					font-size: $size2;
					padding: $size1;
				}
			}
		}
		h4 {
			text-align: center;
			opacity: 0.5;
			margin: 0;
		}
	}
}
</style>
pacong
关注
专栏目录
vue的todoList案例
m0_55916923的博客
08-30 1405
todolist案例
vue3 使用脚手架 实现todolist
m0_74830901的博客
04-26 886
-v-model:模板指令，与script中data下的inputValue双向绑定-->this.$emit('delete', this.index) ////向外触发名称为delete的事件，对应值为index，与父组件形成发布--订阅模式。import TodoItem from './components/TodoItem.vue' //引用其他组件。import App from './TodoList.vue' //从一个单文件组件中导入根组件。
vue3-todo-list:vue3 todolist示例
03-09
Vue3 TodoList示例 技术栈 vue3.0 恶作剧 尾风
用vue3做一个todoList
one的博客
06-24 3031
1.用户输入新增的事项点击回车或者添加，事项列表中显示当前添加的事项。 2.事项分为，所有事项、未办事项、已完成事项。新增的事项默认为未办事项。 3.事项的状态：已完成和未办可相互转换。 4.事项可删除。...
本地储存(设置和获取信息)
weixin_33755554的博客
12-14 426
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
用Vue3.0写出一个简单的TodoList案例
fang_my的博客
06-10 1493
由于工作需要，以后可能会敲vue代码了，所以今天开始会零散的记录一下自己学Vue3.0的一些案例。 就从经典的TodoList案例开始吧～ 也算补上之前react的todolist案例的坑吧🎁简单的在草稿纸上写出页面的整体设计思路为3层div包裹，希望刚开始学习的时候，一定要自己去实际动手去画出大概的效果图。再简单不过的页面设计了。一.在vue的template标签中编写html文件根据上面的草图来写出简单的结构，非常简单的代码。三个来完成草稿的大概实现。设计静态页面为下图所示。二.最首先的功能就是，如何.
vue3的todoList案例
weixin_45956230的博客
09-27 979
vue3的练习demo 1、todo.vue 父组件 <template> <!--子传父用自定义事件，父传子用自定义属性--> <todo-header @addTask="addTask"></todo-header> <todo-list :arrTask="arrTask" @delTask="delTask"></todo-list> </template> <script> //引入两
vue实现ToDoList简单实例
08-31
在本实例中，我们将探讨如何使用Vue.js创建一个简单的ToDoList应用，该应用包含添加任务、删除任务和全选删除功能。下面将详细阐述实现这个功能的关键步骤和涉及的技术。 首先，我们需要为页面添加基本的Bootstrap...
vue实现todolist功能、todolist组件拆分及todolist的删除功能
10-17
首先，让我们看一个简单的TodoList功能的实现。在HTML中，我们有一个`<input>`元素和一个提交按钮，它们分别与Vue实例的数据属性`inputValue`和`list`双向绑定。用户在输入框中输入待办事项，点击提交按钮后，`input...
利用vue写todolist单页应用
08-31
在本教程中，我们将创建一个简单的todolist应用，使用Vue.js进行编写。Vue.js的引入通常是通过CDN或者本地文件系统，本例中直接在HTML中引入了vue.js和bootstrap的CSS库，以便提供基本的样式支持。由于没有使用vue-...
vue3+ts入门（todolist案例）
02-10
vue3+ts入门（todolist案例）
TodoList_Vue3:基于Vue3的TodoList应用
03-26
TodoList_Vue3 基于Vue3的TodoList应用
vue-todolist:全部清单
05-25
在"Vue-todolist"项目中，我们看到的是使用Vue.js实现的一个简单但功能完备的任务列表应用。这个项目旨在帮助开发者理解Vue的核心概念，如组件、数据绑定、事件处理以及如何组织一个Vue应用的基本结构。 首先，让...
Vue3+vite+ts实现TodoList(详)
weixin_73810008的博客
01-08 693
呜呜呜这个ToDoList真的很好看
Vue3新特性实现简单TodoList
Gaozhengw的博客
03-31 623
Vue3新特性实现简单TodoList
vue3基础练习之todoList
weixin_64740434的博客
07-30 583
【代码】vue3基础练习之todoList。
vue3制作简易版todolist（学习笔记）
weixin_44858541的博客
12-07 1236
知识点 使用vue3开发todolist compositionapi 使用vue3开发todolist 定义一个文本框，用来输入todo事件，并且为这个文本框绑定输入事件 <script> const myview=Vue.creatApp({ template:'<div> <input :value="inputvalue"@input="handleInputChange"/> ..
[Vue3实操] 开发Todo List
weixin_30230009的博客
04-06 2783
前言使用Vue3最新的Composition API，开发一个Todo List应用。Todo List应用比较简单，不会使用其他复杂的Vue3组件，但这也使得当前应用与真实的应用脱钩，所以本文重点是体会Vue3的最新语法，下篇文章会阅读element-plus-admin开源项目的源码，从而掌握Vue3目前最近技术栈的使用方式。所谓Todo List应用主要用于记录你需...
地级市GDP及产业结构数据-最新.zip
最新发布
11-14
地级市GDP及产业结构数据-最新.zip
Vue todolist组件实例详析与功能展示
Vue组件编写之todolist组件实例详解是一篇深入讲解如何在Vue项目中创建和使用自定义组件的教程。文章主要关注于一个名为`todolist`的组件实例，该组件用于管理待办事项列表。以下是主要内容的详细阐述： 1. **组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值