Vue创建todolist
电子书 第三章:
https://www.dedao.cn/ebook/reader?id=V5R16yPmaYOMqGRAv82jkX4KDe175w7xRQ0rbx6pNgznl9VZPLJQyEBodb89mqoO
没有使用VUE CLI创建项目。
创建步骤:
1, 用Vite 创建项目
2, npm run dev 运行程序
参照之前的文章:WSL 环境下 node/vue/Mysql的安装和配置-CSDN博客
电子书内容:
业务描述:
· 创建一个事项。
· 将事项标记为已完成。
· 将事项标记为未完成。
· 删除一个事项。
· 恢复一个删除的事项。
主要知识包括:
· Vue.js单文件组件的使用。
· Vue.js常用指令的使用。
· Vue.js组件的通信方式。
· Vue.js的生命周期方法和事件方法的使用。
· Vue.js监听属性。
· mitt跨组件通信。
3. 在views文件夹下创建todo.vue组件和recycle.vue组件,分别表示待办事项页面和回收站页面
4. 在components目录创建navheader.vue文件作为标题按钮组件
5.在components目录创建titem.vue文件作为单条事项组件
6. 在components目录创建ritem.vue文件作为单条已删除事项组件
7.本项目的数据持久化也采用LocalStorage这种方案。创建utils文件夹,同时新建dataUtils.js文件,该文件作为对LocalStorage的封装
参照源代码调整:
1, index.html 更改header的title标签描述。其余不更改。(<script type="module" src="/src/main.js"></script>, 这一段是indexhtml链接main.js的语句。这个应当是Vite与CLI的区别。另外index.html文件所处的目录位置也不同,vite的index在根目录,CLI的index在public与main.js在同一个目录内。)
2, main.js 进行对比增加关于 mitt的部分。 import mitt from 'mitt' 和 window.mitt = mitt().
显示报错。原因 mitt是第三方库需要安装。
npm install mitt --save (--save 是将包的信息增加到项目package.json文件中。为默认选项可以不输入。)
npm list 显示mitt已经安装成功。 同时vite的标准index页面显示成功。
3. App.vue文件修改:
删除 hello(you did it),删除 nav中的home。 style不变。变成下面的显示

4, 示例中的template内容复制。

