vue3 todolist 简单例子

最新推荐文章于 2024-06-21 00:45:00 发布

pacong

最新推荐文章于 2024-06-21 00:45:00 发布

阅读量1.3k

点赞数 15

分类专栏： vue 文章标签： vue

本文链接：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

最低0.47元/天解锁文章