蓝桥杯备赛笔记 | Web开发

🚀2024蓝桥杯倒计时五十天…为什么当时报名了web组啊，应该报python组啊。好吧，既来之则安之

html

css

grid布局

Grid 布局是一种强大的 CSS 布局系统，它提供了一系列用于定义网格布局的属性。以下是一些常用的 Grid 布局属性：

display：指定元素的布局类型为网格布局。例如：display: grid;
grid-template-rows 和 grid-template-columns：定义网格的行和列结构。可以设置固定的长度值（如像素或百分比），也可以使用关键字（如 auto、min-content、max-content）或网格轨道（grid tracks）函数。
grid-template-areas：通过指定网格区域的名称来定义网格布局。可以使用网格区域名称创建一个网格模板，并将元素放置在相应的区域内。
grid-gap 或 gap：定义网格单元之间的间距。可以同时指定行间距和列间距，或者使用 row-gap 和 column-gap 分别指定行间距和列间距。
grid-auto-rows 和 grid-auto-columns：指定自动布局的行和列的大小。当网格容器中的网格项目无法适应显式定义的网格轨道时，这些属性定义了自动创建的隐式网格轨道的大小。
grid-auto-flow：定义如何分配自动布局的项目。可以指定为 row（从左到右，逐行排序）、column（从上到下，逐列排序）、dense（尽量填充空白单元格）等。
justify-items 和 align-items：定义网格项目在单元格中的对齐方式。justify-items 控制水平方向的对齐，而 align-items 控制垂直方向的对齐。
justify-content 和 align-content：定义网格容器内网格行和列的对齐方式。justify-content 控制水平方向的对齐，而 align-content 控制垂直方向的对齐。
justify-self 和 align-self：定义单个网格项目在单元格内的对齐方式。justify-self 控制水平方向的对齐，而 align-self 控制垂直方向的对齐。

这只是 Grid 布局提供的一些常用属性。Grid 布局还有其他一些属性，如 grid-column-start、grid-column-end、grid-row-start、grid-row-end 等，用于更精确地控制网格项目的位置和大小。通过组合和使用这些属性，可以创建出复杂而灵活的网格布局。

flex布局

Flex 布局（Flexbox）是一种用于创建灵活的、响应式的页面布局的 CSS 布局系统。以下是一些常用的 Flex 布局属性：

display：指定元素的布局类型为 Flex 布局。例如：display: flex;
flex-direction：定义 Flex 容器中 Flex 项目的排列方向。可以设置为 row（水平方向，从左到右）、row-reverse（水平方向，从右到左）、column（垂直方向，从上到下）、column-reverse（垂直方向，从下到上）。
flex-wrap：定义当 Flex 容器的 Flex 项目在一条轴线上放不下时是否换行。可以设置为 nowrap（不换行）、wrap（换行，从上到下）或 wrap-reverse（换行，从下到上）。
justify-content：定义 Flex 项目在主轴方向上的对齐方式。控制 Flex 项目沿主轴的水平对齐方式。可以设置为 flex-start（靠左对齐）、flex-end（靠右对齐）、center（居中对齐）、space-between（两端对齐，项目之间间隔相等）等。
align-items：定义 Flex 项目在交叉轴方向上的对齐方式。控制 Flex 项目沿交叉轴的垂直对齐方式。可以设置为 flex-start（靠上对齐）、flex-end（靠下对齐）、center（居中对齐）、baseline（基线对齐）等。
align-content：定义多行 Flex 项目在交叉轴方向上的对齐方式。当有多行 Flex 项目时，控制这些行在交叉轴上的对齐方式。可以设置为 flex-start（靠上对齐）、flex-end（靠下对齐）、center（居中对齐）、space-between（两端对齐，行之间间隔相等）等。
flex-grow：定义 Flex 项目的放大比例。指定 Flex 项目在剩余空间中相对于其他 Flex 项目的放大比例。默认为 0，即不放大。
flex-shrink：定义 Flex 项目的缩小比例。指定 Flex 项目在空间不足时相对于其他 Flex 项目的缩小比例。默认为 1，即等比例缩小。
flex-basis：定义 Flex 项目在主轴上的初始大小。可以设置为固定长度值（如像素或百分比）或 auto（根据内容自动计算大小）。
flex：是 flex-grow、flex-shrink 和 flex-basis 的简写形式。可以将这三个属性合并为一个属性进行设置。例如：flex: 1 1 auto;

