# 207内容补充

**Repository Path**: nieps/207-content-supplement

## Basic Information

- **Project Name**: 207内容补充
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-06-24
- **Last Updated**: 2025-07-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# git 

> github  gitee 
>
> 在企业里：gitlab  (作业)

  版本管理

之前使用：

* cvs
* svn 

git分布式版本管理  



## 常用命令

~~~shell
#查看git 帮助命令
git --help 
git 命令 --help #打开帮助页面 


#初次安装使用  全局配置 
git config --global user.name "牛肖宁"
git config --global user.email "3519973006@qq.com"  

#初始化仓库(掌握)
git init  
#查看状态 (掌握)
git status  

#将改变提交到暂存区 （临时保存）(掌握)
git add  文件1  文件2 .... 
#将所有的改变提交到暂存区(常用)(掌握)
git add . 
#将改变从暂存区 移除  (了解  不用记)
 git rm --cached 文件1  文件2 .... 
 
 #将暂存区中的改变提交到本地版本库(掌握)
 git commit -m '提交日志记录'
 
 
 #版本回退
 #查看日志
 git log  
 #查看历史日志
 git reflog 
 #恢复到指定版本
 git reset --hard commit_id  # 提交记录id 
 
 
 
 
 
 #将本地仓库与远程仓库关联起来
 git remote add origin https://gitee.com/nieps/gitdemo.git  # origin 代表远程分支的名称 
 git push -u origin master # origin 代表远程分支的名称  master要推送的本地分支名称  -u 首次推送加
 
 
 #查看代表远程仓库的名称
 git remote 
 #查看远程仓库的名称和地址
 git remote -v  
 #删除远程仓库
 git remote remove origin
 
 
 #分支管理
 #查看分支 
 git branch  
 #创建分支 
 git branch  分支名称
 #切换分支
 git checkout 分支名称  
 git switch  分支名称 
 #创建并切换分支
 git checkout -b 分支名称
 git switch -c 分支名称 
 
 #删除分支
 git branch -d 分支名称 
 
 #将开发分支合并到主分支 切换到主分支并合并 
 git switch master
 git merge dev # dev 要合并 的分支  
 #合并完后删除开发分支 
 git branch -d dev  

 #将开发分支推送到远程 
 git push  origin dev #  origin 代表远程分支  dev代表本地的开发分支 
 #拉取服务器最新代码 
 git pull origin 
 
 
 #新地环境 拉取开发分支 
 #1. 拉取代码 
git clone https://gitee.com/nieps/gittest.git
# 2. 进入仓库 查看分支 
git branch  #发现只有master分支  没有dev 怎么办？
#3. 只要做一个切换分支的动作
git switch dev  


#删除远程分支：  
git push origin --delete 分支名称


#标签 
#查看标签 
git tag  
#根据当前最新提交记录打标签
git tag 标签名  -m '描述信息'
#给指定的commit_id打标签
git tag 标签名  commit_id   -m '描述信息'
#将指定标签推送到远程 
git push origin 标签名称
#将本地所有未推送的标签 推送到远程 
git push origin --tags  

#删除本地标签
git tag -d 标签名称  
#删除远程分支名称 
git push origin :refs/tags/<tagname>




~~~



# maven

# node.js   npm  

目标： 

1. 了解node.js  
2. 掌握npm命令  pnpm  yarn  
3. 了解node.js模块 



## 什么是node.js

  JavaScript 是一个脚本语言  ，运行在浏览器 ，是因为在浏览中有js运行环境 如V8 引擎（运行环境）

将V8引擎抽取出来，打包成一个软件叫node.js  (可以在node.js下运行js )

* Node.js 是一个开源与跨平台的 JavaScript 运行时环境。
* Node.js 在浏览器外运行 V8 JavaScript 引擎（Google Chrome 的内核）

## node.js安装

> 安装版本：建议22.16.0 
>
> nvm（Node Version Manager） 是一个用于管理 Node.js 版本的命令行工具。它允许开发者在同一台机器上安装和切换多个版本的 Node.js，以便于在不同的项目中使用不同的 Node.js 版本。

