当前位置: 首页 > news >正文

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

电子书 第三章&#xff1a; https://www.dedao.cn/ebook/reader?idV5R16yPmaYOMqGRAv82jkX4KDe175w7xRQ0rbx6pNgznl9VZPLJQyEBodb89mqoO 没有使用VUE CLI创建项目。 创建步骤&#xff1a; 1&#xff0c; 用Vite 创建项目 2&#xff0c; npm run dev 运行程序 参照之前的文…...

了解Ansible Playbook

在现代IT运维中&#xff0c;自动化部署成为了提高效率、降低错误率的重要手段之一。而Ansible作为一种强大的自动化工具&#xff0c;其Playbook机制为自动化部署提供了灵活、可扩展的解决方案。本文将深入介绍Ansible Playbook的概念、结构、语法和常见用法&#xff0c;帮助读者…...

nginx 负载均衡、反向代理实验

nginx 负载均衡、反向代理实验 实验目的 理解概念&#xff1a;明确反向代理和负载均衡的基本概念及其在网络架构中的作用。 掌握技能&#xff1a;学习如何配置Nginx以实现反向代理和负载均衡功能。 实践应用&#xff1a;通过实际操作&#xff0c;体验Nginx如何提升Web服务的可…...

Linux信号捕捉

要处理信号&#xff0c; 我们进程就得知道自己是否收到了信号&#xff0c; 收到了哪些信号&#xff0c; 所以进程需要再合适的时候去查一查自己的pending位图 block 位图 和 hander表&#xff0c; 什么时候进行检测呢&#xff1f; 当我们的进程从内核态返回到用户态的时候&…...

【Leetcode】 top100 round2 需要加强版

知识补充 python赋值的执行顺序&#xff1a; 在41中&#xff0c;对于测试案例[-1,4,3,1] 当i1时&#xff0c;以下两条语句的执行结果不一致&#xff1a; “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中的​​​​​​​倒排索引是什么。 倒排索引&#xff0c;是通过分词策略&#xff0c;形成了词和文章的映射关系表&#xff0c;这种词典映射表即为倒排索引 2、ES是如何实现master选举的。 选举过程主要包括以下几个步骤&#xff1a; 心跳检测&#xff1a; 每个节点…...

phpize +Visual Studio + MSYS2 + bison 草稿记录并未正常完成

phpize Visual Studio MSYS2 bison 先安装 Visual Studio https://visualstudio.microsoft.com/zh-hans/vs/ 在安装过程中&#xff0c;选择安装工作负载。确保选择了 C 工作负载以及适用于 C 开发的相关组件&#xff0c;例如 MSVC v142 - VS 2022 C x64/x86 build tools。 …...

网络安全与IP地址的关联

网络安全与IP地址之间存在着密不可分的关系。IP地址作为网络通信的基础&#xff0c;对于网络安全的保障具有至关重要的作用。以下将详细探讨网络安全与IP地址之间的关联&#xff0c;以及IP地址在网络安全中的应用。 一、IP地址与网络安全的关系 IP地址是网络通信的基础&#x…...

罗德与施瓦茨 SMC100A信号发生器9kHz至3.2 GHz

罗德与施瓦茨 SMC100A信号发生器&#xff0c;9 kHz - 3.2 GHz 罗德与施瓦茨 SMC100A 以极具吸引力的价格提供出色的信号质量。它覆盖的频率范围为 9 kHz 至 1.1 GHz 或 3.2 GHz。输出功率为典型值。> 17 dBm。所有重要功能&#xff08;AM/FM/φM/脉冲调制&#xff09;均已集…...

新能源汽车充电站智慧充电电能服务综合解决方案

安科瑞薛瑶瑶18701709087/17343930412 ★解决方案 ✔目的地充电-EMS微电网平台 基于EMS解决方案从设备运维的角度解决本地充电的能量管理及运维问题&#xff0c;与充电管理平台打通数据&#xff0c;为企业微电网提供源、网、荷、储、充一体化解决方案。 ✔运营场站--电能服务…...