这些是 Flex 布局提供的一些常用属性。通过组合和使用这些属性，可以创建出灵活、自适应的页面布局。

盒模型

CSS 盒模型是描述 HTML 元素在页面布局中所占空间的一种模型。它由内容区域（content）、内边距（padding）、边框（border）和外边距（margin）组成。这些部分围绕在一个内容区域，构成了一个矩形的盒子，用来表示和布局页面上的元素。

具体来说，盒模型可以分为两种：标准盒模型和怪异盒模型（IE 盒模型）。它们的区别在于对元素的宽度和高度的计算方式不同。

标准盒模型：
- 元素的宽度（width）和高度（height）只包括内容区域的尺寸。
- 内边距（padding）、边框（border）和外边距（margin）是在内容区域之外添加的，不会影响元素的宽度和高度。
怪异盒模型（IE 盒模型）：
- 元素的宽度（width）和高度（height）包括了内容区域、内边距（padding）和边框（border）的尺寸，但不包括外边距（margin）。
- 元素的宽度和高度是指定的内容区域的尺寸加上内边距和边框的尺寸。

在 CSS 中，我们可以通过 box-sizing 属性来控制盒模型的类型：

box-sizing: content-box; 表示标准盒模型。
box-sizing: border-box; 表示怪异盒模型。

盒模型在页面布局中非常重要，它影响了元素的尺寸计算、边距合并以及布局的方式。了解盒模型可以帮助我们更好地控制和调整页面元素的布局和样式。

伪类选择器

`nth-of-type`和`nth-child`

nth-of-type是父元素中指定类型的第几个子元素
nth-child则没有指定类型，是所有子元素的第几个

文本溢出

单行文字溢出

p {
	width: 100px;
	text-overflow: ellipsis;// 显示省略符号来代表被修剪的文本
    white-space: nowrap; //文本不会换行，文本会在在同一行上继续，直到遇到标签为止
    overflow: hidden;// 超出部分隐藏
}

多行文字溢出

p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

`transform`

transform 属性：用于对元素进行平移、旋转、缩放或倾斜等变换操作。它可以接受多个变换函数，每个函数之间使用空格分隔。

平移：translate() 函数，接受一个或两个参数，分别表示水平和垂直方向的位移。
旋转：rotate() 函数，接受一个参数，表示旋转的角度。
缩放：scale() 函数，接受一个或两个参数，分别表示水平和垂直方向的缩放比例。
倾斜：skew() 函数，接受一个或两个参数，分别表示水平和垂直方向的倾斜角度。

示例：

1
2
3

.myElement {
    transform: translate(50px, 50px) rotate(45deg) scale(1.5) skew(10deg, 20deg);
}

`filter`

filter 属性：用于将模糊、饱和度、对比度、亮度、颜色偏移等图形效果应用于元素。它可以接受多个滤镜函数，每个函数之间使用空格分隔。

模糊：blur() 函数，接受一个参数，表示模糊的程度。
饱和度：saturate() 函数，接受一个参数，表示饱和度的倍数。
对比度：contrast() 函数，接受一个参数，表示对比度的倍数。
亮度：brightness() 函数，接受一个参数，表示亮度的倍数。
颜色偏移：hue-rotate() 函数，接受一个参数，表示颜色的旋转角度。
阴影：drop-shadow() 函数，用于添加阴影效果。

示例：

1
2
3

.myElement {
    filter: blur(5px) saturate(200%) contrast(150%) brightness(1.5) hue-rotate(90deg);
}

JavaScript

一些方法

`filter()`

