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

vite, vue3, vue-router, vuex, ES6学习日记

学习使用vite+vue3的所遇问题总结(2024年2月1日)

  1. 组件中使用<script>标签忘记加 setup
    在这里插入图片描述

这会导致Navbar 没有暴露出来,导致使用不了,出现以下报错
在这里插入图片描述
这是因为,如果不用setup,就得使用 export default ……
setup 是后者的语法糖

  1. 在Vue.js中,你可以通过route对象来接收从router-link传递过来的参数。具体来说,你可以使用route对象的params属性来获取路由参数。

  2. 通过 传递的参数,都需要设置到路由中,否则会丢失参数
    在这里插入图片描述
    在这里插入图片描述

vite/vue3/vue-router/vuex 已经整体上掌握,开始复习ES6(2024年2月2日)

学习资料来源: 菜鸟教程

let 和 const 命令。

  1. let 块级作用域
 for (let i = 0; i < 10; i++) {// ...
}
  1. const 声明一个只读变量,声明之后不允许改变。意味着,一旦声明必须初始化,否则会报错。

  2. 注意要点
    const 如何做到变量在声明初始化之后不允许改变的?其实 const 其实保证的不是变量的值不变,而是保证变量指向的内存地址所保存的数据不允许改动。此时,你可能已经想到,简单类型和复合类型保存值的方式是不同的。是的,对于简单类型(数值 number、字符串 string 、布尔值 boolean),值就保存在变量指向的那个内存地址,因此 const 声明的简单类型变量等同于常量。而复杂类型(对象 object,数组 array,函数 function),变量指向的内存地址其实是保存了一个指向实际数据的指针,所以 const 只能保证指针是固定的,至于指针指向的数据结构变不变就无法控制了,所以使用 const 声明复杂类型对象时要慎重。

  3. ES6 解构赋值
    解构赋值是对赋值运算符的扩展。
    他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。

  4. ES6 引入了一种新的原始数据类型 Symbol ,表示独一无二的值,最大的用法是用来定义对象的唯一属性名。
    注意点
    Symbol 值作为属性名时,该属性是公有属性不是私有属性,可以在类的外部访问。但是不会出现在 for…in 、 for…of 的循环中,也不会被 Object.keys() 、 Object.getOwnPropertyNames() 返回。如果要读取到一个对象的 Symbol 属性,可以通过 Object.getOwnPropertySymbols() 和 Reflect.ownKeys() 取到。

  5. ES6 Map 与 Set
    Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。

  6. Proxy 与 Reflect 是 ES6 为了操作对象引入的 API 。
    Proxy 不直接操作对象,而是像代理模式,通过对象的代理对象进行操作;
    通过构造函数新建实例时其实是对目标对象进行了浅拷贝,因此目标对象与代理对象会互相影响;
    get() 方法可以继承,let obj = Object.create(proxy);
    Reflect 可以用于获取目标对象的行为,它的方法与 Proxy 是对应的。

  7. 箭头函数
    箭头函数体中的 this 对象,是定义函数时的对象,而不是使用函数时的对象。

  8. 在JavaScript中,如果一个函数没有明确的return语句或者没有返回值,它会默认返回"undefined"。而且就算是return了而没有执行,它此时的类型也是undefined。

  9. class 的本质是 function。
    它可以看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。
    类中方法不需要 function 关键字。
    方法间不能加分号。

  10. ES6 模块
    ES6 的模块自动开启严格模式,不管你有没有在模块头部加上 use strict;。

  11. ES6 Promise 对象
    是异步编程的一种解决方案。

从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。

相关文章:

vite, vue3, vue-router, vuex, ES6学习日记

学习使用vitevue3的所遇问题总结&#xff08;2024年2月1日&#xff09; 组件中使用<script>标签忘记加 setup 这会导致Navbar 没有暴露出来&#xff0c;导致使用不了&#xff0c;出现以下报错 这是因为&#xff0c;如果不用setup&#xff0c;就得使用 export default…...

25考研|660/880/1000/1800全年带刷计划