## NPM

* npm 是 Node.js 标准的软件包管理器。

  `npm`（Node Package Manager）是 JavaScript 和 Node.js 的包管理器，用于安装、共享和管理代码包

  > linux包管理：
  >
  > * centos  yum 
  > * ubuntu  apt  
  >
  > 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  >
  > 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  >
  > 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

模块： 一个js文件就是一个模块 ，是为了代码的复用



## 淘宝镜像

~~~shell
#查看当前npm镜像地址
npm config get registry # 默认是国外的地址  https://registry.npmjs.org

#方式一  直接替换  更换为淘吧镜像
npm config set registry=https://registry.npmmirror.com/  
#更换后可以通过npm config get registry 查看地址是否更新 

#方式二  使用cnpm替换npm 
npm install -g cnpm --registry=https://registry.npmmirror.com/  # -g 全局安装  cnpm 包名

#了解  临时使用指定的镜像
npm --registry=https://registry.npmmirror.com/  install   <package-name>

~~~



## 模块与命令

~~~shell
#创建npm模块（工程  项目）
npm init  
~~~



### 安装

~~~shell
#局部安装  既安装的模块只能在当前项目下使用
# install 别名：  add, i, in, ins, inst, insta, instal, isnt, isnta, isntal, isntall
npm install package-name  
npm i package-name  

#安装所有依赖
npm i  

#查看安装 的模块 
npm list  

#全局安装 
npm i package-name  -g  
#查看安装 的模块 
npm list  -g

~~~



### 卸载

~~~shell
#卸载指定包
# uninstall 别名： unlink, remove, rm, r, un
npm uninstall pack-name@verion 

#如果是全局安装 卸载
npm rm package-name -g  
~~~



### 其它命令（了解）

~~~shell
#更新包
npm update <package-name>
#搜索模块
npm search <package-name>
~~~

# spa 

singal page application  (单页应用)



# Pure Admin 保姆级文档