增加导航条,todo和recyle两个组件。通过v-show来控制是否显示。
相关文章:
Vue创建todolist
电子书 第三章: https://www.dedao.cn/ebook/reader?idV5R16yPmaYOMqGRAv82jkX4KDe175w7xRQ0rbx6pNgznl9VZPLJQyEBodb89mqoO 没有使用VUE CLI创建项目。 创建步骤: 1, 用Vite 创建项目 2, npm run dev 运行程序 参照之前的文…...
了解Ansible Playbook
在现代IT运维中,自动化部署成为了提高效率、降低错误率的重要手段之一。而Ansible作为一种强大的自动化工具,其Playbook机制为自动化部署提供了灵活、可扩展的解决方案。本文将深入介绍Ansible Playbook的概念、结构、语法和常见用法,帮助读者…...
nginx 负载均衡、反向代理实验
nginx 负载均衡、反向代理实验 实验目的 理解概念:明确反向代理和负载均衡的基本概念及其在网络架构中的作用。 掌握技能:学习如何配置Nginx以实现反向代理和负载均衡功能。 实践应用:通过实际操作,体验Nginx如何提升Web服务的可…...
Linux信号捕捉
要处理信号, 我们进程就得知道自己是否收到了信号, 收到了哪些信号, 所以进程需要再合适的时候去查一查自己的pending位图 block 位图 和 hander表, 什么时候进行检测呢? 当我们的进程从内核态返回到用户态的时候&…...
【Leetcode】 top100 round2 需要加强版
知识补充 python赋值的执行顺序: 在41中,对于测试案例[-1,4,3,1] 当i1时,以下两条语句的执行结果不一致: “nums[nums[i]-1], nums[i] nums[i], nums[nums[i]-1]” “nums[i], nums[nums[i]-1] nums[nums[i]-1], nums[i]” 解析…...
ElasticSearch知识点汇总
1、ES中的倒排索引是什么。 倒排索引,是通过分词策略,形成了词和文章的映射关系表,这种词典映射表即为倒排索引 2、ES是如何实现master选举的。 选举过程主要包括以下几个步骤: 心跳检测: 每个节点…...
phpize +Visual Studio + MSYS2 + bison 草稿记录并未正常完成
phpize Visual Studio MSYS2 bison 先安装 Visual Studio https://visualstudio.microsoft.com/zh-hans/vs/ 在安装过程中,选择安装工作负载。确保选择了 C 工作负载以及适用于 C 开发的相关组件,例如 MSVC v142 - VS 2022 C x64/x86 build tools。 …...
网络安全与IP地址的关联
网络安全与IP地址之间存在着密不可分的关系。IP地址作为网络通信的基础,对于网络安全的保障具有至关重要的作用。以下将详细探讨网络安全与IP地址之间的关联,以及IP地址在网络安全中的应用。 一、IP地址与网络安全的关系 IP地址是网络通信的基础&#x…...
罗德与施瓦茨 SMC100A信号发生器9kHz至3.2 GHz
罗德与施瓦茨 SMC100A信号发生器,9 kHz - 3.2 GHz 罗德与施瓦茨 SMC100A 以极具吸引力的价格提供出色的信号质量。它覆盖的频率范围为 9 kHz 至 1.1 GHz 或 3.2 GHz。输出功率为典型值。> 17 dBm。所有重要功能(AM/FM/φM/脉冲调制)均已集…...
新能源汽车充电站智慧充电电能服务综合解决方案
安科瑞薛瑶瑶18701709087/17343930412 ★解决方案 ✔目的地充电-EMS微电网平台 基于EMS解决方案从设备运维的角度解决本地充电的能量管理及运维问题,与充电管理平台打通数据,为企业微电网提供源、网、荷、储、充一体化解决方案。 ✔运营场站--电能服务…...
pytest(二):关于pytest自动化脚本编写中,初始化方式setup_class与fixture的对比
一、自动化脚本实例对比 下面是一条用例,使用pytest框架,放在一个类中,两种实现方式: 1.1 setup_class初始化方式 1. 优点: 代码结构清晰,setup_class 和 teardown_class 看起来像传统的类级别的 setup 和 teardown 方法。2. 缺点: 使用 autouse=True 的 fixture 作为…...
项目中遇到的问题
web项目中请求线程到service层的时候远程调用服务之前是串行化执行每个任务都要get阻塞等待任务完成,举例当用户在购物车页面点击去结算就会请求后台toTrade请求获取订单确认的详情数据并渲染到订单详情页,现在在toTrade请求中使用异步任务编排Completab…...
Deeplab的复现(pytorch实现)
DeepLab复现的pytorch实现 本文复现的主要是deeplabv3。使用的数据集和之前发的文章FCN一样,没有了解的可以移步到之前发的文章中去查看一下。 1.该模型的主要结构 对于代码部分,主要只写了模型部分的,其他部分内容基本和FCN的一致…...
input上添加disabled=“true“,点击事件失效处理办法
当我们给input标签上添加disabled"true"时,再添加点击事件,点击事件会不生效,处理办法如下: 给input标签添加样式style"pointer-events: none;" 代码如下: <input style"pointer-event…...
精酿啤酒的魅力:啤酒的与众不同风味
啤酒,作为世界上古老的酒精饮品之一,一直以来都以其与众不同的魅力吸引着无数人的味蕾。而精酿啤酒,作为啤酒中的佼佼者之一,更是以其丰富的口感和多样的风格,成为了啤酒爱好者的心头好。在这其中,Fendi cl…...
检测机构的双资质是什么?
CMA和CNAS是两种在检测、校准和认证领域具有权威性的资质。 CMA资质全称为“检验检测机构资质认定”(China Inspection Body and Laboratory Mandatory Approval)。它是根据《中华人民共和国计量法》等相关法规,由国家认证认可监督管理委员会…...
基于springboot的校园食堂订餐系统
文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式 🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 &…...
基于SpringBoot的高校推荐系统
项目介绍 当前,随着高等教育的不断普及,越来越多的学生选择考研究生来提高自身的学术水平和竞争力。然而,考研生在选择报考院校和专业时面临着众多的选择和信息不对称的问题。为了解决这些问题,一些网站和APP已经推出了相关的院校…...
了解 websocket
1. 概念 1、 websocket 是一种双向通行协议。实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达到实时通讯的目的; 2、websocket连接成功后,只要连接不断开,通信就会一保持着; 3、要打开一个 WebS…...
C++中erase函数的用法
在C中,erase函数用于从容器中删除一个或一系列元素。它通常用于删除容器中的指定位置的元素或特定值的元素。 erase函数通常有两种用法: 删除指定位置的元素:erase(iterator position) 这种用法会删除容器中迭代器position指向的元素。 st…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时,可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案: 1. 检查电源供电问题 问题原因:多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
Cinnamon修改面板小工具图标
Cinnamon开始菜单-CSDN博客 设置模块都是做好的,比GNOME简单得多! 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...
Neo4j 集群管理:原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...
React---day11
14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store: 我们在使用异步的时候理应是要使用中间件的,但是configureStore 已经自动集成了 redux-thunk,注意action里面要返回函数 import { configureS…...
智能AI电话机器人系统的识别能力现状与发展水平
一、引言 随着人工智能技术的飞速发展,AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术,在客户服务、营销推广、信息查询等领域发挥着越来越重要…...
七、数据库的完整性
七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...
系统掌握PyTorch:图解张量、Autograd、DataLoader、nn.Module与实战模型
本文较长,建议点赞收藏,以免遗失。更多AI大模型应用开发学习视频及资料,尽在聚客AI学院。 本文通过代码驱动的方式,系统讲解PyTorch核心概念和实战技巧,涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...
认识CMake并使用CMake构建自己的第一个项目
1.CMake的作用和优势 跨平台支持:CMake支持多种操作系统和编译器,使用同一份构建配置可以在不同的环境中使用 简化配置:通过CMakeLists.txt文件,用户可以定义项目结构、依赖项、编译选项等,无需手动编写复杂的构建脚本…...
Python实现简单音频数据压缩与解压算法
Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中,压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言,提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...
Pydantic + Function Calling的结合
1、Pydantic Pydantic 是一个 Python 库,用于数据验证和设置管理,通过 Python 类型注解强制执行数据类型。它广泛用于 API 开发(如 FastAPI)、配置管理和数据解析,核心功能包括: 数据验证:通过…...