作为一个参加过两次研究生考试的老学姐&#xff0c;我觉得考研数学的难度完全取决于你自己 我自己就是一个很好的例子 21年数学题目是公认的简单&#xff0c;那一年考130的很多&#xff0c;但是我那一年只考了87分。但是22年又都说是有史以来最难的一年&#xff0c;和20年的难度…...

Mybatis基础教程及使用细节

本篇主要对Mybatis基础使用进行总结&#xff0c;包括Mybatis的基础操作&#xff0c;使用注解进行增删改查的练习&#xff1b;详细介绍xml映射文件配置过程并且使用xml映射文件进行动态sql语句进行条件查询&#xff1b;为了简化java开发提高效率&#xff0c;介绍一下依赖&#x…...

10 分钟在K8s 中部署轻量级日志系统 Loki

转载至我的博客 https://www.infrastack.cn &#xff0c;公众号&#xff1a;架构成长指南 Loki 是什么&#xff1f; Loki是由Grafana Labs开源的一个水平可扩展、高可用性&#xff0c;多租户的日志聚合系统的日志聚合系统。它的设计初衷是为了解决在大规模分布式系统中&#x…...

图像处理python基础

array 读取图片 tensor 模型预测 一般过程&#xff1a;读取数据np->tensor->model->result->np->画图 shape确保图像输入输出尺寸正确 读取图片 将在GPU上运行的tensor类型转变成在CPU上运行的np类型 三类计算机视觉任务的输入&#xff1a; 分类&#xff1…...

基于WordPress开发微信小程序2:决定开发一个wordpress主题

上一篇&#xff1a;基于WordPress开发微信小程序1&#xff1a;搭建Wordpress-CSDN博客 很快发现一个问题&#xff0c;如果使用别人的主题模板&#xff0c;多多少少存在麻烦&#xff0c;所以一咬牙&#xff0c;决定自己开发一个主题模板&#xff0c;并且开源在gitee上&#xff…...

[Python] 什么是网格搜索以及scikit-learn中GridSearch类的介绍和使用案例?

什么是网格搜索&#xff1f; 网格搜索是一种参数调优的方法&#xff0c;它可以帮助找到最佳的模型参数。在网格搜索中&#xff0c;我们先指定参数的候选值范围&#xff0c;然后枚举所有可能的参数组合&#xff0c;计算每个模型的性能指标&#xff08;比如准确率、精确率等&…...

Linux-正则表达式

1.正则表达式的定义&#xff1a; 正则表达式通常用于判断语句中&#xff0c;使用字符串描述、匹配一系列符合某个规则的字符串。 正则表达式是由普通字符与元字符组成。 普通字符包括小写字母、数字、标点符号及一些其他符号。元字符是指在正则表达式中具有特殊意义的专用字符&…...

Java基础学习:System类和Static方法的实际使用

一、System类 1.在程序开发中&#xff0c;我们需要对这个运行的结果进行检验跟我们预判的结果是否一致&#xff0c;就会用到打印结果在控制台中显示出来使用到了System类。System类定义了一些和系统相关的属性和方法&#xff0c;它的属性和方法都是属于静态的&#xff0c;想使用…...

线性代数------矩阵的运算和逆矩阵

矩阵VS行列式 矩阵是一个数表&#xff0c;而行列式是一个具体的数&#xff1b; 矩阵是使用大写字母表示&#xff0c;行列式是使用类似绝对值的两个竖杠&#xff1b; 矩阵的行数可以不等于列数&#xff0c;但是行列式的行数等于列数&#xff1b; 1.矩阵的数乘就是矩阵的每个…...

Flutter 开发3:创建第一个Flutter应用

Step 1: 安装Flutter 1.1 下载Flutter SDK 首先&#xff0c;你需要访问Flutter官方网站下载最新的Flutter SDK。选择适合你操作系统的安装包。 $ cd ~/development $ unzip ~/Downloads/flutter_macos_2.2.3-stable.zip1.2 更新环境变量 接下来&#xff0c;你需要将Flutter…...

