# docs

**Repository Path**: plightfield/docs

## Basic Information

- **Project Name**: docs
- **Description**: 文档
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-03-10
- **Last Updated**: 2023-03-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

---
home: true
icon: home
title: 前端知识库
heroImage: /banner.png
heroText: 前端知识库
tagline: 中高阶前端知识集散地
actions:
  - text: 开始学习 💡
    link: /Vue3/
    type: primary

features:
  - title: Vue3
    icon: vue
    details: 学习 Vue3 基本用法 —— 选项是 vs 组合式
    link: Vue3
  - title: Typescript
    icon: typescript
    details: 夯实 Javascript，学习 Typescript
    link: Typescript
---

---

# 文档说明：

## 知识点标签

知识点标签将会按照知识点类型以及重要程度进行**分类**，请务必按照要求对待

- <Badge type="danger"/> 重难点：必须要求融会贯通，每人必会，能说能写能拓展，如 值和引用，闭包，Vue 原理，虚拟列表等

- <Badge type="warning"/> 次重点：必须要求理解，能说能写，并有大量练习，如 绝大部分 api

- <Badge type="tip"/> 要点：要求能说能用，如 基础概念，技术名词，配置型库等

- <Badge type="note"/> 仅做了解，如 项目需求，内容拓展等

知识点标题上会做标注，如：

### <Badge type="danger"/> 依赖注入

表示依赖注入是重难点

也会有临时文本区块通过颜色标识内容

:::warning document.createElement

```javascript
const node = document.createElement(标签名);
```

用以表示在 js 中创建的节点，它是**真实 DOM**
:::

表示 `document.createElement` 是次重点内容

## 流程展示

复杂业务和计算讲解时，会出现**流程图**：

```flow
st=>start: 开始:>https://baike.baidu.com/item/%E6%B5%81%E7%A8%8B%E5%9B%BE%E7%AC%A6%E5%8F%B7/12727793
e=>end: 结束
op1=>operation: 操作1
op2=>operation: 操作2
sub1=>subroutine: 某组件或程序
cond=>condition: 是/否?
c2=>condition: 判断2
io=>inputoutput: 生成数据...

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
```

上例中，黑色代表流程开始和结束，绿色代表操作，即代码中的函数，黄色代表判断条件，即代码中的 `if/else/switch/case` ，紫色代表其他程序或封装单位，比如 Vue 组件，红色代表数据和状态

## 交互式代码

涉及 **Vue** 的内容，**简单的讲解**将会利用到**交互式编辑器**进行练习：

::: vue-playground Vue 累加器

@file Adder.vue

```vue
<script setup>
import { ref } from "vue";
const num = ref(0);
const add = () => {
  num.value++;
};
</script>

<template>
  <h1>{{ num }}</h1>
  <button @click="add">加一</button>
</template>
```

:::

左边是开发框，右边是效果框，对于简单功能可以快速讲解清楚