vue3 todolist 简单例子

ops/2024/9/20 1:56:55/ 标签: vue

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><inputv-model="newTodo"name="newTodo"autocomplete="off"><button>Add ToDo</button></form><h2>ToDo List</h2><ul><liv-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.donesaveData();}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 solidrgba($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>

http://www.ppmy.cn/ops/46548.html

相关文章

深入理解文件系统和日志分析

深入理解文件系统和日志分析

文件是存储在硬盘上的&#xff0c;硬盘上的最小存储单位是扇区&#xff0c;每个扇区的大小是512字节。 inode&#xff1a;存储元信息&#xff08;包括文件的属性&#xff0c;权限&#xff0c;创建者&#xff0c;创建日期等等&#xff09; block&#xff1a;块&#xff0c;连续…
阅读更多...
C++17之std::void_t

C++17之std::void_t

目录 1.std::void_t 的原理 2.std::void_t 的应用 2.1.判断成员存在性 2.1.1.判断嵌套类型定义 2.1.2 判断成员是否存在 2.2 判断表达式是否合法 2.2.1 判断是否支持前置运算符 2.2.3 判断两个类型是否可做加法运算 3.std::void_t 与 std::enable_if 1.std::void_t 的…
阅读更多...
软考 系统架构设计师之考试感悟2

软考 系统架构设计师之考试感悟2

接前一篇文章&#xff1a;软考 系统架构设计师之考试感悟 今天是2024年5月25号&#xff0c;是个人第二次参加软考系统架构师考试的正日子。和上次一样&#xff0c;考了一天&#xff0c;身心俱疲。天是阴的&#xff0c;心是沉的&#xff0c;感觉比上一次更加沉重。仍然有诸多感悟…
阅读更多...
自然语言处理（NLP）—— 神经网络语言处理

自然语言处理（NLP）—— 神经网络语言处理

1. 总体原则 1.1 深度神经网络&#xff08;Deep Neural Network&#xff09;的训练过程 下图展示了自然语言处理&#xff08;NLP&#xff09;领域内使用的深度神经网络&#xff08;Deep Neural Network&#xff09;的训练过程的简化图。 在神经网络的NLP领域&#xff1a; 语料…
阅读更多...
mysql面试之分库分表总结

mysql面试之分库分表总结

文章目录 1.为什么要分库分表2.分库分表有哪些中间件&#xff0c;不同的中间件都有什么优点和缺点&#xff1f;3.分库分表的方式(水平分库,垂直分库,水平分表,垂直分表)3.1 水平分库3.2 垂直分库3.3 水平分表3.4 垂直分表 4.分库分表带来的问题4.1 事务一致性问题4.2 跨节点关联…
阅读更多...
[Qt]关于QListWidget、QScrollArea 为什么在QDesigner上设置了之后界面上仍然不生效的问题

[Qt]关于QListWidget、QScrollArea 为什么在QDesigner上设置了之后界面上仍然不生效的问题

前言 最近做了一些有关QListWidget和QScrollArea的控件&#xff0c;我去&#xff0c;这两个控件是真的坑&#xff0c;明明我在QDesigner的操作界面上对这两个控件的界面进行了修改&#xff0c;但是编译出来的软件就是看上去什么都没有&#xff0c;很坑&#xff0c;Gpt也没解决…
阅读更多...
【CC2530-操作外部flash】

【CC2530-操作外部flash】

zigbee cc2530操作flash&#xff0c;以cc2530读flash_id为例子&#xff1b; void InitIO() {CLKCONCMD & ~0x40; //设置系统时钟源为32MHZ晶振 while(CLKCONSTA & 0x40); //等待晶振稳定为32M CLKCONCMD & ~0x47; //设置系统主时钟频率为32MHZ…
阅读更多...
zabbix事件告警监控：如何实现对相同部件触发器告警及恢复的强关联

zabbix事件告警监控：如何实现对相同部件触发器告警及恢复的强关联

有一定Zabbix使用经验的小伙伴可能会发现&#xff0c;接收告警事件时&#xff0c;其中可能包含着大量不同的部件名&#xff0c;同一部件的事件在逻辑上具有很强关联性&#xff0c;理论上应保持一致的告警/恢复状态&#xff0c;但Zabbix默认并未对它们进行关联&#xff0c;直接后…
阅读更多...
共筑信创新生态：DolphinDB 与移动云 BC-Linux 完成兼容互认

共筑信创新生态：DolphinDB 与移动云 BC-Linux 完成兼容互认

近日&#xff0c;DolphinDB 数据库软件 V2.0 与中国移动通信集团公司的移动云天元操作系统 BC-Linux 完成兼容性适配认证。经过双方共同严格测试&#xff0c;DolphinDB 性能及稳定性等各项指标表现优异&#xff0c;满足功能及兼容性测试要求。 此次 DolphinDB 成功通过移动云 B…
阅读更多...
【TB作品】msp430g2553，读取SHT31，读取gy-30，显示到lcd12864，温度湿度光强

【TB作品】msp430g2553，读取SHT31，读取gy-30，显示到lcd12864，温度湿度光强

功能 msp430g2553&#xff0c;读取SHT31&#xff0c;读取gy-30&#xff0c;显示到lcd12864 硬件 /* 12864液晶串行显示测试程序P1.4模拟SID&#xff08;接第5脚&#xff09;&#xff0c;P1.5模拟SCLK&#xff08;接第6脚&#xff09;4脚&#xff08;CS信号&#xff09;接高…
阅读更多...
Spring源码之BeanDefinition的加载

Spring源码之BeanDefinition的加载

Spring源码之BeanFactory和BeanDefinition BeanFactory和BeanDefinitionBeanFactoryBeanDefinition源码分析创建AnnotationConfigApplicationContext对象注册配置类refresh方法 BeanFactory和BeanDefinition BeanFactory BeanFactory是Spring提供给外部访问容器的根接口&…
阅读更多...
PbootCMS后台用户账号密码时进行重置工具

PbootCMS后台用户账号密码时进行重置工具

1、工具作用: 工具用于忘记PbootCMS后台用户账号密码时进行重置。 2、下载地址&#xff1a;https://pan.quark.cn/s/2b017974f2c0 3、使用方法&#xff1a; 1&#xff09;下载重置工具解压包&#xff0c;解压后将resetpw.php文件直接上传到网站根目录下&#xff1b; 2&…
阅读更多...
【C++】多态：编程中的“一人千面”艺术

【C++】多态：编程中的“一人千面”艺术

目录 一、多态的概念二、多态的定义及实现1.多态的构成条件2.虚函数的重写2.1 什么是虚函数&#xff1f;2.2 虚函数的重写是什么&#xff1f;2.3 虚函数重写的两个例外2.4 C11 override 和 final2.5 重载、覆盖(重写)、隐藏(重定义)的对比 三、抽象类3.1 概念3.2 接口继承和实现…
阅读更多...
tcpdump抓包，抓包导出.pcap文件用wireshark看

tcpdump抓包，抓包导出.pcap文件用wireshark看

1、抓所有口的包 tcpdump -i any host 设备的ip2、抓特定口的包 tcpdump -i eth2 port 61182 -nne3、将抓到的包导出到pacb文件 tcpdump -i eth2 port 61182 -nne -s0 -w /tmp/61182.pcap -s0: Sets the snapshot length to capture the entire packet. The 0 means that tcpd…
阅读更多...
Web前端框架：深入探索与实践

Web前端框架：深入探索与实践

Web前端框架&#xff1a;深入探索与实践 在当下数字化飞速发展的时代&#xff0c;Web前端框架的选择与应用成为了开发者们关注的焦点。Node.js&#xff0c;作为一种强大的后端技术&#xff0c;在前端框架的构建中也发挥着不可或缺的作用。本文将围绕Node.js Web前端框架&#…
阅读更多...
go中的指针详解

go中的指针详解

因为大一的时候c语言没学好,所以看到指针很心烦 ,后来速成了一遍go ,每每写道指针部分就开始遗忘 ,所以专门对指针部分做了此笔记 概念 在 Go 语言中&#xff0c;指针是一种变量类型&#xff0c;它存储的是另一个变量的内存地址。通过指针&#xff0c;你可以访问和修改它指向…
阅读更多...
字符串压缩

字符串压缩

题目链接 字符串压缩 题目描述 注意点 字符串长度在[0, 50000]范围内若“压缩”后的字符串没有变短&#xff0c;则返回原先的字符串字符串中只包含小写英文字母&#xff08;a至z&#xff09; 解答思路 模拟思路&#xff0c;使用pre存储当前位置的前一个字符&#xff0c;使…
阅读更多...
修改文档日期神器 - Python打造日期修改器

修改文档日期神器 - Python打造日期修改器

这篇文章将介绍一款使用 Python 开发的实用工具 - 日期修改器。它可以帮助您轻松修改 Word (.docx) 和 PDF 文档的日期信息&#xff0c;满足日常办公和文档整理的需求。 C:\pythoncode\new\modifyfiledate.py 软件功能 支持修改 Word (.docx) 日期信息。允许选择要修改的日期…
阅读更多...
「架构」单元测试及运用

「架构」单元测试及运用

在参与管理和研发软件项目的过程中，单元测试的实际运用对于确保最终产品的质量至关重要。以下是一些实际运用的案例和说明。 静态测试的实际运用 在TechCorp的电子商务平台项目中，静态测试作为代码质量保证的第一道防线。开发团队在编写代码的同时，使用SonarQube等静态代码…
阅读更多...
Rust struct

Rust struct

Rust struct 1.实例化需要初始化全部成员变量2.如果需要实例化对象可变&#xff0c;加上mut则所有成员变量均可变 Rust支持通过已实例化的对象&#xff0c;赋值给未赋值的对象的成员变量 #![allow(warnings)] use std::io; use std::error::Error; use std::boxed::Box; use s…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站