JavaScript 中的 filter() 方法是数组对象的一个内置方法，用于创建一个新的数组，其中包含满足指定条件的原始数组元素。

filter() 方法接受一个回调函数作为参数，该回调函数会对数组中的每个元素进行调用，并根据回调函数的返回值来确定是否包含该元素在结果数组中。回调函数接受三个参数：当前元素、当前索引和原始数组。

以下是 filter() 方法的基本语法：

1	`array.filter(callback(element, index, array))`

array: 要操作的原始数组。
callback: 回调函数，用于对数组的每个元素进行评估。
element: 当前正在处理的数组元素。
index (可选): 当前元素的索引。
array (可选): 原始数组。

filter() 方法会遍历原始数组的每个元素，并将满足回调函数条件的元素添加到结果数组中。最后，它返回这个结果数组。

以下是一个简单的例子，演示如何使用 filter() 方法来筛选出数组中大于 5 的元素：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const filteredNumbers = numbers.filter((number) => number > 5);

console.log(filteredNumbers); // 输出 [6, 7, 8, 9, 10]

在上述例子中，filter() 方法根据回调函数 (number) => number > 5 的返回值来决定元素是否包含在结果数组中。

`search()`

在 JavaScript 中，search() 是字符串对象的一个内置方法，用于搜索字符串中与指定正则表达式匹配的第一个位置。

search() 方法接受一个正则表达式作为参数，并返回匹配结果的索引。如果找到匹配项，则返回第一个匹配项的索引；如果未找到匹配项，则返回 -1。

以下是 search() 方法的基本语法：

1	`string.search(regexp)`

string: 要搜索的字符串。
regexp: 要匹配的正则表达式。

下面是一个简单的例子，演示如何使用 search() 方法来搜索字符串中的特定模式：

const str = 'Hello, world!';

const position = str.search(/world/);

console.log(position); // 输出 7

在上述例子中，search() 方法使用正则表达式 /world/ 来搜索字符串 str 中是否包含 “world”。由于 “world” 出现在索引 7 处，因此 search() 方法返回 7。

需要注意的是，search() 方法只返回第一个匹配项的索引。如果你需要获取更多关于匹配项的信息（如匹配的文本、多个匹配项等），可以考虑使用 match() 方法或利用正则表达式的 exec() 方法。

`flat()`

flat() 是 JavaScript 数组的⼀个⽅法，⽤于将多维数组扁平化为⼀维数组。

该⽅法可以接收⼀个整数参数，表示要扁平化的嵌套层数。例如，如果传递参数 2 ，则会将⼆维数组扁平化为⼀维数组，但不会将三维及以上的数组扁平化。

如果不传递参数，则默认值扁平化⼀层。如果数组中有空位（即未定义的元素），则 ﬂat() ⽅法默认会将其删除，返回⼀个新的不含空位的数组。

以下是 ﬂat() ⽅法的示例⽤法：

const arr1 = [1, 2, [3, 4]];

arr1.flat(); // [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];

arr2.flat(); // [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];

arr3.flat(2); // [1, 2, 3, 4, 5, 6]

在上⾯的示例中，arr1 和 arr2 数组中的嵌套数组都被扁平化为了⼀维数组。在 arr3 中，flat(2) ⽅法将嵌套数组扁平化了两层，⽣成了⼀个包含所有元素的⼀维数组。

`includes()`

includes 是 JavaScript 中数组和字符串的方法之一。它用于检查数组或字符串是否包含特定的值，并返回一个布尔值，指示是否找到了指定的值。

对于数组来说，includes 方法用于检查数组中是否包含某个特定的元素。如果包含，则返回 true；否则返回 false。语法如下：

1	`array.includes(valueToFind[, fromIndex])`

valueToFind：要查找的值。
fromIndex（可选）：从哪个索引开始搜索。如果省略，则默认从索引 0 开始搜索。如果 fromIndex 大于等于数组长度，则直接返回 false。

对于字符串来说，includes 方法用于检查字符串是否包含特定的子字符串。如果包含，则返回 true；否则返回 false。语法如下：

