diff --git a/前端/Vue3.md b/前端/Vue3.md new file mode 100644 index 0000000..cb608af --- /dev/null +++ b/前端/Vue3.md @@ -0,0 +1,394 @@ +# Vue3 + +## 优点 + +1. Vue3 支持 Vue2 额大多数特性。 +2. 更好的支持 TypeScript。 +3. 打包大小减少 41%。 +4. 初次渲染快 55%，更新渲染快 133%。 +5. 内存减少 54%。 +6. 使用 proxy 代替 defineProperty 实现数据响应式。 +7. 重写虚拟 DOM 的实现和 Tree-Shaking。 + +## API + +### setup + +1. setup 是一个函数。只在初始化时执行一次。以后大部分代码都是在 setup 中写。 +2. 返回一个对象，对象中的属性或方法，模板中可以直接使用。 +3. setup 返回的数据会和 data 和 methods 进行合并，setup 优先级更高。 +4. setup 函数中没有 this。 以后开发都不使用 this +5. setup 不要写 async 函数。 + +> 因为 async 函数必须返回一个 json 对象供模板使用，如果 setup 是一个 async 函数，返回的将是一个 promise 对象。 +> 如果 setup 是一个 async 函数，那该组件就成了一个异步函数，需要配合 Suspense 组件才能使用 + +### ref + +让数据变为响应式的数据 + +使用方法： + +```vue +//(1)先引用ref +import {ref} from 'vue'; + +//(2)将数据变成响应式的。 +let data1=ref(12); + +//(3)操作数据 +data1.value = 123; +``` + +### reactive + +定义对象格式的响应式数据 + +如果使用了 ref，内部会自动将对象/数据转换为 reactive 代理器对象 + +### toRefs + +将响应式对象中所有属性包装为 ref 对象，并返回包含这些 ref 对象的普通对象。 +应用：对 trsctive 定义的对象进行 toRefs 包装，包装之后的对象中每个属性都是响应式的。 + +### 响应式原理 + +通过 proxy（代理）：拦截对对象本身的操作，包括属性的读写、删除等操作。 +通过 Reflect（反射）：动态对被代理对象的响应式属性进行特定的操作。 + +### watch 和 watchEffect + +#### watch - 指定监听数据 + +- 监听指定的一个或多个响应式数据，一旦发生变化，就会自动执行监视回调。 + - 如果是监听 reactive 对象中的属性，必须通过函数来指定。 + - 监听多个数据，使用数组来指定。 +- 默认初始时不指定回调，但是通弄过配置 immediate 为 true，来指定初始时立即执行第一次。 +- 通过配置 deep 为 true，来指定深度监视。 + +#### watchEffect - 不指定监听数据 + +- 不用直接指定啦监视的数据，回调函数中使用的哪些响应式数据就监听哪些响应式数据。 +- 默认初始就会执行一次。 + +### 生命周期 + +onMounted、onUpdated 和 onUnmounted等 + +![组件生命周期图示](https://cn.vuejs.org/assets/lifecycle_zh-CN.W0MNXI0C.png) + +### ref获取元素 + +> vue2中是用this ref.xxx来获取元素或组件，但是vue3中没有this的概念。 +> vue3通过ref创建响应式数据的api来获取元素。 + +1.使用ref创建响应式数据，假设叫x +2.模板中绑定ref属性，值为上面的x + +注意不能使用v-bind动态绑定。 +这时 x 就是一个dom元素或组件了。 + +```vur + + + + + + Vue 3 ref 引用示例 + + + + + +
+
+

Vue 3 ref 引用示例

+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+ +
+

状态信息

+

当前引用的元素: {{ elementInfo }}未选择元素