> [官方文档](https://pure-admin.cn/)

~~~shell
#安装pnpm  
npm install -g pnpm

#安装所有依赖
pnpm  i #  install  

#运行
pnpm run dev  

~~~



# pnpm

pnpm 是一款快速、高效且节省磁盘空间的 JavaScript 包管理工具

1. **基础操作**
   - 初始化项目：`pnpm init`
   - 安装依赖：`pnpm install` 或 `pnpm i`
   - 安装指定包：`pnpm add <package>`（默认安装到 `dependencies`）
   - 安装开发依赖：`pnpm add -D <package>` 或 `pnpm add --save-dev <package>`
2. **依赖管理**
   - 移除依赖：`pnpm remove <package>`
   - 更新依赖：`pnpm update <package>`
   - 查看依赖树：`pnpm list` 或 `pnpm ls`
3. **脚本运行**
   - 运行脚本：`pnpm run <script-name>`
   - 查看所有脚本：`pnpm run`
4. **缓存管理**
   - 清理缓存：`pnpm cache clean`
   - 查看缓存信息：`pnpm cache info`

# 数据库SQL练习

* [复杂查询](https://blog.csdn.net/faramita_of_mine/article/details/121145932)
* [MYSQL复杂查询练习题（难度适中）_数据库难度大的查询题-CSDN博客](https://blog.csdn.net/weixin_50843918/article/details/123086590)





# ES6模块

一个js文件就是一个模块，为了代码的复用。

两个规范：

* common js 规范 
* es6模块

## commonjs规范（了解）

CommonJS 是一种为 JavaScript 设计的模块规范，主要用于**服务器端编程**，像 Node.js 就采用了该规范，核心特点：

1. **模块定义**：在 CommonJS 里，一个文件就相当于一个独立的模块。

2. **导出机制**：通过 `exports` 或者 `module.exports` 可以将模块内部的变量、函数等导出，供其他模块使用。

3. **导入机制**：使用 `require()` 函数能够导入其他模块导出的内容。



> 任何一个模块内部都有一个内置的对象module 
>
> 对象： 一组属性的无序集合,(名值对， 名称是 字符串，值是js任何 类型 )如
>
> ~~~json
> let user={
>    "name":"张三",
>     age:23,
>     "info":function(){},
>     "hobby":["读书","..."],
>     "contact":{
>         "qq":"2222",
>         "wx":"sss"
>     }
> }
> 
> //增加属性
> user.mobile="1232"
> ~~~
>
> 

![image-20250626102224635](assets/image-20250626102224635.png)

本质：在内置对象module中的属性exports（该属性是一个对象）增加属性。

### module.exports与exports关系

![image-20250626105804484](assets/image-20250626105804484.png)

总结：

* module.exports与exports  默认指向同一个对象，暴露的本质是module.exports指向的对象 ，所以在两个属性可以任意增加属性
* exports  不能赋值新对象， 因为赋值了一个新对象  与 module.exports没有关系 了 



## **ES6 Modules**（掌握）

这是 JavaScript 官方推出的模块规范，采用静态导入语法（`import/export`），支持编译时优化，并且可以在浏览器和服务器端环境中使用。

* 导出  使用export 
* 导入 使用import 

### 方式一

#### 导出

~~~javascript
//方式一  不推荐  注意： 不能直接暴露值   export "sdfs";  必须有一个引用 

export let name="张三";//相当于暴露变量name
export  let age=23;

export function info(){
	console.log(name,"的年龄是:",age)
}
~~~

> 注意：
>
> ~~~javascript
> //不行
> //export "hello";//直接暴露值  引用时无法引用 
> //let mobile="135555";
> //export mobile;// 间接暴露变量mobile对应的值 
> //function f(){}
> //export f;//暴露了函数值
> ~~~
>
> 

#### 导入

~~~javascript
//  import {对应的暴露名称,多个之间用逗号隔开}  from '模块'
import {name,age,info} from './user.js'
~~~





### 方法二

#### 导出（推荐）

~~~javascript
 let name="李四";//相当于暴露变量name
 let age=30

 function info(){
	console.log(name,"的年龄是:",age)
}


//最后以对象形式统一暴露  推荐
export {
	name,
	age,
	info
}
~~~

引入是一样的。

### 别名

   通过as 关键字实现

* 导出时别名  ，如果导出时指定了别名，那么引入时必须也使用别名引入   

  ~~~javascript
  export {
  	name as xm   
  }
  ~~~

* 引用时别名 

  ~~~javascript
  import {age as a} from './user2.js'
  ~~~

### 整体引入

~~~javascript
//如果不知道模块中有哪些导出变量 可以考虑整体引入  
import * as u from './user2.js' //u是一个对象，包含所有导出的变量 
~~~



### 默认导出（常用）

一个模块中只能有一个默认导出，同时可以有多个其它普通导出。

#### 导出

~~~javascript
//本质是将后面的对象赋值给变量名为default ,default的值可以是任意类型：字符串，数字 对象 数组 函数..  
export default {
	name:"ss",
	age:23
}
~~~

#### 导入

~~~javascript
//方式 一 不推荐  可以方便理解  将default做为变量  导出
import {default as u}  from './user3.js'

//方式二 推荐
//引入默认导出的 不用{} ，而是任意起一个别名既可
import user from './user3.js'
~~~



# vue3  + element plus  

> [Pure Admin 保姆级文档](https://pure-admin.cn/)



## es6 对象解构赋值

针对两种：

* object对象
* 数组 

### object对象(常用)

语法： const {属性1,属性2,...other}=对象 
说明：

* 属性1 、属性2 代表的是目标对象中的属性 （必须一致）  相当于定义变量属性1=对象.属性1  
* ...other   other是一个变量，也是一个对象， 代表的是目标对象中剩余的属性 

~~~javascript
<script>
			//定义一个对象 
			let user={
				name:"张三",
				age:20,
				mobile:"135555",
				height:100
			};
			
			//要访问name怎么访问
			console.log(user.name)
			
			//对象解构赋值  在es6  const { 属性名,...}=对象
			const {name,age,...u}=user;//等价于 let name=user.name
			console.log("name>>",name)
			console.log("age:",age)
			
			//使用剩余参数  代表其它属性 同上  将user对象中其它属性
			//赋值给变量u  
			console.log("u>>",u)
		</script>
~~~



### 数组

语法：  const [变量1，变量2 ，...变量3]=目标数组 

说明：

* 变量1=目标数组[0]
* 变量2=目标数组[1]
* ...变量3  本身是一个数组，代表数组中剩余的元素 

~~~javascript
<script>
			let course=["Java","mybaits","spring"];
			
			//正常情况下要访问java 
			console.log(course[0])
			
			//定义变量 
			let j=course[0];
			console.log(j)
			
			//使用数组解构赋值 
			/*const [x]=course;
			console.log("x=",x)
			
			const [,y]=course;
			console.log("y==",y)*/
			
			/*const [x,,y]=course
			console.log(x,'  ',y)*/
			
			//剩余参数 
			const [x,...y]=course;
			console.log("x",x)
			console.log("y>>",y)
		</script>
~~~



## Vue3

###   选项式（了解）

* data 选项      该函数应当返回一个普通 JavaScript 对象，Vue 会将它转换为响应式对象。 



### Vue2 VS  Vue3

* Vue2中Vue是构造函数，Vue3中Vue是对象  

* Vue2中构造函数参数 传递组件对象 ，通过el选项指定实例挂载的容器 ；  Vue3  是通过对象解构赋值获取createApp ,通过它创建Vue实例  ，传递的是组件对象  ，创建后调用实例的mount方法，将vue实例挂载到容器上。

* Vue2中的选项data  可以是对象、函数(组件上必须使用函数)   ,    Vue3中data是一个函数，该函数返回一个普通 JavaScript 对象，Vue 会将它转换为响应式对象。

* Vue2打包工具webpack  ,Vue3基于vite  (更快)

  > Webpack 和 Vite 都是前端构建工具，用于处理模块打包、资源优化和开发服务器等任务，但它们的设计理念和适用场景有所不同。以下是两者的对比分析及常见场景的选择建议：
  >
  > ### **核心区别**
  >
  > | **特性**          | **Webpack**                                                  | **Vite**                                                     |
  > | ----------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
  > | **构建原理**      | 基于打包器（Bundler），需要分析整个依赖树并生成捆绑文件。    | 基于原生 ES 模块（ES Modules），开发阶段无需打包，直接按需加载模块。 |
  > | **启动速度**      | 大型项目启动较慢，需等待完整打包。                           | 几乎瞬时启动，尤其适合复杂项目。                             |
  > | **热更新（HMR）** | 依赖模块较多时，更新可能较慢。                               | 毫秒级响应，即使项目很大也能保持高效。                       |
  > | **配置复杂度**    | 配置复杂，需手动处理 loader、plugin 等（如`webpack.config.js`）。 | 配置简单，开箱即用，支持按需扩展（如`vite.config.js`）。     |
  > | **生态支持**      | 生态成熟，支持各种 loader 和 plugin，适合复杂场景。          | 生态快速发展，对现代框架（如 React、Vue）优化更好，但旧项目适配可能有限。 |
  > | **生产环境**      | 通过 Terser 等工具优化捆绑文件。                             | 基于 Rollup 打包，生成更现代、更精简的代码。                 |

* Vue2 要求是单根组件  Vue3允许出现多根组件  

### localhost

  理解：类似于域名，域名是方便我们去记忆，实际通讯是通过IP来实现的 。

  DNS: 域名服务器，根据域名去域名服务器查找对应的IP, 通过IP通讯

  localhost就像本地域名，对应的IP是127.0.0.1

  更改：查找 C:\Windows\System32\drivers\etc   目录下hosts文件 ，

### 单文件组件

一个页面就是一个组件  ，通常是.vue文件 。

什么是组件？组件的作用是什么？

组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考

组件作用：

* 组件复用 
* 隐藏复杂逻辑  通过组件单独实现 

结构：

~~~vue
<!--页面模板 通俗的解释就是页面排版-->
<template>
</template>
<!--script标记 引入setup 说明当前组件采用组合式Api  没有setup就是选项式-->
<script setup>
</script>

<!--样式 scoped说明下面定义的样式 只适用于当前组件 -->
<style scoped>

</style>
~~~



### 选项式组件注册

语法：

~~~javascript
//组件对象
// components 是选项 用于注册组件 的 
export default{
    //key 是组件的名称  Component是定义 的组件 
    components?: { key: Component }
}
~~~

> 组件的定义方式：
>
> * 新建一个vue文件 就是一个组件  
> * 通过组件对象创建  {选项： ...}



### css  文本溢出   显示省略号

在 CSS 中，要实现文本溢出时显示省略号，需结合以下三个属性：

1. **`white-space: nowrap`**：防止文本换行
2. **`overflow: hidden`**：隐藏溢出内容
3. **`text-overflow: ellipsis`**：用省略号表示溢出部分

### 单行文本溢出示例

```css
.single-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px; /* 必须设置宽度 */
}
```

### 多行文本溢出示例（适用 WebKit 浏览器）

```css
.multi-line {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制显示行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
```



### html元素

* 块元素    独占一行的 如 div  p  h1...
* 行内元素  不换行  span  a  img ...

## Vue指令

* v-if
* v-show 
* v-for 

### v-for

语法：

~~~html
<template v-for="item in items"></template>
~~~

* item 是迭代变量 ，如果集合中存的是字符串  item就是字符串，如果是javabean item也是  
* items 要遍历的集合

~~~html
<template v-for="(item,index) in items" :key="index"></template>
~~~

* index 是下标  从

`v-for` 的默认方式是尝试就地更新元素而不移动它们(为了达到更好的渲染效果)。要强制其重新排序元素，你需要用特殊 attribute `key` 来提供一个排序提示

## Vue响应式函数

### ref() （常用的）

接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 `.value`。

* ref函数内可以传递任何类型参数，它会将给定的设置  包装成响应式
* 该函数返回的是一个对象 { value:值就是你包裹的内容 }

### reactive()（了解）

返回一个对象的响应式代理。

* 返回的是一个响应式对象  
* 方法只能接收对象 

## 组合式Api生命周期函数

生命周期钩子，是指在Vue实例化的过程中，在不同的阶段会调用不同的方法，我们可以在特定方法上，编辑我们的逻辑来满足需要，

在Vue3组合式Api中，使用如下

~~~javascript
//引入 onMounted  
 import {ref,onMounted} from 'vue'

//注册生命周期函数
 //生命周期函数 会在vue实例挂载完后执行 通常在这里调用方法 做异步请求
   onMounted(()=>{
	   //执行这里 
	   console.log("vue挂载完后：",goods)
   });
~~~



## 组件的定义

* 属性的定义  
* 组件的注册 （局部注册  全局注册）
* 组件的传参  （父组件给子组件传参   子组件给父组件传参）
* 插槽（理解）



### 属性的定义（父组件向子组件传参）

* 选项式  通过属性  props
* 组合式通过 defineProps() 来定义  ，它的返回值代表属性对象 

定义属性分两咱：

* 数组定义 
* 对象定义 

#### 数组定义（了解）

~~~javascript
   //组合式定义属性
   const props=defineProps(["name","price","tags"]);

   //选项式定义 
   export default {
       props:["name","price","tags"]
   }
~~~

访问：

* 在模板中  直接访问属性名  

  ~~~html
  <div class="name">{{name}}</div>
  ~~~

* 在js中，通过属性对象来访问

  ~~~javascript
  console.log("props>>>",props.name);
  ~~~

#### 对象的定义（推荐）

语法：

~~~javascript
const props=defineProps({
    key:Prop // key是属性名  Prop是对象 ，用于定义属性的 
});

//Prop对象有4个属性
Prop={
  type?: PropType<T>  //属性的类型  String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数，或由上述内容组成的数组。
  required?: boolean //该属性是否是必须的 
  default?: T | ((rawProps: object) => T) //默认值 ，对象或数组的默认值必须从一个工厂函数返回
  validator?: (value: unknown, rawProps: object) => boolean //验证属性值的 将 prop 值及其对象作为参数传入的自定义验证函数。  返回值如果为false 说明验证未通过 
}
~~~



### 通过组件引用传递参数（特定情况 下很好用）

引用： 要访问组件的dom元素

> dom : docment  object model  文档对象模型 

在组合式Api中增加引用步骤：

* 在组件上 通过ref属性定义  引用    唯一标识 

  ~~~html
  <GoodsItem  ref="goodsRef"></GoodsItem>
  ~~~

* 在js中声明一个同名引用  

  ~~~javascript
  //声明同名引用
  const goodsRef=ref();
  ~~~

* 通过引用调用目标组件的方法（前提该方法在目标组件中通过defineExpose已经暴露）

  ~~~javascript
  //用传过来的对象替换默念值
  function init(data) {
  	console.log("data>>",data)
    goods.value = data;
  }
  
  //暴露
  defineExpose({
  	init  // es6简化  "init":init
  });
  ~~~

* 在父组件通过引用调用目标组件的方法 

  ~~~javascript
  //生命周期函数
  onMounted(()=>{
  //goodsRef.value  代表是的商品组件 
  goodsRef.value.init(goods.value);
  });
  ~~~

  

#### defineExpose()

默认情况下，组件内定义 的数据或方法 都是私有的，只能在当前组件使用，要想被父组件调用，只能暴露：

~~~javascript
defineExpose({
    属性名:属性值
})
~~~



### 子组件给父组件传参

通过事件，向父组件传参：

* 在子组件声明事件   

  > 两种方法：
  >
  > 1. 选项式api  通过选项 emits来声明，如
  >
  >    ~~~javascript
  >    export default {
  >        //声明事件
  >        emits:["事件名称"]
  >    }
  >    ~~~
  >
  > 2. 在组合式 通过 函数defineEmits() 来声明 
  >    ~~~javascript
  >    //声明事件 emits是一个函数 用于触发声明的事件 
  >    const emits=defineEmits(["close"]);
  >    ~~~

  

* 在子组件中，触发事件 

  ~~~javascript
    // 触发自定义的事件 
    emits("close");
  ~~~

* 在父组件监听事件 

  ~~~html
    <AddUser :isShow="isShow" @close="isShow=false"></AddUser>
  ~~~

#### 传递参数

~~~javascript
//触发事件时传递参数 
emits("事件名称",args1,arg2,....); //可以传递多个参数  也可以只传递一个对象
~~~

在父组件中，通过监听事件，定义回调函数，接收对应 的参数 

~~~html
<!--fallback  回调方法 用于接收子组件传递的参数-->
<子组件 @事件名称="fallback"></子组件>
~~~

~~~javascript
//回调方法定义  
function fallback(args1,arg2,....){}
~~~





## 组件的注册

###  局部注册

​     局部注册的组件只能在当前组件内使用。

> 组件名称：建议使用大驼峰命名法  每个单词着字母大写如 HelloWorld
>
> 使用时有两种方式：
>
> * 直接使用大驼峰名称 如  <HelloWorld></HelloWorld>
> * 使用短横线引用  如<hello-world/>

* 在组合式API中引用组件  ，既可使用 

  ~~~javascript
   //引入组件  局部注册
   import GoodsItem from './components/GoodsItem.vue'
  ~~~

  使用：

  ~~~html
     <GoodsItem></GoodsItem>
     <goods-item></goods-item>
  ~~~


* 选项式Api注册（了解）

  通过组件选项components注册：

  ~~~javascript
  export default{
      components:{
          "GoodsItem":GoodsItem  //局部注册 引用同上
      }
  }
  ~~~

  

### 全局注册

使用 [Vue 应用实例](https://cn.vuejs.org/guide/essentials/application.html)的 `.component()` 方法，让组件在当前 Vue 应用中全局可用。

如果同时传递一个组件名字符串及其定义，则注册一个全局组件；如果只传递一个名字，则会返回用该名字注册的组件 (如果存在的话)。

~~~javascript
返回用该名字注册的组件//返回用该名字注册的组件
component(name: string): Component | undefined
//注册一个全局组件
component(name: string, component: Component): this
~~~





## 插槽

* 插槽内容  自定义组件中间的内容  如下

  ~~~html
    <GoodsItem>
       今天天气阴  
    </GoodsItem>
  ~~~

  > 今天天气阴     就是插槽内容  

* 插槽内容  在组件内显示  

  `<slot>` 元素是一个**插槽出口** (slot outlet)，标示了父元素提供的**插槽内容** (slot content) 将在哪里被渲染。

      ~~~html
      <div>
      <slot></slot>
      </div>
      ~~~

* 作用域

  > 1. 插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的
  > 2. 插槽内容**无法访问**子组件的数据,Vue 模板中的表达式只能访问其定义时所处的作用域

### 默认内容（了解）

没有插槽内容时，显示的默认值  

~~~html
  <slot>
		    这是插槽默认内容 
 </slot>
~~~



### 具名插槽

在一个组件中，如果定义多个插槽出口

* 在slot标记上通过属性name，给插槽定义名称，方便引用  ，如果不定义，默认名称是default  

* 要为具名插槽传入内容，我们需要使用一个含 `v-slot` 指令的 `<template>` 元素，并将目标插槽的名字传给该指令：

  ```html
  <BaseLayout>
    <template v-slot:header>
      <!-- header 插槽的内容放这里 -->
    </template>
  </BaseLayout>
  ```

* v-slot` 有对应的简写 `#`，因此 `<template v-slot:header>` 可以简写为 `<template #header>

### 插槽内容要访问子组件数据（作用域插槽）

可以像对组件传递 props 那样，向一个插槽的出口上传递 attributes：

```html
<!-- <MyComponent> 的模板 -->
<div>
  <!--在插槽上暴露属性name  price-->
  <slot :name="goods.name" :price="goods.price">中间</slot>
</div>
```

接收：

* 默认插槽如何接受 props，通过子组件标签上的 `v-slot` 指令，直接接收到了一个插槽 props 对象

  ~~~html
   <!--obj是插槽属性对象  {"spname":"",price:}--> 
  <template #default="obj">
         hello {{ obj.spname }} {{ obj.price }}
    </template>
  ~~~

  简化写法

  ~~~html
  <!--使用对象解构赋值 等同于   const  {spname,price}=插槽属性对象    -->  
  <template #default="{spname,price}">
         hello {{ spname }} {{ price }}
  </template>
  ~~~

  








## vue属性绑定

* v-bind:属性名=""
* 简化写法   :属性名=""

~~~html
 <GoodsItem v-bind:name="goods.name" :price="goods.price" :tags="goods.tags"></GoodsItem>
~~~



## Vue事件绑定

* v-on:事件=""
* @事件=""



## 插件（了解）

* 插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码
* 就是在Vue对象上增加属性或方法 

# Element Plus

* vue2+element ui  
* vue3 element plus  

## 安装依赖

~~~shell
pnpm install element-plus
~~~



## 引入Element Plus 并安装插件

~~~javascript
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'


//引入element plus 
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

//创建vue实例
const app=createApp(App);


//将ElementPlus 以插件形式 安装  安装插件
app.use(ElementPlus);

//实例挂载
app.mount('#app')

~~~



## axios安装

~~~shell
pnpm add axios
~~~

方法：

* get  读取    特点：参数会拼接在地址栏
* post  代表新建  
* put  修改 
* delete 删除  



## Promise承诺

### 回调函数

回调函数本质上是一个函数，只不过它以参数的形式传递给另一个函数，并且会在那个函数内部被调用

~~~javascript
//该函数以参数形式 传递给delayedGreeting函数，并在delayedGreeting函数内调用 
function greet(name) {
  console.log('Hello, ' + name);
}

function delayedGreeting(callback) {
  setTimeout(() => {
    callback('Alice');
  }, 1000);
}

delayedGreeting(greet); // 1秒后输出 "Hello, Alice"
~~~

简化：

~~~javascript
function delayedGreeting(name=>{
                           console.log('Hello, ' + name);
                          }) {
  setTimeout(() => {
    callback('Alice');
  }, 1000);
}
~~~



### 回调地狱

回调地狱（Callback Hell）是指在编写异步代码时，由于多个回调函数嵌套使用而导致的代码结构混乱、可读性差、维护困难的问题。

~~~javascript
getData(function(data1) {
  processData(data1, function(data2) {
    saveData(data2, function(result1) {
      fetchMoreData(result1, function(result2) {
        processMoreData(result2, function(finalResult) {
          // 最终处理逻辑
          console.log('最终结果:', finalResult);
        }, handleError);
      }, handleError);
    }, handleError);
  }, handleError);
}, handleError);
~~~

使用Promise解决回调地狱：

~~~javascript
getData()
  .then(data1 => processData(data1))
  .then(data2 => saveData(data2))
  .then(result1 => fetchMoreData(result1))
  .then(result2 => processMoreData(result2))
  .then(finalResult => {
    console.log('最终结果:', finalResult);
  })
  .catch(error => {
    console.error('错误:', error);
  });
~~~

### Promise

**`Promise`** 对象表示异步操作最终的完成（或失败）以及其结果值。

在这里只关注于一个Promise对象，只有两种结果：

- *已兑现（fulfilled）*：意味着操作成功完成。   使用 .then 处理正确的结果 
- *已拒绝（rejected）*：意味着操作失败。  使用.catch处理失败的结果  

语法：

~~~javascript
//创建Promise对象 
new Promise(executor)
//参数executor  是一个函数 ，该函数有两个参数，
//第一个参数： resolveFunc    它是一个回调函数，用于接收  已兑现的结果 
//第二个参数： rejectFunc      它是一个回调函数，用于接收  已拒绝的结果 

~~~



实例方法：

* .then（掌握）   接收一个参数，该参数是成功回调的结果 ，该方法返回一个Promise对象  ，对应resolve方法的参数
* .catch  （掌握） 接收一个参数，该参数是失败回调的结果 ，该方法返回一个Promise对象，对应reject方法的参数
* .finally()  无论成功与失败 都会执行   

静态方法：

* **`Promise.resolve()`** 静态方法   会将给定的值封装成Promise对象  
* **`Promise.reject()`** 静态方法返回一个已拒绝（rejected）的 `Promise` 对象，拒绝原因为给定的参数。



## 异步函数

简化promise使用

关键字：

* async  将一个函数声明为异步函数 
* await 等待异步的结果，必须用在异步函数内 

~~~javascript

     //异步请求
     function query(){
           return  new  Promise(resolve=>{
               //模拟异步操作 
               setTimeout(()=>{
                resolve("请求成功");
               },3000);
           });
       }

       //异步函数调用  
       async function test(){
          //等待结果
          let res=await query();
          console.log("res>>>",res);

         console.log("==========over=======");
       }


       test();

~~~



## 安装element icon

~~~shell
pnpm install @element-plus/icons-vue
~~~



遮罩层 



## vue属性值

在vue组件中，默认给组件的属性赋值时（常量 值），该值是字符串，如下

~~~html
 <el-dialog
    close-on-click-modal="false"
  >
  </el-dialog>
~~~

close-on-click-modal该属性的值false是字符串，如果属性的值是非字符串，且直接传常量，属性必须是动态绑定

~~~html
<!--属性绑定数组常量-->
<c  :name="[2,e34,6]"></c>
<!--对象-->
<c  :name="{}"></c>
~~~