1	`string.includes(searchString[, position])`

searchString：要查找的子字符串。
position（可选）：开始搜索的位置，默认为 0。如果 position 大于或等于字符串长度，则直接返回 false。

例如：

const array = [1, 2, 3, 4, 5];
console.log(array.includes(3)); // true
console.log(array.includes(6)); // false

const string = "Hello, world!";
console.log(string.includes("world")); // true
console.log(string.includes("foo")); // false

includes 方法在判断某个元素或子字符串是否存在时很方便，特别是在条件语句中。

`replaceAll()`

const paragraph = "I think Ruth's dog is cuter than your dog!";

console.log(paragraph.replaceAll('dog', 'monkey'));
// Expected output: "I think Ruth's monkey is cuter than your monkey!"

// Global flag required when calling replaceAll with regex
const regex = /Dog/gi;
console.log(paragraph.replaceAll(regex, 'ferret'));
// Expected output: "I think Ruth's ferret is cuter than your ferret!"

`eval()`

eval() 函数是 JavaScript 中的一个全局函数，它用于执行传入的字符串作为 JavaScript 代码，并返回执行结果。其基本语法如下：

1	`eval(string)`

其中，string 参数是要执行的 JavaScript 代码的字符串表示形式。当 eval() 函数被调用时，传入的字符串将被解析和执行为 JavaScript 代码。

虽然 eval() 函数在某些情况下可以方便地执行动态生成的 JavaScript 代码，但它也存在安全风险和性能问题。因此，在实际开发中，应该尽量避免使用 eval() 函数，尤其是对用户输入的字符串进行求值，以防止代码注入和其他安全问题的发生。

另外，eval() 函数在严格模式下的行为可能会有所不同。在严格模式下，它无法在调用代码的作用域之外创建变量或函数。

深浅拷贝

深拷贝（Deep Copy）和浅拷贝（Shallow Copy）是两种常见的数据复制方式，它们在复制对象或数组时表现出不同的行为。让我为你详细解释一下：

浅拷贝（Shallow Copy）：
- 浅拷贝是指创建一个新的对象或数组，将原始对象或数组的所有属性或元素复制到新对象或数组中。
- 如果对象或数组的属性值或元素是基本数据类型（如数字、字符串、布尔值等），那么在浅拷贝中，会直接复制这些值。这意味着原始对象和新对象中的这些属性或元素是完全独立的，互不影响。
- 但是，如果对象或数组的属性值或元素是引用类型（如对象、数组等），则浅拷贝只会复制引用，而不会复制引用指向的实际数据。这意味着原始对象和新对象中的这些属性或元素实际上是共享同一份数据的，修改其中一个会影响到另一个。
深拷贝（Deep Copy）：
- 深拷贝是指创建一个新的对象或数组，并且递归地复制原始对象或数组的所有属性或元素，包括基本数据类型和引用类型。
- 深拷贝会创建原始对象或数组的完全独立的副本，新对象或数组中的所有属性或元素都与原始对象或数组中的对应项无关联。
- 即使原始对象或数组中的属性值或元素是引用类型，深拷贝也会复制引用指向的实际数据，而不是仅仅复制引用本身。这确保了新对象或数组中的引用类型数据是完全独立的，修改其中一个不会影响到另一个。

1 2	`this.cartList = JSON.parse(JSON.stringify(this.cartList)); // 深拷贝`

拓展运算符

在 ES6 中，”…”（三个连续的点）是一个扩展运算符（Spread Operator）的语法。它有以下几种主要的作用：

数组的展开：使用扩展运算符可以将一个数组展开为独立的元素。例如：

1 2	`const arr = [1, 2, 3]; console.log(...arr); // 输出: 1 2 3`

函数调用时的参数传递：扩展运算符可以用于将一个数组作为参数传递给函数，并展开为独立的参数。例如：

