vue3+ts+vite项目开发--知识点梳理01

vue3+ts+vite项目开发--知识点梳理01

  • 创建vue3项目
  • 01 tsconfig.node.json文件中extends报错
  • 02 知识点:用nvm安装最新版本的node
  • 03. template标签中的#表示啥意思
  • 04 ts中 ??使用
  • 05 ts中 reduce
  • 06 vue3+ts中watch和watchEffect监听使用
  • 07 unocss用法积累
  • 08 <el-col :xs="24":sm="12":lg="6" ></el-col>中属性理解
    • 09 Vue3 中 createWebHistory 和 createWebHashHistory 的区别
    • 10 pinia使用方法
    • 11 vue3路由(基本用法、路由守卫、动态路由)
    • 12 @iconify-json/ep理解
    • 13 vite自动按需导入
    • 14 vue3 - 按需导入使用Element Plus图标、iconify图标、本地SVG/PNG图标
    • 15 vue3中defineComponent和defineAsyncComponent的区别及使用场景
    • 16 element plus 引入icon 三种方法
    • 17 Vue3的新API: markRaw和toRaw
    • 18 border-color: currentcolor; currentcolor意义
    • 19 text-size-adjust: 100% 有什么作用?
    • 20 background-color: var(--el-bg-color-page);中--el-bg-color-page怎么定义的?
    • 21 ES6之Array.from()方法
    • 22 ts中的特殊符号 ?. ?: !. ?? || 等代表的含义与使用
    • 23 reactive与ref区别有以下几方面:
    • 24 Vue插件之install方法封装element-ui组件(按需引入)
    • 25 Vue:自动按需导入element-plus图标
    • 27 Object.assign(formData, data);
    • 28 TS中class类的基本使用
    • 29 typescript map方法
    • 30 Vue3+Ts 组件通信方法
    • 31 Vue3通信方式之defineProps、defineEmits、useAttrs、插件mitt和v-model
    • 32 Vue3的defineProps方法
    • 33 新特性-defineOptions
    • 34 useVModel()的使用
    • 35 vue3父子,跨组件之间通信
    • 36 vue3 useVModel 实现父子组件双向数据绑定
    • 37 watchEffect使用

创建vue3项目

参考vue3官方文档【快速上手】模块进行项目创建
快速上手

遇到的问题:

01 tsconfig.node.json文件中extends报错

在这里插入图片描述
解决:

 npm install --save-dev  @types/lodash

无效果的话就重启下项目

02 知识点:用nvm安装最新版本的node

查看可用的node版本,报错:Could not retrieve https://npm.taobao.org/mirrors/node/index.json.
原因:由于npm.taobao.org域名HTTPS证书到期更换为npmmirror.com
解决:
找到nvm安装路径的settings.txt文件
在这里插入图片描述

打开添加或者更改镜像地址,保存即可。
在这里插入图片描述

node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

在这里插入图片描述
参考文章:https://blog.csdn.net/jieyucx/article/details/138080248

03. template标签中的#表示啥意思

在这里插入图片描述
v-slot 的缩写,即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header:

参考:https://ask.csdn.net/questions/7694480

04 ts中 ??使用

ts中??它用于判断一个值是否为 null 或 undefined,并在其为真时返回一个默认值。

const a= null;
const b= a ?? "jjj";
 
console.log(b); // 输出 "jjj"

需要注意的是,“??” 运算符只会在左侧的值为 null 或 undefined 时返回默认值,而不会在左侧的值为其他“假值”(如空字符串、0、false 等)时返回默认值。

05 ts中 reduce

在这里插入图片描述

06 vue3+ts中watch和watchEffect监听使用

参考:https://blog.csdn.net/m0_60893808/article/details/130899459

07 unocss用法积累

可通过:https://unocss.dev/interactive/
查看对应的css样式

<el-card class="!border-none !bg-transparent !rounded-4% w-100 <sm:w-85"></el-card>

.\!border-none {
 border-style: none !important;
}

.\!bg-transparent {
  background-color: transparent !important;
}

.\!rounded-4\% {
  border-radius: 4% !important;
}

.w-100 {
  width: 25rem;
}

@media (max-width: 639.9px) {
  .\<sm\:w-85 {
    width: 21.25rem;
  }
}