Linux中断下半部分:软中断,tasklet和工作队列

为什么要有下半部分 中断会打断其他程序&#xff0c;为了打断其他程序时间短&#xff0c;就需要中断处理程序快。执行中断处理程序后&#xff0c;相同中断不会触发&#xff0c;甚至所有中断都不能触发&#xff08;设置IRQF_DISABLED&#xff0c;其他硬件与操作系统无法通信)中…...

Flink CEP实现10秒内连续登录失败用户分析

1、什么是CEP&#xff1f; Flink CEP即 Flink Complex Event Processing&#xff0c;是基于DataStream流式数据提供的一套复杂事件处理编程模型。你可以把他理解为基于无界流的一套正则匹配模型&#xff0c;即对于无界流中的各种数据(称为事件)&#xff0c;提供一种组合匹配的…...

QSqlRelationalTableModel 关系表格模型

一、 1.1 QSqlRelationalTableModel继承自QSqlTableModel&#xff0c;并且对其进行了扩展&#xff0c;提供了对外键的支持。一个外键就是一个表中的一个字段 和 其他表中的主键字段之间的一对一的映射。例如&#xff0c;“studInfo”表中的departID字段对应的是“departments…...

JS和CSS实现的原生轮播图

JSCSS实现滑动轮播图 使用JS加CSS来实现的幻灯片&#xff0c;主要使用的是CSS的transform属性中的translate来实现&#xff0c;适合与用户交互的轮播图&#xff0c;展现轮播图的数量&#xff0c;用户可自由进行选择。 <!DOCTYPE html> <html lang"en">&…...

【微服务】skywalking自定义链路追踪与日志采集

目录 一、前言 二、自定义链路追踪简介 2.1 自定义链路追踪应用场景 2.2 链路追踪几个关键概念 三、skywalking 自定义链路追踪实现 3.1 环境准备 3.2 集成过程 3.2.1 导入核心依赖 3.2.2 几个常用注解 3.2.3 方法集成 3.2.4 上报追踪信息 四、skywalking 自定义日志…...

MYSQL基础问题

一&#xff0e;DBMS 是什么 DBMS&#xff08;Database Management System&#xff09;,数据库管理系统&#xff0c;是一种操纵和管理 数据库的大型软件&#xff0c;用于建立、使用和维护数据库。对数据库进行统一的管理和 控制&#xff0c;以保证数据库的安全性和完整性。 二…...

SpringBoot使用Guava实现日志脱敏(含源码)

点击下载《SpringBoot使用Guava实现日志脱敏&#xff08;含源码&#xff09;》 1. 摘要 本文将介绍如何使用Google Guava库进行日志脱敏&#xff0c;保护敏感数据的安全。我们将详细解释脱敏的必要性&#xff0c;然后介绍如何使用Guava中的Strings、Maps和CharMatcher类来进行…...

数据结构—动态查找

动态查找介绍 1. 动态查找的引入&#xff1a;当查找表以线性表的形式组织时&#xff0c;若对查找表进行插入、删除或排序操作&#xff0c;就必须移动大量的记录&#xff0c;当记录数很多时&#xff0c;这种移动的代价很大。 2. 动态查找表的设计思想&#xff1a;表结构本身是…...

Tarjan算法学习笔记

目录 无向图的割点与桥 时间戳&#xff1a; 搜索树&#xff1a; 追溯值&#xff1a; 割边判定法则&#xff1a; 割点判定法则&#xff1a; 无向图的双连通分量 定理&#xff1a; 边双连通分量(e-DCC)的求法&#xff1a; e-DCC的缩点&#xff1a; 有向图的连通性 追…...

求解插值多项式及其余项表达式

例 求满足 P ( x j ) f ( x j ) P(x_j) f(x_j) P(xj​)f(xj​) ( j 0 , 1 , 2 j0,1,2 j0,1,2) 及 P ′ ( x 1 ) f ′ ( x 1 ) P(x_1) f(x_1) P′(x1​)f′(x1​) 的插值多项式及其余项表达式。 解&#xff1a; 由给定条件&#xff0c;可确定次数不超过3的插值多项式。…...