function sum(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 输出: 6

对象的展开：扩展运算符可以用于将一个对象展开为另一个对象的属性。例如：

1
2
3

const obj1 = { x: 1, y: 2 };
const obj2 = { ...obj1, z: 3 };
console.log(obj2); // 输出: { x: 1, y: 2, z: 3 }

数组和对象的浅拷贝：通过扩展运算符可以创建数组和对象的浅拷贝。例如：

const arr = [1, 2, 3];
const arrCopy = [...arr];

const obj = { x: 1, y: 2 };
const objCopy = { ...obj };st objCopy = { ...obj };

需要注意的是，扩展运算符只能在可迭代对象（如数组）或具有可枚举属性的对象上使用。它提供了一种方便的方式来处理数组和对象的展开、合并和复制操作，使代码更加简洁和易读。

正则表达式

正则表达式是一种用来匹配字符串模式的工具，它可以用来在文本中搜索、替换特定模式的文本，或者验证字符串是否符合某种模式。下面是正则表达式的基本语法：

普通字符：普通字符是正则表达式中的字母和数字，它们匹配自身。例如，正则表达式 hello 将会匹配字符串中的 “hello”。
特殊字符：正则表达式中有一些特殊字符具有特殊的含义，它们不是按照字面意思匹配字符，而是具有一些特殊的功能。常用的特殊字符包括：
- .：匹配任意一个字符。
- ^：匹配输入的开始。
- $：匹配输入的结尾。
- *：匹配前面的子表达式零次或多次。
- +：匹配前面的子表达式一次或多次。
- ?：匹配前面的子表达式零次或一次。
- \：转义字符，用于匹配特殊字符本身。
字符类：字符类用来匹配一个字符集中的任意一个字符。字符类由方括号 [] 组成。例如，[abc] 匹配字符 “a”、”b” 或 “c” 中的任意一个。
反义字符类：使用 ^ 符号可以匹配除了字符类中的字符以外的任意字符。例如，[^abc] 匹配除了 “a”、”b” 和 “c” 以外的任意字符。
量词：量词用来指定匹配字符的次数。常用的量词包括：
- {n}：匹配前面的元素恰好出现 n 次。
- {n,}：匹配前面的元素至少出现 n 次。
- {n,m}：匹配前面的元素至少出现 n 次，最多出现 m 次。
分组：使用圆括号 () 可以将多个表达式组合成一个整体，并且可以对整体应用量词。例如，(abc)+ 匹配 “abc” 出现一次或多次。
转义字符：如果想要匹配正则表达式中的特殊字符本身，可以使用反斜杠 \ 进行转义。例如，\. 可以匹配实际的句点字符。

g 表示全局匹配模式，会尝试找到所有匹配的模式。

改变`this`指向

call, apply, 和 bind 是 JavaScript 中用于改变函数执行上下文（即 this 的指向）的方法。它们的主要区别在于参数的传递方式和立即执行与延迟执行。

`call` 方法

call 方法立即调用函数，并且允许你传入一个指定的 this 值以及一个参数列表。

语法：function.call(thisArg, arg1, arg2, ...)

thisArg：指定函数执行时的上下文，即函数中的 this 的值。
arg1, arg2, ...：函数执行时的参数列表。

示例：

function greet(name) {
  console.log(`Hello, ${name}! I'm ${this.role}.`);
}

const person = {
  role: 'developer'
};

greet.call(person, 'Alice'); // 输出：Hello, Alice! I'm developer.

`apply` 方法

apply 方法与 call 方法类似，但是参数传递的方式不同。**apply 方法接受一个包含参数的数组**。

语法：function.apply(thisArg, [argsArray])

thisArg：指定函数执行时的上下文，即函数中的 this 的值。
argsArray：一个数组或类数组对象，包含函数执行时的参数列表。

示例：

function greet(name, age) {
  console.log(`Hello, ${name}! I'm ${this.role} and I'm ${age} years old.`);
}

const person = {
  role: 'developer'
};

greet.apply(person, ['Alice', 30]); // 输出：Hello, Alice! I'm developer and I'm 30 years old.

`bind` 方法

bind 方法与 call 和 apply 不同，它不会立即调用函数，而是返回一个新的函数，绑定了指定的 this 值和参数。

语法：function.bind(thisArg, arg1, arg2, ...)

thisArg：指定函数执行时的上下文，即函数中的 this 的值。
arg1, arg2, ...：函数执行时的参数列表。

示例：

function greet(name) {
  console.log(`Hello, ${name}! I'm ${this.role}.`);
}

const person = {
  role: 'developer'
};

const greetPerson = greet.bind(person);
greetPerson('Alice'); // 输出：Hello, Alice! I'm developer.

总结：

call 和 apply 立即调用函数，并且能够指定 this 值和参数列表。
call 和 apply 的区别在于参数传递的方式：call 使用逐个传参，apply 使用数组传参。
bind 返回一个新的函数，并且绑定了指定的 this 值和参数，但不会立即执行。

Vue

`v-model`

v-model 是 Vue.js 提供的一个指令，用于实现表单元素和 Vue 实例数据的双向绑定。它通常用于表单输入元素，例如文本框、复选框、单选按钮和选择框等。

使用 v-model 指令时，你需要将其绑定到表单元素上，并指定一个 Vue 实例中的数据属性作为参数。v-model 会自动将表单元素的值与 Vue 实例的数据属性进行双向绑定，即当表单元素的值发生变化时，Vue 实例中对应的数据属性也会跟着更新；反之，当 Vue 实例中的数据属性发生变化时，表单元素的值也会相应地更新。

下面是 v-model 的基本用法：

文本输入框

1	`<input type="text" v-model="message">`

// Vue 实例中的数据
data() {
  return {
    message: 'Hello, Vue!'
  };
}

这样，文本输入框中的内容会与 Vue 实例中的 message 数据属性进行双向绑定。当你在输入框中输入内容时，message 数据属性会实时更新；反之，当你在 Vue 实例中修改了 message 的值时，输入框中的内容也会实时更新。

复选框

1	`<input type="checkbox" v-model="checked">`

// Vue 实例中的数据
data() {
  return {
    checked: false
  };
}

这样，复选框的选中状态会与 Vue 实例中的 checked 数据属性进行双向绑定。当你勾选或取消勾选复选框时，checked 数据属性会实时更新；反之，当你在 Vue 实例中修改了 checked 的值时，复选框的选中状态也会实时更新。

单选按钮

1 2	`<input type="radio" value="A" v-model="selected"> <input type="radio" value="B" v-model="selected">`

// Vue 实例中的数据
data() {
  return {
    selected: 'A'
  };
}

这样，选中的单选按钮的值会与 Vue 实例中的 selected 数据属性进行双向绑定。当你选中某个单选按钮时，selected 数据属性会更新为对应的值；反之，当你在 Vue 实例中修改了 selected 的值时，对应的单选按钮也会被选中。

下拉选择框

<select v-model="selected">
  <option value="A">Option A</option>
  <option value="B">Option B</option>
  <option value="C">Option C</option>
</select>

// Vue 实例中的数据
data() {
  return {
    selected: 'A'
  };
}

这样，下拉选择框中选中的选项会与 Vue 实例中的 selected 数据属性进行双向绑定。当你选择了某个选项时，selected 数据属性会更新为对应的值；反之，当你在 Vue 实例中修改了 selected 的值时，下拉选择框中对应的选项也会被选中。

综上所述，v-model 指令使得表单元素和 Vue 实例的数据之间建立了双向绑定关系，使得数据的变化能够实时地反映到表单元素上，从而提高了开发效率。

其他数据绑定和动态渲染

除了 v-model 外，Vue 还提供了一些其他的指令来实现数据绑定和动态渲染。下面是一些常用的 Vue 指令：

v-bind：用于动态绑定 HTML 属性。可以绑定 HTML 元素的任何属性，例如 class、style、href 等。
1
<div v-bind:class="{ active: isActive }"></div>
在上面的例子中，class 属性根据 isActive 数据属性的值进行动态绑定，当 isActive 为 true 时，active 类会被添加到 div 元素中。
v-if 和 v-else：用于条件渲染。根据表达式的值是否为真来添加或移除元素。
1
2
<p v-if="seen">Now you see me</p> <p v-else>Now you don't</p>
当 seen 数据属性为 true 时，第一个 p 元素会显示；否则，第二个 p 元素会显示。
v-for：用于循环渲染列表数据。
1
2
3
<ul> <li v-for="item in items">{{ item.text }}</li> </ul>
上面的例子中，v-for 指令会循环遍历 items 数组中的每一个元素，并将每个元素的 text 属性显示在列表项中。
v-on：用于绑定事件监听器。
1
<button v-on:click="handleClick">Click me</button>
当按钮被点击时，handleClick 方法会被调用。
v-show：根据表达式的值的真假来切换元素的显示状态，类似于 v-if。
1
<p v-show="isShow">Now you see me</p>
当 isShow 数据属性为 true 时，p 元素会显示；否则，p 元素会隐藏，但它仍然存在于 DOM 中。

这些指令是 Vue.js 中常用的数据绑定和动态渲染的方法，通过合理的使用这些指令，你可以更灵活地处理数据和界面的交互。

store

Vuex 是 Vue.js 的官方状态管理库，用于集中管理应用中的所有组件的状态。它基于全局状态管理模式，将状态存储在一个全局对象中，并通过一些特定的方法进行状态的更新和获取。

下面是 Vuex Store 的基本用法：

安装 Vuex：首先，您需要在项目中安装 Vuex。您可以使用 npm 或 yarn 来安装 Vuex：
1
npm install vuex --save
或者
1
yarn add vuex

创建 Store：接下来，您需要创建一个 Vuex Store。这通常是在项目的根目录下的一个单独的文件中完成。一个基本的 Vuex Store 可能如下所示：

// store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment');
    },
    decrement(context) {
      context.commit('decrement');
    }
  },
  getters: {
    getCount: state => state.count
  }
});