在这里插入图片描述

其他的

.text-center {
  text-align: center;
}

.bottom-1 {//我的理解:1===4px===4/16=0.25rem
  bottom: 0.25rem; //4px
}
.bottom-4 {
  bottom: 1rem; //16px
}
.text-[10px] {
  font-size: 10px;
}

.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}

.ml-2 {
  margin-left: 0.5rem; /* 8px */
}
.cursor-pointer {
  cursor: pointer;
}
.p-3 {
  padding: 0.75rem; /* 12px */
}
.items-center {
  align-items: center;
}
.justify-around {
  justify-content: space-around;
}
.rounded-full {
  border-radius: 9999px;
}

还可以再uno.config.ts文件中自定义快捷键

// uno.config.ts
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup,
} from "unocss";

export default defineConfig({
  shortcuts: {
    "flex-center": "flex justify-center items-center",
    "flex-x-center": "flex justify-center",
    "flex-y-center": "flex items-center",
    "wh-full": "w-full h-full",
    "flex-x-between": "flex items-center justify-between",
    "flex-x-end": "flex items-center justify-end",
    "absolute-lt": "absolute left-0 top-0",
    "absolute-rt": "absolute right-0 top-0 ",
    "fixed-lt": "fixed left-0 top-0",
  },
  theme: {
    colors: {
      primary: "var(--el-color-primary)",
      primary_dark: "var(--el-color-primary-light-5)",
    },
  },
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons(),
    presetTypography(),
    presetWebFonts({
      fonts: {
        // ...
      },
    }),
  ],
  transformers: [transformerDirectives(), transformerVariantGroup()],
});

08 <el-col :xs=“24”:sm=“12”:lg=“6” >中属性理解

参照了 Bootstrap 的 响应式设计,预设了五个响应尺寸:xs、sm、md、lg 和 xl。
在这里插入图片描述

: 布局控制
el-col 是 Element UI 的栅格系统中的列(column)组件,用于创建响应式布局。
:xs=“24” :sm=“24” :md=“12” :lg=“8” 这些是响应式属性,决定了在不同屏幕尺寸下该列的宽度:

xs 和 sm 为 24,意味着在小屏设备上占满整行。
md 为 12,表示在中等屏幕上占据半行。
lg 为 8,表示在大屏设备上占据三分之一行。

例如: 通过xs、sm、lg、xl设置不同分辨率下显示1列、2列、3列、4列

 <el-col
          :xs='24'
          :sm='12'
          :lg='8'
          :xl='6'
          v-for='item in result'
          :key='item.id'
        >
 </el-col>

09 Vue3 中 createWebHistory 和 createWebHashHistory 的区别

参考:https://blog.csdn.net/qq_43216714/article/details/138080696

10 pinia使用方法

参考:https://blog.csdn.net/weixin_50961467/article/details/137370229

11 vue3路由(基本用法、路由守卫、动态路由)

参考:https://blog.csdn.net/weixin_50961467/article/details/137747672

12 @iconify-json/ep理解

// @iconify-json/ep 是 Element Plus 的图标库
npm i -D unocss @iconify-json/ep

13 vite自动按需导入

参考:https://blog.csdn.net/webbirds/article/details/127283504

14 vue3 - 按需导入使用Element Plus图标、iconify图标、本地SVG/PNG图标

参考:https://www.jianshu.com/p/1fe86d0cf012

15 vue3中defineComponent和defineAsyncComponent的区别及使用场景

参考:https://blog.csdn.net/weixin_43995143/article/details/136258204

16 element plus 引入icon 三种方法

参考:https://blog.csdn.net/zihong2019/article/details/123132554

17 Vue3的新API: markRaw和toRaw

参考:https://blog.csdn.net/weixin_46112225/article/details/125269789
markRaw:标记一个对象,使其永远不会转换为 proxy。返回对象本身。意思就是使其不能成为一个响应式对象。

const foo = markRaw({}) //创建一个markRaw对象
console.log(isReactive(reactive(foo))) // false   判断是不是响应式数据

有些值不应该是响应式的,例如复杂的第三方类实例或 Vue 组件对象。
当渲染具有不可变数据源的大列表时,跳过 proxy 转换可以提高性能。

