随笔分类 - 前端 / Vue学习
摘要：Vue 3 路由组件缓存 Vue3 KeepAlive官方文档 1. keep-alive 基本介绍 keep-alive 是 Vue 的内置组件，用于缓存动态组件或路由组件，避免组件被频繁销毁和重建，从而提高性能。 当组件被 keep-alive 包裹后，在路由切换时不会销毁组件，而是将其缓存起来
阅读全文
摘要：在 Vue 3 中，如果使用动态 ref，可以通过 this.$refs 或 template refs 来获取。因为 ref 是动态的，需要使用对应的键名来访问。 一、示例代码 假设有一个列表，每个列表项都有一个 <el-upload> 组件，并且为每个组件动态设置了 ref： <template
阅读全文
摘要：要在 Vue Router 中实现返回时记住滚动条位置的功能，可以利用 Vue Router 提供的 scrollBehavior 函数。这允许在导航时控制页面的滚动行为，包括返回之前访问的页面时恢复到之前的滚动位置。 实现方法 以下是一个示例，展示如何在 Vue 3 中使用 scrollBehav
阅读全文
摘要：<template> <el-slider ref="sliderRef" class="!w-80%" style="--el-slider-runway-bg-color: red; --el-slider-main-bg-color: green" v-model="speedRange" r
阅读全文
摘要：在 Vue 3 中，要遍历 funConfig 并动态生成组件，可以使用 Vue 的 defineAsyncComponent 来加载异步组件，并结合 v-for 指令在模板中进行渲染。 以下是一个示例代码来实现这个需求： 1. 配置文件 确保配置文件导出的是一个 reactive 对象： impo
阅读全文
摘要：然后改动窗口大小才会正常 在map容器所在的vue页面中，在方法中加入 nextTick(()=>{ let map = L.map(...)； }) nextTick作用是在所有dom元素加载完毕之后才执行 因为这种情况一般是容器dom还没调整到相应大小，地图就已经创建了，所以在加载完毕之后会显示
阅读全文
摘要：<Teleport> 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。 https://cn.vuejs.org/guide/built-ins/teleport.html 为了更加简便灵活，可以将 Vue 3 的 <teleport> 组件类似的功能封
阅读全文
摘要：问题 <template> <my-comp ref="test" /> </template> <script lang="ts" setup> const test = ref() onMounted(() => { console.log(test.value) }) </script> 打印
阅读全文
摘要：在部署 Vue.js 单页面应用（SPA）时，遇到刷新页面时返回 404 错误是一个常见问题。这个问题通常是由于服务器不知道如何处理 SPA 的路由而导致的。 原因 在 Vue.js SPA 中，前端路由由 Vue Router 处理。当你在应用中导航时，Vue Router 可以处理这些路由并加载
阅读全文
摘要：markRaw https://cn.vuejs.org/api/reactivity-advanced.html#markraw 作用: 将一个对象标记为不可以被转化为代理对象。返回该对象本身。 应用场景: 1.有些值不应被设置成响应式时,例如复杂的第三方类库等 2.当渲染具有不可变数据源的大列表
阅读全文
摘要：https://element-plus.org/zh-CN/component/icon.html 静态示例 <el-icon> <Menu/> </el-icon> 动态示例 Menu为图标名称，可替换，注意是字符串 <el-icon> <component :is="Menu" /> </el
阅读全文
摘要：<script setup> import MapTimeLegend from "./components/MapTimeLegend" </script> [plugin:vite:import-analysis] Failed to resolve import "./components/M
阅读全文
摘要：解决方案代码如下： const debounce = (fn, delay) => { let timer = null; return function () { let context = this; let args = arguments; clearTimeout(timer); time
阅读全文
摘要： ### 原因 意思是自定义指令不能放到组件上,而是要放到自有的元素上,也就是这里用到的`v-dialogDrag
阅读全文
摘要：这个警告是由于 Vue 3 中的 Single File Component (SFC) 中的 `>>>` 和 `/deep/` 组合选择器已被废弃，建议使用 `:deep()` 代替。 这是因为 `>>>` 和 `/deep/` 在新的 CSS Shadow Parts API 标准中被弃用，而
阅读全文
摘要：前言 在vue3.0使用element plus的时候发现表格组件内的语言默认为英语，到官网看了一下，发现确实如此，按照官网的方法修改了一下发现有一种是没用效果，下面上有效的方法 ``` ``` 或者 ```js ``` 直接将App.vue修改为以上代码即可实现将语言修改为中文，之所以elemen
阅读全文
摘要：Vue-router路由参数可选，可传可不传  在path中，在可选参数后面加一个` ? `就行了
阅读全文
摘要：Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。 在Vue的整个生命周期中，它提供了一系列的事件，可以让我们注册js方法，可以让我们达到控制整个过
阅读全文
摘要：1.`next()`:进入管道中的下一个钩子。如果全部钩子已经执行完毕，则导航的状态就是confirmed（确认的） 2.`next(false)`：中断当前的导航。如果URL改变了（可能是用户手动输入或者浏览器后退），那么URL地址会重置到from路由对应的地址 3.`next('/')`或者`n
阅读全文
摘要：### 一、起因 打开默认地址 / （http://localhost:5432/），home 页面有空白，因为没有指定默认打开的子页。 ```js // router.js export const constantRoutes = [ { path: '/', component: () =>
阅读全文