在应用中使用 Store：一旦创建了 Vuex Store，您可以在应用程序的入口文件中将其引入，并通过 Vue 实例的 store 选项将其注入到根组件中：
1
2
3
4
5
6
7
8
9
10
11
// main.js import Vue from 'vue'; import App from './App.vue'; import store from './store'; new Vue({ el: '#app', store, render: h => h(App) });

在组件中使用 Store：一旦 Store 注入到了根组件中，您可以通过在组件中使用 this.$store 来访问 Store 中的状态和方法。例如，在组件中使用 mapState 辅助函数来获取状态：

// MyComponent.vue

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment', 'decrement'])
  }
}
</script>

这就是基本的 Vuex Store 的用法。它允许您在应用中集中管理和共享状态，并通过一系列的约定和方法来确保状态的一致性和可维护性。

Echart

ECharts 是一个用于构建交互式的图表和可视化数据的开源库。它提供了丰富的图表类型和灵活的配置选项，可以轻松创建各种图表，如折线图、柱状图、饼图等。

以下是 ECharts 的基本语法：

引入 ECharts 库： 在 HTML 文件中引入 ECharts 库的 JavaScript 文件。
1
<script src="echarts.min.js"></script>
创建图表容器： 在 HTML 中创建一个用于显示图表的容器。
1
<div id="chart" style="width: 600px; height: 400px;"></div>
初始化图表： 在 JavaScript 中初始化图表对象，并指定图表容器。
1
var chart = echarts.init(document.getElementById('chart'));