toRaw:将响应式对象(由 reactive定义的响应式)转换为普通对象。
返回 reactive 或 readonly 代理的原始对象。这是一个“逃生舱”,可用于临时读取数据而无需承担代理访问/跟踪的开销,也可用于写入数据而避免触发更改。不建议保留对原始对象的持久引用。请谨慎使用。

const foo = {}
const reactiveFoo = reactive(foo)
 
console.log(toRaw(reactiveFoo) === foo) // true

18 border-color: currentcolor; currentcolor意义

CSS3 新定义的一个属性,意思是取当前元素的字体颜色、边框颜色、阴影颜色等等,如果当前元素内没有定义color,则取父级元素的color元素,如果父级元素没有回一直往上取,直到有定义color的父级元素,如果都没有定义color ,则取当前的border-color或其他的元素,那个元素在上面,则取哪一个,如果父级元素和当前元素都定义有color,则取当前元素的color

由于color属性可以被继承,所以有的时候只需要在祖元素设置好color属性,其子元素和孙元素都可以使用currentcolor来调用祖元素的颜色。

19 text-size-adjust: 100% 有什么作用?

参考:https://blog.csdn.net/weixin_34130269/article/details/92289219
iPhone 和 Android 的浏览器纵向 (Portrate mode) 和橫向 (Landscape mode) 模式皆有自动调整字体大小的功能。控制它的就是 CSS 中的 -webkit-text-size-adjust。

text-size-adjust 设为 none 或者 100% 关闭字体大小自动调整功能.
一般不使用 none 而是 100% 的原因

20 background-color: var(–el-bg-color-page);中–el-bg-color-page怎么定义的?

这是不同团队定义的Design Token

浏览器f12,鼠标放到对应位置上,会显示对应颜色
在这里插入图片描述

浏览器f12,查看对应的css值,然后ctrl+点击 即可看到对应的颜色,这是element定义好的颜色。
在这里插入图片描述
在这里插入图片描述

21 ES6之Array.from()方法

Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。

参考:https://www.cnblogs.com/jf-67/p/8440758.html

22 ts中的特殊符号 ?. ?: !. ?? || 等代表的含义与使用

1、?: 是指可选参数,定义对象属性时候,或者参数接收时可用
注:如果没有属性,则表示 undefined

const {icon,size }= defineProps<{  // 通过 TS的泛型  定义接收的数据类型
    icon:any,
    size?:number|string, // size 可选参数,类型为 字符串或数值
}>()

2、?. 意思基本和 && 是一样的,如果用在对象的属性里面的话,表示对象和对象里属性都需要
比如:a?.b 相当于 a && a.b ? a.b : undefined

//等同于  config.interceptors && config.interceptors.requestInterceptor
if (config.interceptors?.requestInterceptor) {
    config = config.interceptors.requestInterceptor(config)
}

3、!. 的意思是 断言,告诉ts你这个对象里一定有某个值
注:一般是防止报错使用

const inputRef = useRef<HTMLEInputlement>(null);
// 定义了输入框,初始化是null,但是你在调用他的时候相取输入框的value,
这时候dom实例一定是有值的,所以用断言
const value: string = inputRef.current!.value;
// 这样就不会报错了

4、?? 和 || 的意思有点相似
注:??相较||比较严谨, 当值等于0的时候||就把他给排除了,但是?? 不会

console.log(null || 1)   //1
console.log(null ?? 1)     //1
 
console.log(undefined || 1)      //1
console.log(undefined ?? 1)      //1
 
console.log(0 || 1)       //1
console.log(0 ?? 1)      //0

参考:https://blog.csdn.net/qq_41619796/article/details/129833416

23 reactive与ref区别有以下几方面:

reactive与ref区别有以下几方面:

1、 从定义数据方面:
ref通常用来定义基本类型数据
reactive用来定义:对象(或者数组)类型数据
ref也可以用来定义对象或者数组类型的数据,内部会通过reactive转为代理对象

2、从原理方面:
ref通过Object.defineProperty()的get和set实现数据代理。
reactive使用Proxy实现数据代理,并且通过Reflect操作源对象内部的数据。

3、从使用方面:
ref操作数据需要.value,template模板中不需要。
reactive都不需要,value

