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来控制是否显示。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/9906.shtml

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

相关文章

数据结构与算法学习笔记八-二叉树的顺序存储表示法和实现(C语言)

目录 前言 1.数组和结构体相关的一些知识 1.数组 2.结构体数组 3.递归遍历数组 2.二叉树的顺序存储表示法和实现 1.定义 2.初始化 3.先序遍历二叉树 4.中序遍历二叉树 5.后序遍历二叉树 6.完整代码 前言 二叉树的非递归的表示和实现。 1.数组和结构体相关的一些知…

Java实现字符串补齐至固定长度

简介 介绍本篇博客将会分享的内容&#xff1a;在Java中&#xff0c;如何将字符串补齐至固定长度&#xff0c;以及具体的实现方法。 方法一&#xff1a;使用 String.format() 方法 实现步骤 使用 %10s 格式指定字符串的最小宽度为10。使用 String.format() 方法将字符串格式…

搭建Harbor仓库

文章目录 Harbor仓库搭建Harbor仓库安装 docker 服务修改配置文件 Harbor仓库 搭建Harbor仓库 下载 Harbor 仓库 安装 docker 服务 # step 1: 安装必要的一些系统工具 yum install -y yum-utils device-mapper-persistent-data lvm2 # Step 2: 添加软件源信息 yum-config-m…

哪里可以获得正规的行政区底图?

探索国家自然资源部标准地图服务系统&#xff1a;便捷与个性化的地理信息服务 在当今信息化、数字化的时代&#xff0c;地图作为地理信息的重要载体&#xff0c;其应用已经渗透到我们生活的方方面面。无论是出行导航、城市规划&#xff0c;还是学术研究、教育普及&#xff0c;…

学习笔记:IEEE 1003.13-2003【POSIX PSE52接口列表】

一、POSIX PSE52接口列表 根据IEEE 1003.13-2003&#xff0c;整理了POSIX PSE52接口API&#xff08;一共342个&#xff09;&#xff0c;每个API支持链接查看。 IEEE POSIX接口online搜索链接&#xff1a; The Open Group Base Specifications Issue 7, 2018 edition 详细内…

QT--5

1> 将网络聊天室重新实现一遍 服务器端 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);ser new QTcpServer(this); }Widget::~Widget() {delete ui; }vo…

VSCODE IDF 编辑ESP32程序在使用xQueueHandle队列的时候需要注意的问题

VSCODE IDF 编辑ESP32程序在使用xQueueHandle队列的时候需要注意的问题&#xff1a; 在官方例程中使用&#xff1a; static xQueueHandle gpio_evt_queue NULL;来定义队列&#xff0c;再用 gpio_evt_queue xQueueCreate(10, sizeof(uint32_t));来初始化队列。 然后使用&…

Aapache Tomcat AJP 文件包含漏洞(CVE-2020-1938)

1 漏洞描述 CVE-2020-1938 是 Apache Tomcat 中的一个严重安全漏洞&#xff0c;该漏洞涉及到 Tomcat 的 AJP&#xff08;Apache JServ Protocol&#xff09;连接器。由于 AJP 协议在处理请求时存在缺陷&#xff0c;攻击者可以利用此漏洞读取服务器上的任意文件&#xff0c;甚至…

量化交易入门——从零开始搭建自己的量化交易系统

本篇作为个人学习过程记录&#xff0c;从零开始&#xff0c;入门量化交易。 量化交易系统模块介绍 一般的量化交易系统包含如下的功能模块参考&#xff1a; 数据收集模块 数据是量化交易的基础&#xff0c;因此数据收集模块是整个系统的核心之一。它负责从各种数据源收集市场…

ruoyi-vue-pro 使用记录(3)