配置图表选项： 使用 JavaScript 对象来配置图表的各种选项，如标题、数据系列、坐标轴等。

var option = {
    title: {
        text: '折线图示例'
    },
    xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        type: 'line',
        data: [120, 200, 150, 80, 70, 110, 130]
    }]
};

设置图表选项： 使用 setOption() 方法将配置好的选项应用到图表中。
1
chart.setOption(option);

通过以上步骤，就可以在页面中创建并显示一个简单的折线图。ECharts 还提供了丰富的配置选项和 API，可以实现更丰富和复杂的图表效果，如动画、交互、数据筛选等。

在 ECharts 中，xAxis 和 yAxis 是用来配置图表的 X 轴和 Y 轴的参数的。这些参数可以设置图表的轴类型、刻度、标签样式等。

下面是 xAxis 和 yAxis 中常用的参数说明：

xAxis（X 轴配置项）：

type：设置 X 轴的类型，可选值包括：
- 'category'：类目轴，适用于离散的类目数据，如名称、时间等。
- 'value'：数值轴，适用于连续的数值数据。
- 'time'：时间轴，适用于时间序列数据。
data：设置 X 轴的类目数据，在 type 为 'category' 时使用，表示 X 轴上的刻度标签。
name：设置 X 轴的名称。
nameTextStyle：设置 X 轴名称的样式，可以设置字体大小、颜色等。
axisLabel：设置刻度标签的样式，可以设置字体大小、颜色等。