+
+
+
+ + + + +``` + +### 自定义hook函数 + +> hook函数翻译成中文就是钩子函数（注意并不是生命周期的钩子函数） +> 比如ref,reactive,computed,watch,onBeforeMount等都是hook函数，只不过他们都是vue内部hook函数。 + +1.创建一个函数，函数名称必须以"use"开头 +2.函数必须return一些数据。 + +`export function useFetchData()` + +### shallowReactive与shallowRef + +他们都表示浅响应式。 + +- shallowReactive：只处理了对象第一层属性的响应式（值响应第一层） +- shallowRef：只有重新复制时才是响应式（不响应内部数据，只响应整体。） + +### -readonly与shallowReadonly + +- 他们表示只读代理对象 +- readonly + - 深度只读 + - 设置readonly后，修改响应式数据会报错。 +- shalloReadonly + - 浅只读 + - 设置shalloReadonly后，修改响应式数据的第一层数据会报错。 +- 应用场景： + - 在某些特定情况下，我们可能不希望对数据进行更新的操作，那就可以包装成一个只读代理对象，而不能修改或删除。 + +### -toRaw与markRaw + +- toRaw + - 返回reactive或readonly对象的原始数据 + - 这是一个还原方法，可用于临时读取，得到的数据不具有响应式。 +- markRow： + - 标记一个对象，使其不具有响应式 + - 应用场景： + - 有些只不应被设置为响应式的，例如复杂的第三方实例或Vue组件对象。 + - 当渲染具有不可变数据源的大列表时，跳过代理转换可以提高性能。 + +### toRef + +- 为响应式对象上的某个属性创建一个ref引用，更新是应用对象会同步更新。 +- 与ref的区别：ref是拷贝了一份新的数据指单独操作，更新时相互不影响。 + +### -customRef + +- 用于自定义一个ref，可以显示的控制依赖追踪和触发相应。 +- 接受一个工厂函数，两个参数分别用于追踪的track与用于触发相应的trigger，并方法一个带有get和set属性的对象。 +- 需求：使用customRef实现防抖函数 + +### -provide与inject + +- provide和inject提供依赖注入，功能类似2.0的provide/inject +- 实现跨层级组件（祖孙）间通信。 + +### -响应式数据的判断 + +- isRef：检查一个值是否为一个ref对象。 +- isReactive：检查一个对象是否否是由reactive对象的响应式代理。 +- isReadonly：检查一个对象是否由readonly创建的只读代理。 +- isProxy：检查一个对象是否是由reactive或者readonly方法创建的代理。 + +### Fragment + +- 在vue2中：组件中必须有一个跟标签 +- 在vue3中：组价可以没有跟标签，内部会将多个标签包含在一个Fragment虚拟标签中。 + - 好处：减少标签层级，减小内存占用 + +### Teleport + +- Teleport提供了一种干净的方法，让组件的HTML在父组件界面外的特定标签（很可能是body)下插入显示。 + +### Suspense + +> Supense组件是配合一部组件使用的，它可以让一部组件返回数据前渲染一些后背内容。 +> 那我们首先要学会一个异步组件。 + +- 在setup函数总返回一个promise，就是一个异步组件。 +- setup函数携程async函数，也是一个异步组件。 + +### 其他新的API + +- 全新的全局API： + - createApp() + - defineProperty() + - defineComponent() + - nextTick() +- 将原来的全局API转移到应用对象： + - app.component() + - app.config() + - app.directive() + - app.mount() + - app.umount() + - app.use() + +### useSlots和useAttrs + +> useSlots 和 useAttrs 是真实的运行时函数，它会返回与 setupContext.slots 和 setupContext.attrs 等价的值，同样也能在普通的组合式 API 中使用。 +> 使用场景：父组件使用子组件的插槽 + +1.父组件 + +```xml + + + +``` + +2.子组件 + +```xml + + + + +``` + +## 路由 + +（1）userRout：获得当前路由对象。 +（2）useRouter：获得路由实例，可以进行路由跳转。 + +### 使用 + +```javascript +import {useRoute,useRouter} from "vue-router" +``` + +## 实战 + +创建项目后 + +### ElementPlus + +引入 + +```sh +npm install element-plus --save +``` + +尝试静态界面 + +![image-20250618172046133](assets/Vue3/image-20250618172046133.png) diff --git a/前端/assets/Vue3/image-20250618172046133.png b/前端/assets/Vue3/image-20250618172046133.png new file mode 100644 index 0000000..768b837 Binary files /dev/null and b/前端/assets/Vue3/image-20250618172046133.png differ diff --git a/学习记录/6-18_李慧学习记录.md b/学习记录/6-18_李慧学习记录.md new file mode 100644 index 0000000..42f1d9b --- /dev/null +++ b/学习记录/6-18_李慧学习记录.md @@ -0,0 +1,481 @@ +# K线的画法 + +## k线的画法 + +K线，又称日本线，起源于200年前的日本，最初用于米市交易。 + +K线是一种柱状线条，由影线和实体组成。 + +影线在实体上方的部分叫上影线，下方的部分叫下影线。 + +实体分为阴线和阳线两种，分别用黑（阴）线和红（阳）线表示。 + +一条K线记录的是某一只股票或指数一天的价格变动情况，将每天的K线按时间顺序排列，就组成这只股票自上市以来每天的价格变动情况，称为日K线图。 + +价格变动体现在四个方面（主要），开盘价、最高价、最低价、收盘价 + +阴线阳线的开盘价，收盘价相反 + +![image-20250618173052302](../股票/assets/6-18股票学习/image-20250618173052302.png) + +## K线的种类 + +K线的种类主要有以下几种： + +1. **光头阳线和光头阴线**：没有上影线的K线，当收盘价或开盘价正好同最高价相等时出现。 +2. **光脚阳线和光脚阴线**：没有下影线的K线，当收盘价或开盘价正好同最低价相等时出现。 +3. **光头光脚的阳线和阴线**：既没有上影线也没有下影线的K线，当开盘价和收盘价分别与最高价和最低价相等时出现。 +4. **十字星**：收盘价与开盘价相同时出现的K线，没有实体。 +5. **T字型和倒T字型**：在十字星的基础上，加上光头或光脚的条件，没有实体，形状像英文字母T。 +6. **一字型**：四个价格都一样，在开盘即封时，在涨停或跌停时出现。 + +## K线的变化 + +### 三要素 + +1. 阴阳代表总体趋势 +2. 长短代表内在动力和趋势强弱 +3. 阴线代表转折信号 + +### K线间的相互关系 + +光头光脚长阳线，是强烈上升过程的最高形式，即后市看好的极端； + +光头光脚的长阴线，是强烈下跌过程的最高形式，即后市看坏的极端； + +十字星是多空双方平衡状态的最高形式 + +### K线长短相互关系 + +K线长短代表内在动力大小，其中，实体长度又可代表趋势强弱。 + +### 线长度加大会有三种变化 + +K线由小阳线、中阳线到长阳线不断加长，说明多方力量变得越来越强； + +K线由小阴线、中阴线到长阴线不断加长，说明空方力量变得越来越强； + +K线实体变化不大，上影线和下影线越来越长，说明市场内在动力越来越强，多空搏斗越来越激烈。 + +### K线长度变化与动力转化 + +#### 影线长短互相影响 + +![image-20250618175722273](../股票/assets/6-18股票学习/image-20250618175722273.png) + +![image-20250618175734785](../股票/assets/6-18股票学习/image-20250618175734785.png) + +### K线分析的应用时机 + +阳线出现在盘整或股价下跌趋势末期时，代表股价可能会开始反转向上； + +阴线出现在盘整或股价上涨趋势末期时，代表股价可能会开始反转向下 + +出现极长下影线时，表示买方支撑力较强 + +出现极长上影线时，表示卖压大。 + +十字线可视为反转信号 + + + +# Vue3 + +## 优点 + +1. Vue3 支持 Vue2 额大多数特性。 +2. 更好的支持 TypeScript。 +3. 打包大小减少 41%。 +4. 初次渲染快 55%，更新渲染快 133%。 +5. 内存减少 54%。 +6. 使用 proxy 代替 defineProperty 实现数据响应式。 +7. 重写虚拟 DOM 的实现和 Tree-Shaking。 + +## API + +### setup + +1. setup 是一个函数。只在初始化时执行一次。以后大部分代码都是在 setup 中写。 +2. 返回一个对象，对象中的属性或方法，模板中可以直接使用。 +3. setup 返回的数据会和 data 和 methods 进行合并，setup 优先级更高。 +4. setup 函数中没有 this。 以后开发都不使用 this +5. setup 不要写 async 函数。 + +> 因为 async 函数必须返回一个 json 对象供模板使用，如果 setup 是一个 async 函数，返回的将是一个 promise 对象。 +> 如果 setup 是一个 async 函数，那该组件就成了一个异步函数，需要配合 Suspense 组件才能使用 + +### ref + +让数据变为响应式的数据 + +使用方法： + +```vue +//(1)先引用ref +import {ref} from 'vue'; + +//(2)将数据变成响应式的。 +let data1=ref(12); + +//(3)操作数据 +data1.value = 123; +``` + +### reactive + +定义对象格式的响应式数据 + +如果使用了 ref，内部会自动将对象/数据转换为 reactive 代理器对象 + +### toRefs + +将响应式对象中所有属性包装为 ref 对象，并返回包含这些 ref 对象的普通对象。 +应用：对 trsctive 定义的对象进行 toRefs 包装，包装之后的对象中每个属性都是响应式的。 + +### 响应式原理 + +通过 proxy（代理）：拦截对对象本身的操作，包括属性的读写、删除等操作。 +通过 Reflect（反射）：动态对被代理对象的响应式属性进行特定的操作。 + +### watch 和 watchEffect + +#### watch - 指定监听数据 + +- 监听指定的一个或多个响应式数据，一旦发生变化，就会自动执行监视回调。 + - 如果是监听 reactive 对象中的属性，必须通过函数来指定。 + - 监听多个数据，使用数组来指定。 +- 默认初始时不指定回调，但是通弄过配置 immediate 为 true，来指定初始时立即执行第一次。 +- 通过配置 deep 为 true，来指定深度监视。 + +#### watchEffect - 不指定监听数据 + +- 不用直接指定啦监视的数据，回调函数中使用的哪些响应式数据就监听哪些响应式数据。 +- 默认初始就会执行一次。 + +### 生命周期 + +onMounted、onUpdated 和 onUnmounted等 + +![组件生命周期图示](https://cn.vuejs.org/assets/lifecycle_zh-CN.W0MNXI0C.png) + +### ref获取元素 + +> vue2中是用this ref.xxx来获取元素或组件，但是vue3中没有this的概念。 +> vue3通过ref创建响应式数据的api来获取元素。 + +1.使用ref创建响应式数据，假设叫x +2.模板中绑定ref属性，值为上面的x + +注意不能使用v-bind动态绑定。 +这时 x 就是一个dom元素或组件了。 + +```vur + + + + + + Vue 3 ref 引用示例 + + + + + +
+
+