参考:https://blog.csdn.net/Anorry/article/details/131927914

vue3中reactive和ref的实现与区别详解:原理
https://www.jb51.net/javascript/302492kg6.htm

24 Vue插件之install方法封装element-ui组件(按需引入)

当项目中需要引入大量的插件时,则可以考虑对引入的插件进行一个封装,此时需要借助Vue.js插件中的 install 方法。在Vue.js框架的底层逻辑中,调用use方法时将默认执行 install(Vue, options) 方法,并且默认传入参数:构造器 Vue 和可选配置 options

参考:https://blog.csdn.net/D_Y_C_Java_/article/details/132185534

其他install方法解释参考
https://v1-cn.vuejs.org/guide/plugins.html
https://blog.csdn.net/qq_42943914/article/details/138854973

25 Vue:自动按需导入element-plus图标

1.安装自动安装 unplugin-icons 和 unplugin-auto-import
2.配置vite.config.ts
3.使用

<el-icon>
    <CaretLeft />
</el-icon>
 
<-- 应该写成⬇ -->
 
<el-icon>
    <i-ep-caret-left />
</el-icon>
 

 
<el-icon>
    <Plus/>
</el-icon>
 
<-- 应该写成⬇ -->
 
<el-icon>
    <i-ep-plus />
</el-icon>

el-icon可以自定义这两个属性

<el-icon :size="size" :color="color">
	<i-ep-plus />
</el-icon>

参考这两篇可使用:
https://blog.csdn.net/ruancexiaoming/article/details/136560017
https://blog.csdn.net/DM_Cxx/article/details/130844003

另外直接使用 比 图片要大一些

但是,使用过程中遇到一个问题:
直接使用和使用样式有些区别,暂时不知道怎么回事

第一种:直接

<el-button type="success" @click="openDialog()">
	<i-ep-plus />
   新增
 </el-button>

在这里插入图片描述
第二种: 颜色暗了些

<el-button type="success" @click="openDialog()">
   <el-icon><Plus /></el-icon>
   新增
 </el-button>

在这里插入图片描述
第三种: 同第二种

<el-button type="success" @click="openDialog()">
  <el-icon><i-ep-plus /></el-icon>
  新增
</el-button>

在这里插入图片描述

27 Object.assign(formData, data);

Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

//【target:目标对象】,【souce:源对象(可多个)】
Object.assign(target,...sources)

參考:https://www.jianshu.com/p/12ddbadea6a4

28 TS中class类的基本使用

参考:https://blog.csdn.net/XunLin233/article/details/133338761

29 typescript map方法

TypeScript是一种面向对象的编程语言,它是JavaScript的超集,支持类型注解和接口。它允许您在编译代码时检测代码中的错误,并在运行时减少类型错误。TypeScript中的map方法是一种为数组中的每个元素应用一个函数执行操作并返回一个新数组的高级函数
在这里插入图片描述
在这里插入图片描述

参考:
https://wenku.baidu.com/view/6e9a4eb4e309581b6bd97f19227916888586b96d.html?wkts=1717574885114&bdQuery=ts%E4%B8%ADmap%E6%96%B9%E6%B3%95%E6%80%8E%E4%B9%88%E4%BD%BF%E7%94%A8

30 Vue3+Ts 组件通信方法

注意!!! provide和inject只能在setup中使用,不能放在watch()监听函数中使用

参考:
https://www.jb51.net/javascript/297428mru.htm
https://blog.csdn.net/Hannah_Hannah_/article/details/133761633

31 Vue3通信方式之defineProps、defineEmits、useAttrs、插件mitt和v-model

参考:https://blog.csdn.net/weixin_43025151/article/details/131342413

32 Vue3的defineProps方法

参考:https://blog.csdn.net/kaka_buka/article/details/135901872

33 新特性-defineOptions

参考:https://zhuanlan.zhihu.com/p/669564050

34 useVModel()的使用

参考:https://blog.csdn.net/m0_57108418/article/details/129995650

35 vue3父子,跨组件之间通信

参考:
https://blog.csdn.net/iouytrep/article/details/134788011

36 vue3 useVModel 实现父子组件双向数据绑定

参考:https://blog.csdn.net/qq_23207707/article/details/123647187

37 watchEffect使用

