vue3 todolist 简单例子

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.mzph.cn/diannao/21274.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

云原生架构案例分析_2.云原生技术助力某汽车公司数字化转型实践

云原生架构案例分析_2.云原生技术助力某汽车公司数字化转型实践

名词解释&#xff1a; 互联网 在“互联网”模式下&#xff0c;我们仅仅把互联网看作是一种传播工具、传播手段、传播渠道和传播平台&#xff0c;对于互联网的应用大体上是在既有的运作逻辑的基础之上&#xff0c;把互联网作为延伸传媒影响力、价值和功能的一种延伸型工具&…
阅读更多...
Linux基础1-基本指令1

Linux基础1-基本指令1

1.Linux学习前言 Linux的学习非常重要&#xff0c;我们学习Linux的第一步是在电脑中搭建Linux环境。 对于没有搭建过的可以看这阿伟t的一篇文章 【Linux入门】Linux环境配置-CSDN博客 我的环境为XShell,运行的云服务器是阿里云 2.本章重点 1.显示当前目录下的所有文件…
阅读更多...
针对大模型的上下文注入攻击

针对大模型的上下文注入攻击

大型语言模型&#xff08;LLMs&#xff09;的开发和部署取得了显著进展。例如ChatGPT和Llama-2这样的LLMs&#xff0c;利用庞大的数据集和Transformer架构&#xff0c;能够产生连贯性、上下文准确性甚至具有创造性的文本。LLMs最初和本质上是为静态场景设计的&#xff0c;即输入…
阅读更多...
Xilinx RFSOC 47DR 8收8发 信号处理板卡

Xilinx RFSOC 47DR 8收8发 信号处理板卡

系统资源如图所示&#xff1a;  FPGA采用XCZU47DR 1156芯片&#xff0c;PS端搭载一组64Bit DDR4,容量为4GB,最高支持速率&#xff1a;2400MT/s;  PS端挂载两片QSPI X4 FLASH&#xff1b;  PS支持一路NVME存储&#xff1b;  PS端挂载SD接口&#xff0c;用于存储程序&…
阅读更多...
解决kettle界面右上角的connect消失——且使用admin登录不上Kettle资源库

解决kettle界面右上角的connect消失——且使用admin登录不上Kettle资源库

一、问题描述 1.1、Kettle界面右上角的connect消失了 当我们配置Kettle界面的资源库（Other Repositories）内容后，Kettle界面右上角的connect消失了；如下图所示： 1.2、使用默认的账户【admin】和密码【admin】登录不上kettle资源库 当我们切换到我们配置的数据库使用超管账…
阅读更多...
uniapp实现微信小程序调用云函数【vue3】

uniapp实现微信小程序调用云函数【vue3】

本人是从微信开发者工具写原生微信小程序一步一步走来&#xff0c;由于vue3框架的慢慢的步入前端市场&#xff0c;为了不被前端市场遗弃&#xff0c;果断从vue2开始步入vue3的学习&#xff0c;本人习惯在在HBuilder X写uniapp的项目&#xff0c;过去uniapp默认vue2框架&#xf…
阅读更多...
注册北京个体工商户条件和办理时间

注册北京个体工商户条件和办理时间

在北京这座充满活力的城市中&#xff0c;每天都有无数的创业者怀揣着梦想&#xff0c;踏上创业之路。然而&#xff0c;对于许多初次接触企业注册的人来说&#xff0c;往往对注册流程和时间感到困惑。特别是选择代理服务时&#xff0c;更希望了解一个大概的时间范围。那么&#…
阅读更多...
【案例实操】银河麒麟桌面操作系统实例分享，V10SP1重启后网卡错乱解决方法

【案例实操】银河麒麟桌面操作系统实例分享，V10SP1重启后网卡错乱解决方法

1.问题现象 8 个网口&#xff0c; 命名从 eth1 开始到 eth8。 目前在系统 grub 里面加了 net.ifnames0 biosdevname0 参数&#xff0c; 然后在 udev 规则中加了一条固定网卡和硬件 pci 设备号的规则文件。 最后在 rc.local 中加了两条重新安装网卡驱动的命令&#xff08; rmmod…
阅读更多...
Spring 中如何控制 Bean 的加载顺序？

Spring 中如何控制 Bean 的加载顺序？

如果你脱口而出说添加 Order 注解或者是实现 Ordered 接口&#xff0c;那么恭喜&#xff0c;你掉坑了。 一 Order 注解和 Ordered 接口 在 Spring 框架中&#xff0c;Order 是一个非常实用的元注解&#xff0c;它位于 spring-core 包下&#xff0c;主要用于控制某些特定上下文…
阅读更多...
git基本使用——回退，撤销add,commit，合并分支