pytest(二):关于pytest自动化脚本编写中,初始化方式setup_class与fixture的对比

一、自动化脚本实例对比 下面是一条用例,使用pytest框架,放在一个类中,两种实现方式: 1.1 setup_class初始化方式 1. 优点: 代码结构清晰,setup_class 和 teardown_class 看起来像传统的类级别的 setup 和 teardown 方法。2. 缺点: 使用 autouse=True 的 fixture 作为…...

项目中遇到的问题

web项目中请求线程到service层的时候远程调用服务之前是串行化执行每个任务都要get阻塞等待任务完成&#xff0c;举例当用户在购物车页面点击去结算就会请求后台toTrade请求获取订单确认的详情数据并渲染到订单详情页&#xff0c;现在在toTrade请求中使用异步任务编排Completab…...

Deeplab的复现(pytorch实现)

DeepLab复现的pytorch实现 本文复现的主要是deeplabv3。使用的数据集和之前发的文章FCN一样&#xff0c;没有了解的可以移步到之前发的文章中去查看一下。 1.该模型的主要结构 对于代码部分&#xff0c;主要只写了模型部分的&#xff0c;其他部分内容基本和FCN的一致&#xf…...

input上添加disabled=“true“,点击事件失效处理办法

当我们给input标签上添加disabled"true"时&#xff0c;再添加点击事件&#xff0c;点击事件会不生效&#xff0c;处理办法如下&#xff1a; 给input标签添加样式style"pointer-events: none;" 代码如下&#xff1a; <input style"pointer-event…...

精酿啤酒的魅力:啤酒的与众不同风味

啤酒&#xff0c;作为世界上古老的酒精饮品之一&#xff0c;一直以来都以其与众不同的魅力吸引着无数人的味蕾。而精酿啤酒&#xff0c;作为啤酒中的佼佼者之一&#xff0c;更是以其丰富的口感和多样的风格&#xff0c;成为了啤酒爱好者的心头好。在这其中&#xff0c;Fendi cl…...

检测机构的双资质是什么?

CMA和CNAS是两种在检测、校准和认证领域具有权威性的资质。 CMA资质全称为“检验检测机构资质认定”&#xff08;China Inspection Body and Laboratory Mandatory Approval&#xff09;。它是根据《中华人民共和国计量法》等相关法规&#xff0c;由国家认证认可监督管理委员会…...

基于springboot的校园食堂订餐系统

文章目录 项目介绍主要功能截图&#xff1a;部分代码展示设计总结项目获取方式 &#x1f345; 作者主页&#xff1a;超级无敌暴龙战士塔塔开 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、 简历模板、学习资料、面试题库【关注我&#xff0c;都给你】 &…...

基于SpringBoot的高校推荐系统

项目介绍 当前&#xff0c;随着高等教育的不断普及&#xff0c;越来越多的学生选择考研究生来提高自身的学术水平和竞争力。然而&#xff0c;考研生在选择报考院校和专业时面临着众多的选择和信息不对称的问题。为了解决这些问题&#xff0c;一些网站和APP已经推出了相关的院校…...

了解 websocket

​ 1. 概念 1、 websocket 是一种双向通行协议。实现了浏览器与服务器全双工通信&#xff0c;能更好的节省服务器资源和带宽并达到实时通讯的目的&#xff1b; 2、websocket连接成功后&#xff0c;只要连接不断开&#xff0c;通信就会一保持着&#xff1b; 3、要打开一个 WebS…...

C++中erase函数的用法

在C中&#xff0c;erase函数用于从容器中删除一个或一系列元素。它通常用于删除容器中的指定位置的元素或特定值的元素。 erase函数通常有两种用法&#xff1a; 删除指定位置的元素&#xff1a;erase(iterator position) 这种用法会删除容器中迭代器position指向的元素。 st…...

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...