参考:
https://www.jb51.net/javascript/3136252ft.htm
https://cn.vuejs.org/guide/essentials/watchers.html#watcheffect

flush: watch 的执行顺序。
	pre 组件更新之前执行(默认)
	sync 同步执行;
	post 组件更新之后执行

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/692233.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SwiftUI中Preference的理解与使用(ScrollView偏移量示例)

在 SwiftUI 中&#xff0c;Preference用于从视图层次结构的较深层次向上传递信息到较浅层次。这通常用于在父视图中获取子视图的属性或状态&#xff0c;而不需要使用状态管理工具如State或 ObservableObject。Preference特别用于自定义布局或组件&#xff0c;其中子视图需要向父…

构建智能汽车新质生产力丨美格智能亮相2024高通汽车技术与合作峰会

近日&#xff0c;以“我们一起&#xff0c;驭风前行”为主题的2024高通汽车技术与合作峰会在无锡国际会议中心隆重举行。作为高通公司的战略合作伙伴&#xff0c;美格智能受邀全程参与此次汽车技术与合作峰会。在峰会现场&#xff0c;美格智能产品团队隆重展示了多款基于高通平…

【Web API DOM07】事件委托

一&#xff1a;事件委托详解 1 什么是事件委托 利用事件流的特征&#xff08;事件冒泡&#xff09;&#xff0c;解决开发需求的知识技巧 2 事件委托好处 要真正执行任务的元素不注册事件&#xff0c;将对应的事件注册给祖先元素。减少事件的注册次数&#xff0c;提高程序运…

理解JVM内存模型与Java内存模型(JMM)

理解JVM内存模型与Java内存模型&#xff08;JMM&#xff09; 在Java程序的运行过程中&#xff0c;内存管理和线程的同步是两个重要的概念。本文将深入探讨JVM内存模型&#xff08;Java Virtual Machine Memory Model&#xff09;和JMM&#xff08;Java Memory Model&#xff0…

04 uboot 编译与调试

新手不需要详细掌握 uboot,只需要知道它是一个什么东西即可,工作中也只是改一些参数而已。 1、uboot 是什么 Linux 系统要启动就必须需要一个 bootloader 程序,也就说芯片上电以后先运行一段 bootloader 程序。这段 bootloader 程序会先初始化 DDR 等外设,然后将 Linux 内…

【C语言】10.C语言指针(5)

文章目录 1.sizeof和strlen的对比1.1 sizeof1.2 strlen1.3 sizeof 和 strlen的对⽐ 2.数组和指针笔试题解析2.1 ⼀维数组2.2 字符数组2.3 ⼆维数组 3.指针运算笔试题解析3.1 题⽬13.2 题⽬23.3 题⽬33.4 题⽬43.5 题⽬53.6 题⽬63.7 题⽬7 1.sizeof和strlen的对比 1.1 sizeof …

大模型,也在卷价格

“百模大战”已从算力战、规模战蔓延到了价格战。 5月15日&#xff0c;字节跳动宣布豆包主力模型&#xff08;小于等于32K&#xff09;在企业市场的定价只有0.0008元/千Tokens&#xff0c;0.8厘就能处理1500多个汉字&#xff0c;比行业便宜99.3%&#xff1b;5月21日&#xff0…

算法分析与设计期末考试复习(更新ing)

重点内容&#xff1a; 绪论&#xff1a; 简单的递推方程求解 1.19(1)(2) 、 教材例题 多个函数按照阶的大小排序 1.18 分治法&#xff1a; 分治法解决芯片测试问题 计算a^n的复杂度为logn的算法&#xff08;快速幂&#xff09; 分治法解决平面最近点对问…

hot100 -- 二分查找

目录 前言 &#x1f382;搜索插入位置 &#x1f33c;搜索二维矩阵 &#x1f33c;排序数组元素第一和最后一个位置 &#x1f33c;旋转排序数组 &#x1f4aa;旋转排序数组中的最小值 &#x1f4aa;两个正序数组的中位数 前言 二分算法学习_时间超限ac:0%-CSDN博客 &#…

【个人博客搭建】(22)申请QQ开发者

