-ELZ-

原创 简单学习一下 Pinia

文章目录引入 Pinia创建 Store在组件中读取 Store 数据在组件中修改 Store 数据对 Store 进行解构修改 Store 状态数据的多种方式Getters 的使用Store 的互相调用引入 Pinia首先在 main.ts 中引入 pinia，通过 createPinia 创建 pinia 实例，然后挂载到 Vue 根实例上。import { createApp } from 'vue'import App from './App.vue'import { createPini

原创 ES6 新特性

文章目录函数的扩展参数的默认值函数的扩展参数的默认值// ES5 写法function log(x, y) { if (typeof y === 'undefined') { y = 100; } console.log(x, y);}log(10); // 10 100log(10, 20); // 10 20// ES6 写法function log(x, y = 100) { console.log(x, y);}log(10); // 10 1

原创 for...in 和 for...of

文章目录for...infor...of区别for…infor...in语句以任意顺序遍历一个对象的除 Symbol 以外的可枚举属性，包括继承的可枚举属性。基本用法：const cat = { name: "Tom", age: 100,};const color = Symbol("color");cat[color] = "pink";console.log(cat); // { name: "Tom", age: 100, Symbol(color): "pink" }

原创 Array.prototype.reduce()

Array.prototype.reduce()reduce()方法对数组中的每个元素执行提供的reducer函数，将其结果汇总为单个返回值。语法：arr.reduce(callback(acc, cur [, idx [, array]]) [, initialValue])acc：累加器表示上一次调用累加器的返回值，或设置的initialValue值，如果没设置initialValue，则acc为数组的第一个元素值。const arr = [1, 2, 3, 4, 5];// 未设

原创 JS 实现继承的 5 种方式

文章目录继承原型链继承原型链继承的优缺点继承原型链继承继承作为面向对象语言的三大特性之一（继承、封装和多态），可以在不影响父类对象实现的情况下，使得子类对象具有父类对象的特性，同时还能在不影响父类对象行为的情况下扩展子类对象独有的特性，为编码带来了极大的便利。原型链继承的优缺点...

原创 创建对象的 7 种方式

文章目录基于对象字面量基于 Object() 构造函数基于工厂方法模式基于构造函数模式基于原型对象的模式构造函数和原型混合的模式基于动态原型模式参考基于对象字面量对象字面量本身就是一些列键值对的组合，每个属性之间通过逗号分隔。const obj = { name: 'Tom', age: 100, getAge() { return this.age; }}基于 Object() 构造函数通过 Object() 对象的构造函数生成一个实例，然后给他们增加需要的各种属性。// 通

原创 VScode 的安装和使用

文章目录下载VSCode 提示“安装视乎顺坏、请重新安装”下载VScode 下载慢的解决方法：点击跳转至官网点击下载2. 来到下载页面后，右击复制下载链接。3. 把下载链接中的域名（红线部分）改为vscode.cdn.azure.cn回车即可。VSCode 提示“安装视乎顺坏、请重新安装”解决方法：第一步：安装Fix VSCode Checksums 插件第二步：Ctrl + Shift + p，输入Fix Checksums:Apply 后回车，重启即可。...

原创 ES6 数组的扩展：扩展运算符

文章目录扩展运算符应用扩展运算符扩展运算符（…）作用是将一个数组转为用逗号分隔的参数序列。console.log(...[1, 2, 3]); // 1 2 3console.log(1, ...[2, 3]); // 1 2 3该运算符主要用于函数调用：function _push(arr, ...items) { // 这里的 ...items 将会以数组的形式接收所有剩余的参数 console.log(items); // [2, 3] arr.push(...items);

原创 数据结构：栈与队列

文章目录栈队列参考资料栈栈是一种线性的、后进先出的数据结构。进栈：出栈：使用 JS 实现栈：class Stack { /**存储栈中的数据 */ stack = []; /** * 添加一个元素到栈中（进栈） * @param {*} item 数据 */ push(item) { this.stack.push(item); } /** * 获取栈的最后一个元素（出栈） * @returns "栈为空" || 元素

原创 JS 中常用判断为空的方法

文章目录1 判断变量为空对象2 判断变量为空数组3 判断变量为空字符串1 判断变量为空对象判断一个变量是否为空对象时，可以通过 for...in 语句遍历变量的属性，然后调用 hasOwnProperty() 函数，判断是否有自身存在的属性，如果存在则不为空对象。function isEmpty(obj) { for (item in obj) { if (obj.hasOwnProperty(item)) { return false; } } return

原创 简单学习常见算法

1 字符串逆序输出算法1.1 使用 reverse() 函数首先将字符串转换为字符数组，然后通过调用原生的reverse()函数进行逆序，得到逆序数组后再通过join()函数得到逆序字符串。function reverseStr(str) { return str .split("") .reverse() .join("");}let str = "abcdefg";console.log(reverseStr(str));1.2 使用栈的先进后出原则栈是

原创 在电脑上查看WIFI的密码

原创 数据库系统原理-第一章：数据库系统概述

文章目录1 数据库基本概念2 数据库管理技术的发展1 数据库基本概念⏳『数据概念』(识记)数据（Data）是描述事物的符号记录，是指利用物理符号记录下来的、可以鉴别的信息。⏳『数据库概念』(识记)数据库（Database，DB）是指长期储存在计算机中的有组织的、可共享的数据集合。数据要按照一定的数据模型组织、描述和存储，具有较小的冗余度（不必要的多次重复的数据不必多次存储）、较高的数据独立性，系统易于扩展，并可以被多个用户分享。⏳『数据库存储的数据三个基本特点』(识记)永久存储有组织

原创 数组的浅拷贝与深拷贝

文章目录1 数据类型2 浅拷贝与深拷贝3 实现深拷贝方法3.1 JSON.string() 结合 JSON.parse()3.2 递归4 JS 中的拷贝方法4.1 concat4.2 slice4.3 ...4.4 Object.assign5 以上方法比较6 参考文章1 数据类型在 JavaScript 中，数据被分为基本数据类型和引用数据类型。⏳ 基本数据类型有：StringNumberBooleanUndefinedNullSymbol（ES 6 新增的数据类型）⏳ 引用数据

原创 简单学习 CSS3 新特性

文章目录1 边框1.1 圆角1.2 阴影1.3 边框图像2 渐变(Gradients)2.1 线性渐变2.2 径向渐变1 边框新边框属性属性说明border-radius用于设置元素的外边框圆角box-shadow用于在元素的框架上添加阴影效果border-image用于在元素的边框上绘制图1.1 圆角border-radius 属性是一个简写属性，是将这四个属性border-top-left-radius、border-top-right-radiu.

原创 事件修饰符

文章目录1️⃣ `.stop`2️⃣ `.prevent`3️⃣ `.capture`4️⃣ `.self`5️⃣ `.once`6️⃣ `.passive`1️⃣ .stop作用：阻止单击事件继续传播（阻止事件冒泡和事件捕获）<template> <div @click="divClick"> <button @click="btn1Click">按钮_1</button> <button @click.stop="btn2.

原创 JavaScript 总结

文章目录1 “use strict” 是什么意思？2 数据类型转换3 0.1 + 0.2 !== 0.34 typeof null === 'object'5 null，undefined 的区别？6 break 与 continue 有什么区别？7 obj.name 与 obj[name] 与 obj.['name']8 原型链9 new 关键字做了什么？10. 执行上下文栈11. 垃圾回收机制12. 扁平数组13. 递归1~100的和14 单线程和多线程15. 事件循环16. setTimeout 倒.

原创 数组去重方法总结

文章目录1. 双层 for 循环2. for 循环 + indexOf()3. filter() + indexOf()4. for 循环 + includes()5. reduce() + includes()6. sort()ES6 语法去重7. Set()8. Map()特殊类型比较1. 双层 for 循环var array = [1, 1, "1", "1", 1];// 写法一function unique(arr) { let res = [...array]; for (.

原创 计算机网络原理-第七章：无线与移动网络

文章目录1 无线网络1.1 无线网络基本结构1.2 无线链路与无线网络特性2 移动网络2.1 移动网络基本原理2.2 寻址2.3 移动节点的路由选择3 无线局域网 IEEE 8802.111 无线网络1.1 无线网络基本结构无线网络基本组成主要包括以下几个部分：无线主机无线链路基站网络基础设施自组织网络（Ad Hoc网络）1.2 无线链路与无线网络特性无线网络与有线网络最主要的区别是使用了无线链路，而无线链路标准的两种主要特性为覆盖区域和链路速率。无线链路与有线链路的主要区别：

原创 计算机网络原理-第八章：网络安全基础

目录1 网络安全概述1.1 基本概念1.2 网络安全威胁2 数据加密2.1 传统加密方式2.2 对称密钥加密2.3 非对称/公开密钥加密3 消息完整性与数字签名3.1 消息完整性检测方法3.2 报文认证3.3 数字签名4 身份认证5 密钥分发中心与证书认证机构5.1 密钥分发中心5.2 证书认证机构1 网络安全概述1.1 基本概念⏳ 网络安全通信所需要的基本属性：机密性消息完整性可访问与可用性身份认证1.2 网络安全威胁⏳ 网络安全主要面临的威胁：窃听插入假冒劫持拒绝服务

原创 Ajax 系列：2️⃣ 使用 Promise 封装 Ajax

文章目录Ajax 的 GET 请求封装Ajax 的 POST 请求封装Ajax 的完整封装Ajax 的 GET 请求封装function getPromise(param) { return new Promise((resolve, reject) => { // 0. 将参数转换成字符串格式：xxx?name=cez&age=18 var objStr = objToString(param.data); // 1. 创建一个异步对象 xmlhttp;.

原创 计算机网络原理-第六章：物理层

文章目录1 数据通信基础1.1 数据通信基本概念1.2 数据通信系统模型1 数据通信基础1.1 数据通信基本概念消息：人类能够感知的描述称为消息。比如眼睛能看到文字和图像，耳朵能听到声音等。信息：信息是对事物状态或存在方式的不确定性表述，信息是可以度量的。其大小与消息的不确定性，即概率成反比，某件事情发生的概率越大，其产生的信息量越小；反之则越大。通信：本质就是在一点精确或近似地再生另一点的信息。通信系统：能够实现通信功能的各种技术、设备和方法的总体。信号：通信系统中，在传输通道中传播的信息

原创 计算机网络原理-第五章：数据链路层与局域网

目录1 数据链路层服务2 差错控制2.1 差错控制的基本方式2.2 差错编码的基本原理2.3 差错编码的检错与纠错能力2.4 典型的差错编码2.4.1 奇偶校验码2.4.2 汉明码2.4.3 循环冗余码（CRC）3 多路访问控制协议3.1 信道划分 MAC 协议3.1.1 频分多路复用（FDM）3.1.2 时分多路复用（TDM）3.1.3 波分多路复用（WDM）3.1.4 码分多路复用（CDM）3.2 随机访问 MAC 协议3.2.1 ALOHA 协议3.2.2 载波监听多路访问协议3.2.3 带冲突检测的

原创 Ajax 系列：简单理解 Ajax

文章目录1 概述2 Ajax 的使用2.1 创建对象2.2 指定请求方法和URL2.3 发送请求2.4 服务器响应处理2.5 中断请求3 知识点补充4 参考资料1 概述Ajax 是一种异步请求数据的 Web 开发技术，在无效重新加载整个页面的情况下，通过异步请求加载后台数据，并在网页上呈现出来，提高了用户体验。2 Ajax 的使用2.1 创建对象var ajax = new XMLHttpRequest();XMLHttpRequest 对象的重要属性和事件：readyState：请求.

原创 错题小本本

1.下面代码执行结果是？var h5course = false;var result = h5course / 0;if (result) { console.log(result * 2 + "2" + 4);} else { console.log(!result * 2 + "2" + "4");}答案：“224”解析：0/0，null/0，undefined/0，false/0 都为 NaN，其它整数/0 为 infinity，其它负数/0 为 -infinity。.

原创 JS 延迟加载方法

文章目录1 JS 延迟加载2 JS 延迟加载方式2.1 defer2.2 async2.3 defer 和 async 异同点2.4 setTimeout2.5 动态创建 DOM 方式2.6 将脚本元素放在文档的底部3 DOMContentLoaded4 load1 JS 延迟加载『什么是 JS 延迟加载』简单来说，JS 延迟加载就是等 HTML 文档解析完成后再执行 JS 脚本。『JS 延迟加载有什么作用』1️⃣ 有助于提高页面加载速度。因为外联普通 JavaScript 脚本的加载和执行都.

原创 CSS 总结

文章目录1 盒模型2. rem、em、vh、px 各自代表的含义3. 实现水平居中、垂直居中4. 画出一条 0.5px 的线5. 画一个三角形6. 清除浮动的方式7. CSS 加载方式有几种？8. link 和 @import 有什么区别？9. CSS 选择器常见的有几种？10. 伪类与伪元素？11. 选择器的优先级是如何计算的？12. BFC 的简单理解13. CSS3 新增特性14. 行内元素和块级元素15. 绝对地位和相对定位16. 两个按钮中间为何产生缝隙？如何解决？17. 让一个元素“看不见”有.

原创 Vue 总结

文章目录???? Vue 生命周期???? v-show VS v-if???? computed VS watch???? 组件间的传值方式???? Vue 生命周期beforeCreate：创建前created：创建后beforeMount：挂载前mounted：挂载后beforeUpdate：更新前updated：更新后beforeUnmount：销毁前unmounted：销毁后『第一次加载页面会触发哪些钩子函数』会触发 beforeCreate、created、befor

原创 Vue 通信方式

文章目录1 各种组件之间通信方式2 祖孙组件之间通信3 父子组件之间通信4 兄弟组件之间通信5 任意组件之间通信1 各种组件之间通信方式2 祖孙组件之间通信对于组件层次结构比较深的的情况，祖先组件使用 provide 选项来提供数据，子孙组件使用 inject 选项来使用这些数据。<body> <div id="app"></div> <script src="https://unpkg.com/vue@next"></scri.

原创 HTML 总结

文章目录1 HTML 标签语义化2 H5 新增特性3 ‹label› 标签作用4 ‹image› 标签上 title 属性与 alt 属性的区别是什么？5 DOCTYPE 的作用？严格模式和混杂模式？6 HTML5 为什么只写 ‹!DOCTYPE html› ？7 src 和 href 的区别8 data-xxx 属性的作用？9 meta 有哪些常见的值？10 如何在 HTML 页面上展示 ‹div›‹/div› 这几个字符？11 在 input 里，name 有什么作用？12 网页验证码有什么作用？1.

原创 简单理解 async/await

文章目录1 基本用法1.1 编写第一个 async/await 函数2 async2.1 返回 Promise 对象2.2 Promise 对象的状态变化2.3 async 函数的多种使用形式2.4 使用 Promise.all() 实现并行2.5 在 for 循环中正确使用 await3 await4 async 函数中的错误处理5 参考资料1 基本用法1.1 编写第一个 async/await 函数async 表示函数里有异步操作。await 表示紧跟在后面的异步操作执行完，再接着执行函数体内.

原创 简单理解箭头函数

文章目录1. 基本用法1.1 参数1.2 代码块的写法1.3 与变量解构结合使用2. 使用注意点2.1 箭头函数 this 指向上层作用域中的 this2.2 不能用作构造函数2.3 没有 arguments 对象3. 不适用场合4. 参考资料1. 基本用法1.1 参数1️⃣ 无参数情况var fun = () => 18;// 等同于var fun = function () { return 18; };2️⃣ 多个参数情况var fun = (num1, num2) =&g.

原创 let 和 const 命令

文章目录1. let 和 const 命令共同点1.1 声明的全局变量，不属于顶层对象的属性1.2 声明的变量只在它所在的代码块有效1.3 不存在变量提升1.4 暂时性死区1.5 不允许重复声明2. const 命令2.1 声明的变量是只读的2.2 不允许更改的是变量保存的内存地址3 参考资料1. let 和 const 命令共同点let 和 const 命令异同点如下：1.1 声明的全局变量，不属于顶层对象的属性顶层对象，在浏览器环境中指的是 window 对象，在 Node 环境中指的是 .

原创 图片的懒加载和预加载

文章目录1. 懒加载1.1 懒加载的介绍1.2 懒加载的原理1.3 懒加载的实现2. 预加载2.1 预加载的介绍2.2 预加载的原理2.3 预加载的实现3. 参考资料1. 懒加载1.1 懒加载的介绍1️⃣ 什么是预加载？预加载也叫作延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。当访问一个页面的时候，先把 img 元素或者其它元素的背景图片路径设置成本地默认图片（充当占位图，减少请求次数），可视区域外的图像不会加载，只有当图片出现在浏览器的可视区域内时，才设置图片的真正路.

原创 BFC 的简单理解

文章目录☠ BFC 是什么？☠ 触发 BFC 方法？☠ BFC 的特性☠ BFC 的应用1. 清除浮动，避免高度坍塌2. 阻止元素被浮动元素覆盖3. 避免外边距重叠☠ BFC 是什么？BFC 的全称是 Block Formatting Context，名为 “块级格式化上下文”。作用是让触发 BFC 的元素处于一个完全独立的空间，使其子元素的布局不会影响到外面元素的布局。☠ 触发 BFC 方法？触发 BFC 的方法如下：根元素 <html>意味着整个 HTML 文档就是一个大

原创 可复用 & 组合--④：Teleport

Teleport基本用法Teleport 提供了一种方法，允许我们控制在 DOM 中哪个父节点下渲染 HTML。默认情况下<body> <div id="app"> <my-component></my-component> </div> <script src="https://unpkg.com/vue@next"></script> <script> const {

原创 可复用 & 组合--③：自定义指令

自定义指令简介除了默认内置的指令（列如 v-model 和 v-show），Vue 也允许注册自定义指令。比如：页面加载时，input 元素获得焦点。通过注册全局指令实现<body> <div id="app"> <input type="text" v-focus /> </div> <script src="https://unpkg.com/vue@next"></script> <scr

原创 Vite + Vue3.0 项目基础结构

此文章为学习笔记原文章链接：备战2021：Vite2项目最佳实践Vite + Vue3.0定义别名定义前：页面中引入组件的路径是相对路径或绝对路径。定义方法：此时 comps 就指向了路径/src/components。在页面中使用：注意：修改 vite.config.js 配置文件需要重启项目。路由安装路由npm install vue-router@next -S配置路由/src/router/index.jsimport { createRouter,

原创 Vite 学习之搭建第一个项目

Vite 的学习介绍Vite 是一种新型的前端构建工具。快速的冷启动使用原生 ESM 文件，无需打包轻量快速的热重载（HMR）按需编译搭建第一个 Vite 项目Vite 需要 Node.js 版本 >= 12.0.0检查 Node.js 版本命令：node -v使用 NPM 方式$ npm init vite@latest搭建成功后的项目结构：运行项目：$ npm install$ npm run dev使用 Yarn方式$ yarn crea

原创 简单了解 this 指向问题

this 关键字1.1 在对象方法中，this 表示该方法所属的对象1.2 如果单独使用，this 表示全局对象在浏览器中，this 表示 Window 对象在 Node 环境，this 表示 Global 对象1.3 在函数中，this 表示全局对象1.4 严格模式下，在函数中，this 是未定义的(undefined)1.5 在事件中，this 表示接收事件的元素1.6 call() 和 apply() 方法可以将 this 引用到任何对象call() 和 apply(