git基本使用——回退，撤销add,commit，合并分支

学习笔记 笔记中表格中的—— 表示需要回退的地方&#xff0c;也就是使用命令之后会改变的地方 网页软件分享 这是一个非常好用web端笔记画图软件&#xff0c;解决了typora画图不方便的问题
阅读更多...
模板-初阶

模板-初阶

引言&#xff1a; 在C&#xff0c;我们已经学过了函数重载&#xff0c;这使得同名函数具有多个功能。但是还有一种更省力的方法&#xff1a;采用模板。 本文主要介绍以下内容 1. 泛型编程 2. 函数模板 3. 类模板 1.泛型编程 在将这一部分之前&#xff0c;通过一个故事引…
阅读更多...
mysql中EXPLAIN详解

mysql中EXPLAIN详解

大家好。众所周知&#xff0c;MySQL 查询优化器的各种基于成本和规则的优化会后生成一个所谓的执行计划&#xff0c;这个执行计划展示了接下来具体执行查询的方式。在日常工作过程中&#xff0c;我们可以使用EXPLAIN语句来查看某个查询语句的具体执行计划&#xff0c; 今天我们…
阅读更多...
数据库索引的理解

数据库索引的理解

目录 1.索引是什么&#xff0c;解决了什么问题 2.索引付出了什么代价 3.如何使用sql索引&#xff0c;有何注意事项 普通索引&#xff1a; 唯一索引&#xff1a; 主键索引(Primary Key Index)&#xff1a; 删除索引: 创建主键索引的基本语法: 4.索引背后的数据结构 1.索…
阅读更多...
数据结构严蔚敏版精简版-绪论

数据结构严蔚敏版精简版-绪论

1.基本概念和术语 下列概念和术语将在以后各章节中多次出现&#xff0c;本节先对这些概念和术语赋予确定的含义。 数据(Data)&#xff1a;数据是客观事物的符号表示&#xff0c;是所有能输入到计算机中并被计算机程序处理的符号 的总称。 数据元素(DataElement)&#xff1a;…
阅读更多...
基于STM32的水库预警系统的Proteus仿真

基于STM32的水库预警系统的Proteus仿真

文章目录 一、水库预警系统1.题目要求2.思路2.1 OLED显示汉字2.2 水质传感器等等2.3 步进电机2.4 驱动水泵 3.仿真图3.1 未仿真时3.2 开始仿真&#xff0c;OLED开始显示3.3 提高水位&#xff0c;开启阀门和预警3.4 通过按键增大水位阈值&#xff0c;取消报警 4.仿真程序4.1 程序…
阅读更多...
轻松拿捏C语言——【文件操作】

轻松拿捏C语言——【文件操作】

&#x1f970;欢迎关注 轻松拿捏C语言系列&#xff0c;来和 小哇 一起进步&#xff01;✊ &#x1f389;创作不易&#xff0c;请多多支持&#x1f389; &#x1f308;感谢大家的阅读、点赞、收藏和关注&#x1f495; &#x1f339;如有问题&#xff0c;欢迎指正 目录 &#x1f…
阅读更多...
谨以此文章记录我的蓝桥杯备赛过程

谨以此文章记录我的蓝桥杯备赛过程

以国优秀结束了蓝桥杯cb组 鄙人来自电信学院&#xff0c;非科班出身&#xff0c;在寒假&#xff0c;大约2024年2月份&#xff0c;跟着黑马程序员将c基础语法学完了&#xff0c;因为过年&#xff0c;事情较多&#xff0c;没在学了。 最初就是抱着拿省三的态度去打这个比赛的&a…
阅读更多...
C语言之旅：探索单链表

C语言之旅：探索单链表

目录 一、前言 二、实现链表的功能&#xff1a; 打印 创建节点 尾插 尾删 头插 头删 查找 在指定位置之前插入数据 指定位置删除 在指定位置之后插入数据 打印 销毁 三、全部源码&#xff1a; 四、结语 一、前言 链表是一个强大且基础的数据结构。对于很多初…
阅读更多...
禁用手机连接 - Win11

禁用手机连接 - Win11

问题 Win11系统自带手机连接软件&#xff0c;会在后台自启&#xff0c;不适用于全部的手机型号&#xff0c;而且常规方法无法卸载。甚至任务管理器中&#xff0c;此软件的后台进程高达76个&#xff0c;如下图。下文以Win11系统为例&#xff0c;介绍如何禁用手机连接。 解决方…
阅读更多...
考研数学：有些无穷小不能用等价无穷小的公式？

考研数学：有些无穷小不能用等价无穷小的公式？

今天要给大家分享的笔记是&#xff1a;《有些无穷小虽然是无穷小&#xff0c;但却不能用无穷小的相关公式》&#xff1a;
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023