这里我们要引入的一个概念是OAuth - OAuth 2.0是一个行业标准的授权协议&#xff0c;用于处理用户数据访问和分享的安全问题。它允许用户将他们对某些服务的访问权限授权给第三方应用&#xff0c;而无需分享他们的用户名和密码。以下是对OAuth 2.0的介绍&#xff1a; 基本概念 …

Flutter中同步与异步

一&#xff0c;同步/异步的理解 1&#xff0c;await&#xff1a;同步机制 同步操作会阻止其他操作执行&#xff0c;直到完成为止。同步就好比打电话一样&#xff0c;打电话时都是一个人在说另一个人听&#xff0c;一个人在说的时候另一个人等待&#xff0c;等另一个人说完后再…

Python001

Python 是一种高级编程语言。它具有以下显著特点&#xff1a;1. 简单易学&#xff1a;语法相对简洁明了&#xff0c;对初学者很友好。2. 丰富的库&#xff1a;拥有大量强大的内置库和第三方库&#xff0c;可用于各种领域&#xff0c;如数据分析、机器学习、Web 开发等。3. 可读…

基于STM32开发的智能语音控制系统

目录 引言环境准备智能语音控制系统基础代码实现&#xff1a;实现智能语音控制系统 4.1 语音识别模块数据读取4.2 设备控制4.3 实时数据监控与处理4.4 用户界面与反馈显示应用场景&#xff1a;语音控制的家居设备管理问题解决方案与优化收尾与总结 1. 引言 随着人工智能技术…

C51学习归纳7 --- LED点阵显示静态图片和动画

今天学习一个非常常用的功能。外面的流动字母的LED大屏大家应该很常见吧。今天&#xff01;学完这个&#xff0c;你就可以自己设计一个LED大屏了&#xff01; 一、开发板原理图 首先我们看点阵屏幕的输入信号&#xff0c;有P0_X和DP_X控制。P0_X直接就是芯片的P0输出端口&…

vb开源项目推荐:PhotoDemon9.0一键批量去除图片水印

PhotoDemon 9.0作为一款开源免费的照片编辑器&#xff0c;提供了丰富的图片编辑和处理功能&#xff0c;可以通过PhotoDemon的批处理功能结合一些编辑技巧&#xff0c;来实现批量去除图片水印的目的。 以下是一个可能的步骤指南&#xff0c;用于在PhotoDemon 9.0中通过批处理间…

无人机EasyDSS推拉流视频直播技术在农业植保中的精准应用与展望

随着科技的飞速发展&#xff0c;无人机在农业领域的应用越来越广泛&#xff0c;特别是在农业植保方面&#xff0c;无人机以其独特的优势&#xff0c;为农业生产带来了革命性的改变。 无人机在农业植保中的应用主要体现在两个方面&#xff1a;提高工作效率和精准喷洒药物。在以…

SM201,SM203主控模块备件

SM201,SM203主控模块备件。MACSV软件安装&#xff1b;二、软件组成及各部分功能&#xff1b;三、组态流程&#xff1b;四、组态详解SM201,SM203主控模块备件&#xff08;组态各部分的操作过程及基本原理&#xff09;。一、MACSV系统软件安装软件安装——计算机角色在每台计算机…

Unity 之 代码修改材质球贴图

Unity 之 代码修改材质球贴图 代码修改Shader&#xff1a;ShaderGraph&#xff1a;材质球包含属性 代码修改 meshRenderer.material.SetTexture("_Emission", texture);Shader&#xff1a; ShaderGraph&#xff1a; 材质球包含属性 materials[k].HasProperty("…

LlamaIndex三 配置

前言 在上篇LlamIndex二 RAG应用开发 - 掘金 (juejin.cn)中&#xff0c;我们学习到LlamaIndex对RAG的全面支持。这篇文章&#xff0c;我们就来细化这个过程&#xff0c;尝试各种配置选项&#xff0c;满足不同场景需求。学习过后&#xff0c;大家再开发RAG应用&#xff0c;会更…

Vue11-键盘事件

一、键盘事件&#xff1a;keydown和keyup事件 keydown 和 keyup 是两种常用于处理键盘输入事件的JavaScript事件。当你在网页的输入框或其他可输入元素上按下或释放键盘上的某个键时&#xff0c;这些事件就会被触发。 1-1、keydown 事件 当用户按下键盘上的某个键时&#xff…