10 2024 档案
摘要：普通定义ref标签值如下： <el-input ref="name" v-model="xxx" /> 在script中我们通过如下的代码获取到定义的ref标签 const name = ref(); 但是我们如果标签是动态生成的，他的值并不固定，需要通过:ref的方式进行绑定函数的方式，如下： <
阅读全文
摘要：Promise是强大的异步编程工具，它允许我们更好的管理和处理异步操作。这里将探讨Promise中的reject以及如何使用catch来处理异步错误 什么是promise？ promise是一种代表异步操作最终完成或失败的对象。它有三种状态： 1、Pending(进行中):初始状态，既不成功也不失败
阅读全文
摘要：height: 100%; 和 height: 100vh; 是设置元素高度的两种不同方式 height: 100%;： 这个属性会使元素的高度等于其父元素的高度。也就是说，元素的高度将会占据其父元素的百分之百高度。 值为百分比时，实际的高度取决于其父元素的高度。如果父元素没有显式地设置高度，则 h
阅读全文
摘要：// 通过模板路由配置 import { createRouter, createWebHistory } from "vue-router"; // 创建路由器 const routes = [ // 登录路由 { path: "/login", component: () => import("
阅读全文
摘要：属性使用动态值加固定值用 :a="`${变量名}` + '固定值'" 例如： <svg :style="{width,height}"> <!-- 内部需要用use结合使用 --> <use :xlink:href="`${prefix}` + 'mao'" :fill="color"></use>
阅读全文
摘要：axios二次封装有利于减少代码量，更好的管理api ①在src目录下创建api目录。api目录用于存放今后页面不同模块的接口信息。 具体的接口含义如下： ②将来要实现的效果如下： import axiosRequest from "./utils/request/http"; axiosReque
阅读全文
摘要：在开发环境、测试环境、生产环境需要请求不同的接口，对应不同的数据。 因此，配置环境变量也尤为重要 第一：为项目根目录开发、测试、生成（也可以加入预发布）环境创建.env文件 .env.development .env.production .env.test 第二：配置数据 # 变量必须以 VITE
阅读全文
摘要：插槽（slot）可以实现父与子组件间通信，即想让父组件在指定位置插入一些信息。 插槽分为三种：默认插槽、具名插槽、作用域插槽 默认插槽 子组件代码： <h1>我是子组件默认插槽--父组件中子组件标签中的数据会放入slot中</h1> <!-- 默认插槽 --> <slot></slot> 父组件代码
阅读全文
摘要：vue3提供两种方法，分别为（爷爷提供）provide（提供）和（孙子）inject（注入）。 可以实现隔辈传入数据，且孙子组件可以修改爷爷提供的数据。 即如果子组件再调用子组件，那么父组件可以通过provide 和 inject来实现父孙志坚消息通行。 ①实现父子组件调用子组件， 子组件再调用子组
阅读全文
摘要：ref:给子组件的标签绑定ref属性，子节点把对应的数据暴露出来，可以以此修改子组件的值 $parent:子组件通过固定参数，拿到父组件暴露出去定义的方法或者数据，并操作 ref的用法： ①给子组件标签绑定ref <Son ref="son"></Son> ②在子组件中用defineExpose暴露
阅读全文
摘要：事务总线mitt适用于在任意组件间传递信息。 1、需要安装mitt插件 npm i mitt 2、新建一个emitter.ts文件 //导入mitt import mitt from 'mitt' //创建mitt实例 const emitter = mitt() //暴露mitt实例 export
阅读全文
摘要：自定义事件实现通信的逻辑是给子组件的标签上绑定一个自定义事件。 在子组件中写触发事件，传入实参。 在父组件中定义具体事件方法体逻辑。 例如： <!-- 绑定自定义事件xxx，实现子组件给父组件传递数据 --> <Event2 @xxx="handler3"></Event2> 在子组件中使用defi
阅读全文
摘要：props用于父组件向子组件传递数据。 子组件只能读取该值，但是不能修改 父组件代码： 子组件使用defineProps来接收数据
阅读全文
摘要：pinia是vue2中的vuex,状态管理，可以实现数据共享 1、先安装 npm install pinia 2、在main.ts中进行创建和载入 3、在src下新建store文件夹 定义存的文件 4、在组件中使用 此时控制台会有具体的值。 5、修改数据的三种方式 ①直接修改 countStore.
阅读全文
摘要：vue3中路由器的工作模式 主要有两种，history和hash模式 history vue2 -> model:history vue3 -> history:createWebHistory() React:BrowserRouter history具有的优点：URL更加美观，不带有#，更接近传
阅读全文
摘要：hooks实现将一个功能的所有数据、方法、生命周期函数放到一块去使用。 我们在src底下定义个Hooks文件夹，将我们要进行模块化的功能设置为use功能名。 例如：我要将点我加一这个功能进行hooks，则使用useSum.ts这个文件定义功能逻辑。 在这个ts里面需要export default 函
阅读全文
摘要：父组件 <template> <person :list="personList" /> </template> 子组件用defineProps 来接收 const props = defineProps({ list: { type:Array, required:true, }, }); con
阅读全文
摘要：watchEffect和watch的对比 都能监听数据的变化，不同的是监听数据的方式不同。 watch要明确指出要监听的数据 watchEffect不用明确指出要监听的数据，函数中用到哪些属性就监听那些属性。 watchEffect(() => { if (person.age > 22) { co
阅读全文
摘要：使用watch时，如果想监视对象的内部属性值。需要使用watch的第三个参数的配置对象，手动开启深度监视。 //使用watch时如果想监视对象内部的属性值，需要使用watch的第三个参数，手动开启深度监视 watch(person, (newValue, oldValue)=>{ console.l
阅读全文
摘要：watch 监听定义的数据发生改变的时候执行什么函数 watch 方法有两个参数 watch(sum，箭头函数) 这个箭头函数里面有两个参数(newValue,oldValue)=> {},如下代码 <template> <!-- watch；监视数据变化 vue3 可以监视一下四种数据类型： re
阅读全文
摘要：computed 的作用就是监测变量是否发生改变。如果变量发生了改变，那么computed定义的方法就会执行。 在vue3中computed新增get 和set方法。分别对应修改和设置值
阅读全文
摘要：可以看链接 https://blog.csdn.net/weixin_46146718/article/details/139269419
阅读全文
摘要：有两种方式可以搭建： 一：使用vue-cli中的webpack创建 第二：推荐使用vite来创建项目 vite是新一代前端构建工具，新的前端构建工具，比webpack要快一些。 npm create vue@latest 创建完项目后，我们可以看到项目最外层有index.html Vite项目中，i
阅读全文
摘要：当我们要对事件定义类型。一种是通过console.log(e)来看事件的类型。另外一种是@事件名的时候，将$event写好，鼠标放上去看事件类型。再讲$event删除。 如下： 然后我们定义函数的时候就可以指定事件类型了 const clickMi = (e:MouseEvent)=>{ conso
阅读全文
摘要：我们平时的写法 import { ref } from "vue"; const msg = ref("你好世界"); 使用TS的写法 import { ref } from "vue"; const msg = ref<string>("你好世界"); listType表示数组里面放对象，我们可以
阅读全文
摘要：向父元素发送消息 之前的语法： 在TS语法中，我们既要对defineEmits做类型约束，又要对emits做类型约束。 最主要是对defineEmits做一个泛型的约束。 //在泛型对象中，有几个事件就写几个约束 type emitsType = { //()中有n个参数,第一个固定的是e，其他有具
阅读全文
摘要：小知识点：在vscode中定义好子组件的vue视图后。我们可以直接使用<子组件/>来使用子组件，因为我们使用了import插件，他会自动import 所需文件。 使用一：父向子传值，我们之前父向子传值的时候，子组件是如下： defineProps({ house: { type: String, r
阅读全文
摘要：泛型是可以在保证类型安全的前提下，让函数等与多重类型一起工作，从而实现复用。常用于：函数、接口、class中。 泛型在定义的时候并不知道具体是什么类型，只有在调用的时候才知道是什么类型。 如下： /* 需求：定义一个getId方法，传入一个值，返回这个值 */ function getId<T>(v
阅读全文