生成模型+两种机器学习范式

生成模型&#xff1a;从数据分布到样本创造 生成模型&#xff08;Generative Model&#xff09; 是机器学习中一类能够学习数据整体概率分布&#xff0c;并生成新样本的模型。其核心目标是建模输入数据 x 和标签 y 的联合概率分布 P(x,y)&#xff0c;即回答 “数据是如何产生的…...

瀚文(HelloWord)智能键盘项目深度剖析:从0到1的全流程解读

瀚文&#xff08;HelloWord&#xff09;智能键盘项目深度剖析&#xff1a;从0到1的全流程解读 一、项目整体概述 瀚文&#xff08;HelloWord&#xff09;智能键盘是一款多功能、模块化的智能机械键盘&#xff0c;由三大部分组成&#xff1a;键盘输入模块、可替换的多功能交互…...

ubuntu中使用docker

上一篇我已经下载了一个ubuntu:20.04的镜像&#xff1b; 1. 查看所有镜像 sudo docker images 2. 基于本地存在的ubuntu:20.04镜像创建一个容器&#xff0c;容器的名为cppubuntu-1。创建的时候就会启动容器。 sudo docker run -itd --name cppubuntu-1 ubuntu:20.04 结果出…...

阿里云服务器安装nginx并配置前端资源路径(前后端部署到一台服务器并成功访问)

​​​运行以下命令&#xff0c;安装Nginx相关依赖。 yum install -y gcc-c yum install -y pcre pcre-devel yum install -y zlib zlib-devel yum install -y openssl openssl-devel 运行wget命令下载Nginx 1.21.6。 您可以通过Nginx开源社区直接获取对应版本的安装包URL&…...

在C++中,头文件(.h或.hpp)的标准写法

目录 1.头文件保护&#xff08;Include Guards&#xff09;2.包含必要的标准库头文件3.前向声明&#xff08;Forward Declarations&#xff09;4.命名空间5.注释示例1&#xff1a;基础头文件示例2&#xff1a;包含模板和内联函数的头文件示例3&#xff1a;C11风格的枚举类头文件…...

ReLU 新生:从死亡困境到强势回归

背景 在深度学习领域&#xff0c;激活函数的探索已成为独立研究课题。诸如 GELU、SELU 和 SiLU 等新型激活函数&#xff0c;因具备平滑梯度与出色的收敛特性&#xff0c;正备受关注。经典 ReLU 凭借简洁性、固有稀疏性及其独特优势拓扑特性&#xff0c;依旧受青睐。然而&#…...

JavaScript 本地存储 (localStorage) 完全指南

文章目录 JavaScript 本地存储 (localStorage) 完全指南 &#x1f510;一、什么是 localStorage&#xff1f;&#x1f4a1;二、如何使用 localStorage&#xff1f;&#x1f527;1. 存储数据2. 读取数据3. 删除数据4. 清空所有数据 三、存储对象和数组的技巧 &#x1f3a8;1. 存…...

手机上网可以固定ip地址吗?详细解析

在移动互联网时代&#xff0c;手机已成为人们日常上网的主要设备之一。无论是工作、学习还是娱乐&#xff0c;稳定的网络连接都至关重要。许多用户对IP地址的概念有所了解&#xff0c;尤其是固定IP地址的需求。那么&#xff0c;手机上网能否固定IP地址&#xff1f;又该如何实现…...

AI图片售卖:是暴利新风口还是虚幻泡沫?哪些平台适合售卖AI图片

还记得去年大火的Midjourney吗&#xff1f;今年4月&#xff0c;Midjourney又发布了备受期待的V7版本&#xff0c;带来了更高的图像质量和创新功能。使用Midjourney、Stable Diffusion、DALLE等AI图片生成工具&#xff0c;创作者只需输入关键词即可获得高质量的原创图片。这一变…...