ruoyi-vue-pro 使用记录 ERP&#xff08;3&#xff09; ERP数据库产品销售库存采购财务 ERP 文档 主要分为 5 个核心模块&#xff1a;采购、销售、库存、产品、财务。 采购管理以 erp_purchase_ 作为前缀的表销售管理以 erp_sale_ 作为前缀的表库存管理以 erp_stock_ 作为前…

【Linux】Linux——Centos7安装Nginx

不需要安装包 1.安装依赖 #查看 C 环境是否安装gcc -v #查看 zlib 是否安装cat /usr/lib64/pkgconfig/zlib.pc #查看 pcre 是否安装pcre-config --version 2.安装C #安装C yum install gcc-c 3.安装pcre yum install -y pcre pcre-devel 4.安装zlib #安装 yum install -y zlib…

该问题未得到解决(仅记录)

https://releases.ubuntu.com/bionic/进入网页下载ubuntu 选择烧录软件将下载的Ubuntu烧录到U盘中 之前用这个U盘烧录过一次&#xff0c;成功了&#xff0c;后来应该是U盘受损或者是什么其他原因使得用这个U盘总是烧录失败

ChatGLM大模型简介

ChatGLM系列是国产大语言模型中性能最好、回答准确率最高的大模型。如果有毕业论文、课题研究的需要&#xff0c;可以关注一下这个大模型。 清华大学和智谱AI的第一代ChatGLM-6B在2023年3月份推出&#xff0c;开源模型推出之后不久就获得了很多的关注和使用。3个月后的2023年6…

快速上手文心一言指令

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…

c++ isupper() islower()

在C中&#xff0c;islower()和isupper()是C标准库中提供的两个字符判断函数。这两个函数用于判断一个字符是否为小写字母或大写字母。 islower()函数的原型如下&#xff1a; int islower(int c);它接受一个字符作为参数&#xff0c;返回非零值&#xff08;true&#xff09;表…

【LAMMPS学习】八、基础知识(5.10)LAMMPS流形(表面)

8. 基础知识 此部分描述了如何使用 LAMMPS 为用户和开发人员执行各种任务。术语表页面还列出了 MD 术语&#xff0c;以及相应 LAMMPS 手册页的链接。 LAMMPS 源代码分发的 examples 目录中包含的示例输入脚本以及示例脚本页面上突出显示的示例输入脚本还展示了如何设置和运行各…

【NPM】Nginx Proxy Manager 一键申请 SSL 证书,自动续期,解决阿里云SSL免费证书每3个月失效问题

文章目录 1、NPM 简介2、实战Step 1&#xff1a;环境搭建 也可以看作者安装笔记 Step 2&#xff1a;创建容器 2.1 在系统任意位置创建一个文件夹&#xff0c;此文档以~/nginx-proxy-manager为例。2.2 创建docker-compose.yaml2.3 启动NPM服务 Step 3&#xff1a;配置反向代理3…

搭建知识库必备:12个开源 Wiki 软件工具盘点

在任何成功的公司中&#xff0c;部门间的知识共享是至关重要的。如果没有一个简单的信息交流方法&#xff0c;团队怎样才能有效合作呢&#xff1f;Wiki软件提供了一种创建、组织及在全公司范围内分享知识的直接方法。但是&#xff0c;哪一种Wiki软件是最佳的选择呢&#xff1f;…

给网络镜像模式下的 WSL2 使用 127.0.0.1代理的方法

网络镜像模式下的WSL2虽然复制了宿主机windows的ip&#xff0c;但是仍然无法访问127.0.0.1的代理。经过调查&#xff0c;发现因为WSL2从应用商店下载而来&#xff0c;所以可能是UWP应用&#xff0c;所以需要用工具解除环回代理限制。

Java入门基础学习笔记13——数据类型

数据类型的分类&#xff1a; 基本数据类型 引用数据类型 基本数据类型&#xff1a;4大类8种类型&#xff1a; 定义整形用int&#xff0c;再大的数用long。 package cn.ensource.variable;public class VariableDemo2 {public static void main(String[] args) {//目标&#x…