Vue 3 ref 引用示例

+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+ +
+

状态信息

+

当前引用的元素: {{ elementInfo }}未选择元素

+
+
+
+ + + + +``` + +### 自定义hook函数 + +> hook函数翻译成中文就是钩子函数（注意并不是生命周期的钩子函数） +> 比如ref,reactive,computed,watch,onBeforeMount等都是hook函数，只不过他们都是vue内部hook函数。 + +1.创建一个函数，函数名称必须以"use"开头 +2.函数必须return一些数据。 + +`export function useFetchData()` + +### shallowReactive与shallowRef + +他们都表示浅响应式。 + +- shallowReactive：只处理了对象第一层属性的响应式（值响应第一层） +- shallowRef：只有重新复制时才是响应式（不响应内部数据，只响应整体。） + +### -readonly与shallowReadonly + +- 他们表示只读代理对象 +- readonly + - 深度只读 + - 设置readonly后，修改响应式数据会报错。 +- shalloReadonly + - 浅只读 + - 设置shalloReadonly后，修改响应式数据的第一层数据会报错。 +- 应用场景： + - 在某些特定情况下，我们可能不希望对数据进行更新的操作，那就可以包装成一个只读代理对象，而不能修改或删除。 + +### -toRaw与markRaw + +- toRaw + - 返回reactive或readonly对象的原始数据 + - 这是一个还原方法，可用于临时读取，得到的数据不具有响应式。 +- markRow： + - 标记一个对象，使其不具有响应式 + - 应用场景： + - 有些只不应被设置为响应式的，例如复杂的第三方实例或Vue组件对象。 + - 当渲染具有不可变数据源的大列表时，跳过代理转换可以提高性能。 + +### toRef + +- 为响应式对象上的某个属性创建一个ref引用，更新是应用对象会同步更新。 +- 与ref的区别：ref是拷贝了一份新的数据指单独操作，更新时相互不影响。 + +### -customRef + +- 用于自定义一个ref，可以显示的控制依赖追踪和触发相应。 +- 接受一个工厂函数，两个参数分别用于追踪的track与用于触发相应的trigger，并方法一个带有get和set属性的对象。 +- 需求：使用customRef实现防抖函数 + +### -provide与inject + +- provide和inject提供依赖注入，功能类似2.0的provide/inject +- 实现跨层级组件（祖孙）间通信。 + +### -响应式数据的判断 + +- isRef：检查一个值是否为一个ref对象。 +- isReactive：检查一个对象是否否是由reactive对象的响应式代理。 +- isReadonly：检查一个对象是否由readonly创建的只读代理。 +- isProxy：检查一个对象是否是由reactive或者readonly方法创建的代理。 + +### Fragment + +- 在vue2中：组件中必须有一个跟标签 +- 在vue3中：组价可以没有跟标签，内部会将多个标签包含在一个Fragment虚拟标签中。 + - 好处：减少标签层级，减小内存占用 + +### Teleport + +- Teleport提供了一种干净的方法，让组件的HTML在父组件界面外的特定标签（很可能是body)下插入显示。 + +### Suspense + +> Supense组件是配合一部组件使用的，它可以让一部组件返回数据前渲染一些后背内容。 +> 那我们首先要学会一个异步组件。 + +- 在setup函数总返回一个promise，就是一个异步组件。 +- setup函数携程async函数，也是一个异步组件。 + +### 其他新的API + +- 全新的全局API： + - createApp() + - defineProperty() + - defineComponent() + - nextTick() +- 将原来的全局API转移到应用对象： + - app.component() + - app.config() + - app.directive() + - app.mount() + - app.umount() + - app.use() + +### useSlots和useAttrs + +> useSlots 和 useAttrs 是真实的运行时函数，它会返回与 setupContext.slots 和 setupContext.attrs 等价的值，同样也能在普通的组合式 API 中使用。 +> 使用场景：父组件使用子组件的插槽 + +1.父组件 + +```xml + + + +``` + +2.子组件 + +```xml + + + + +``` + +## 路由 + +（1）userRout：获得当前路由对象。 +（2）useRouter：获得路由实例，可以进行路由跳转。 + +### 使用 + +```javascript +import {useRoute,useRouter} from "vue-router" +``` + +## 实战 + +创建项目后 + +### ElementPlus + +引入 + +```sh +npm install element-plus --save +``` + +尝试静态界面 + +![image-20250618172336329](assets/6-18_李慧学习记录/image-20250618172336329.png) + +# 明日计划 + +1. 股票知识 +2. 继续学习vue3 +3. 参与到金币前端的任务 diff --git a/学习记录/assets/6-18_李慧学习记录/image-20250618172336329.png b/学习记录/assets/6-18_李慧学习记录/image-20250618172336329.png new file mode 100644 index 0000000..768b837 Binary files /dev/null and b/学习记录/assets/6-18_李慧学习记录/image-20250618172336329.png differ diff --git a/股票/6-18股票学习.md b/股票/6-18股票学习.md new file mode 100644 index 0000000..5fb5193 --- /dev/null +++ b/股票/6-18股票学习.md @@ -0,0 +1,79 @@ +# K线的画法 + +## k线的画法 + +K线，又称日本线，起源于200年前的日本，最初用于米市交易。 + +K线是一种柱状线条，由影线和实体组成。 + +影线在实体上方的部分叫上影线，下方的部分叫下影线。 + +实体分为阴线和阳线两种，分别用黑（阴）线和红（阳）线表示。 + +一条K线记录的是某一只股票或指数一天的价格变动情况，将每天的K线按时间顺序排列，就组成这只股票自上市以来每天的价格变动情况，称为日K线图。 + +价格变动体现在四个方面（主要），开盘价、最高价、最低价、收盘价 + +阴线阳线的开盘价，收盘价相反 + +![image-20250618173052302](assets/6-18股票学习/image-20250618173052302.png) + +## K线的种类 + +K线的种类主要有以下几种： + +1. **光头阳线和光头阴线**：没有上影线的K线，当收盘价或开盘价正好同最高价相等时出现。 +2. **光脚阳线和光脚阴线**：没有下影线的K线，当收盘价或开盘价正好同最低价相等时出现。 +3. **光头光脚的阳线和阴线**：既没有上影线也没有下影线的K线，当开盘价和收盘价分别与最高价和最低价相等时出现。 +4. **十字星**：收盘价与开盘价相同时出现的K线，没有实体。 +5. **T字型和倒T字型**：在十字星的基础上，加上光头或光脚的条件，没有实体，形状像英文字母T。 +6. **一字型**：四个价格都一样，在开盘即封时，在涨停或跌停时出现。 + +## K线的变化 + +### 三要素 + +1. 阴阳代表总体趋势 +2. 长短代表内在动力和趋势强弱 +3. 阴线代表转折信号 + +### K线间的相互关系 + +光头光脚长阳线，是强烈上升过程的最高形式，即后市看好的极端； + +光头光脚的长阴线，是强烈下跌过程的最高形式，即后市看坏的极端； + +十字星是多空双方平衡状态的最高形式 + +### K线长短相互关系 + +K线长短代表内在动力大小，其中，实体长度又可代表趋势强弱。 + +### 线长度加大会有三种变化 + +K线由小阳线、中阳线到长阳线不断加长，说明多方力量变得越来越强； + +K线由小阴线、中阴线到长阴线不断加长，说明空方力量变得越来越强； + +K线实体变化不大，上影线和下影线越来越长，说明市场内在动力越来越强，多空搏斗越来越激烈。 + +### K线长度变化与动力转化 + +#### 影线长短互相影响 + +![image-20250618175722273](assets/6-18股票学习/image-20250618175722273.png) + +![image-20250618175734785](assets/6-18股票学习/image-20250618175734785.png) + +### K线分析的应用时机 + +阳线出现在盘整或股价下跌趋势末期时，代表股价可能会开始反转向上； + +阴线出现在盘整或股价上涨趋势末期时，代表股价可能会开始反转向下 + +出现极长下影线时，表示买方支撑力较强 + +出现极长上影线时，表示卖压大。 + +十字线可视为反转信号 + diff --git a/股票/assets/6-18股票学习/image-20250618173052302.png b/股票/assets/6-18股票学习/image-20250618173052302.png new file mode 100644 index 0000000..2603ee3 Binary files /dev/null and b/股票/assets/6-18股票学习/image-20250618173052302.png differ diff --git a/股票/assets/6-18股票学习/image-20250618175722273.png b/股票/assets/6-18股票学习/image-20250618175722273.png new file mode 100644 index 0000000..82e15ca Binary files /dev/null and b/股票/assets/6-18股票学习/image-20250618175722273.png differ diff --git a/股票/assets/6-18股票学习/image-20250618175734785.png b/股票/assets/6-18股票学习/image-20250618175734785.png new file mode 100644 index 0000000..fd797e5 Binary files /dev/null and b/股票/assets/6-18股票学习/image-20250618175734785.png differ