当前位置: 首页 > 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…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

Ubuntu系统多网卡多相机IP设置方法

目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机&#xff0c;交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息&#xff0c;系统版本&#xff1a;Ubuntu22.04.5 LTS&#xff1b;内核版本…...

基于江科大stm32屏幕驱动,实现OLED多级菜单(动画效果),结构体链表实现(独创源码)

引言 在嵌入式系统中&#xff0c;用户界面的设计往往直接影响到用户体验。本文将以STM32微控制器和OLED显示屏为例&#xff0c;介绍如何实现一个多级菜单系统。该系统支持用户通过按键导航菜单&#xff0c;执行相应操作&#xff0c;并提供平滑的滚动动画效果。 本文设计了一个…...