yAxis（Y 轴配置项）：

type：设置 Y 轴的类型，可选值同 xAxis 中的 type。
name：设置 Y 轴的名称。
nameTextStyle：设置 Y 轴名称的样式。
axisLabel：设置刻度标签的样式。
min 和 max：设置 Y 轴的最小值和最大值，用于控制 Y 轴的范围。
splitNumber：设置 Y 轴的分割段数。

这些参数可以根据具体需求进行设置，以实现不同样式和功能的 X 轴和 Y 轴。例如，如果你需要一个类目轴，你可以将 type 设置为 'category'，并在 data 中传入对应的类目数据；如果需要数值轴，你可以将 type 设置为 'value'，并设置 min 和 max 来控制轴的范围。

Node.js

http模块

Node.js 的 http 模块用于创建 HTTP 服务器和客户端。以下是 http 模块的基础语法：

创建 HTTP 服务器：

const http = require('http');

// 创建 HTTP 服务器
const server = http.createServer((req, res) => {
  // 处理请求并发送响应
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello, World!\n');
});

// 服务器监听端口
const PORT = 3000;
server.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

处理请求和发送响应：

HTTP 服务器通过传入的回调函数来处理请求。回调函数接收两个参数：req（请求对象）和 res（响应对象）。在回调函数中，你可以读取请求的数据、设置响应头和发送响应内容。

创建 HTTP 客户端：

const http = require('http');

// 发送 HTTP 请求
const options = {
  hostname: 'www.example.com',
  port: 80,
  path: '/',
  method: 'GET'
};

const req = http.request(options, (res) => {
  console.log(`statusCode: ${res.statusCode}`);

  res.on('data', (chunk) => {
    console.log(`Received data: ${chunk}`);
  });
});

req.on('error', (error) => {
  console.error(`Request error: ${error}`);
});

// 发送请求
req.end();

在此示例中，我们使用 http.request() 方法创建了一个 HTTP 请求对象 req，然后通过 req.end() 方法发送请求。一旦响应可用，回调函数将被调用，我们可以在其中处理响应数据。

Web

#笔记

SSO | Single Sign-On 上一篇

MIT | Software Construction 下一篇

蓝桥杯备赛笔记 | Web开发

html

css

grid布局

flex布局

盒模型

伪类选择器

nth-of-type和nth-child

文本溢出

transform

filter

JavaScript

一些方法

filter()

search()

flat()

includes()

replaceAll()

eval()

深浅拷贝

拓展运算符

正则表达式

改变this指向

call 方法

apply 方法

bind 方法

Vue

v-model

其他数据绑定和动态渲染

store

Echart

xAxis（X 轴配置项）：

yAxis（Y 轴配置项）：

Node.js

http模块

`nth-of-type`和`nth-child`

`transform`

`filter`

`filter()`

`search()`

`flat()`

`includes()`

`replaceAll()`

`eval()`

改变`this`指向

`call` 方法

`apply` 方法

`bind` 方法

`v-model`