最新
vue3实现锚点跳转与滚动监听
需要实现的效果如下： 左侧分类导航栏：点击左侧分类时，页面会滚动到对应的分类区域，同时更新选中状态（高亮）。 右侧内容区：显示每个分类的具体子类别，右侧内容根据滚动位置动态更新左侧导航的选中状态。 路由更新：地址栏的 query 参数随导航栏选中状态动态更新（如 ?group=image）。 实现步骤 1. HTML 结构 <template> <d
发布于 2024-12-12 下午4:53 阅读数 78
【Vue3】理解vue3的各种ref：toRef、toRefs、isRef、unref、shallowRef、proxyRefs等。
在Vue3中，我们有很多与响应性相关的函数，比如toRef、toRefs、isRef、unref、shallowRef、proxyRefs等。在实际的开发中，合理地使用这些函数能极大地提高我们的开发效率。本文就一起来看看这些响应性相关的函数的详细用法。 ref() 对于ref，大家并不陌生。我们经常在Vue3中使用它。它的功能是接受一个值并返回一个响应性的对象。我们可以
发布于 2024-11-16 下午3:39 阅读数 368
Nuxt 3 多路径访问同一页面的三种方式：重定向、别名与动态路由
今天看到有小伙伴在Nuxt 3文中社区群里问到这个问题，那就顺便写一篇文章来回答，并且重温一下Nuxt3的路由。 Nuxt 3 多路径访问同一页面 在 Nuxt 3 中，如果你想让两个不同的路径访问同一个页面，有以下几种实现方式： 重定向方式：在其中一个路径中使用 navigateTo 方法重定向到目标页面。 路由别名：在 nuxt.config.ts 中配置路由
发布于 2024-11-16 下午3:39 阅读数 492
Vue3中计算属性(Computed)和响应式引用(Ref)的区别
有时候在vue3开发中，有些情况我们不知道是使用Computed还是使用Ref比较好，虽然两者都能实现功能。本文我们来探讨一下两者的差异。 计算属性（Computed）是一种基于响应式依赖关系进行缓存运算的属性。当它的依赖关系发生改变时，它就会重新求值。并且只有在它的相关依赖项发生改变时才会重新计算，否则，它会立即返回之前的计算结果，
发布于 2024-9-9 下午5:3 阅读数 961
vue3将一个全局脚本添加在index.html中，在vue3页面中直接使用
如果你想将一段js脚本代码写入 Vue 项目的index.html文件中，并在 Vue 页面中使用，你需要将该脚本写入 <script> 标签内，同时，将结果放在全局对象上，例如 window 对象，因为 index.html 中的全局脚本和 Vue 组件文件的模块作用域是隔离的。 举个例子： 下面是一段随机生成二级域名的代码,先随机取出一个主域名，然后再根据
发布于 2024-5-7 下午2:30 阅读数 1241
vue3+axios+useAxios多接口域名检测和加解密(AES)网络请求封装
需要实现的功能 vue3+axios+useAxios网络请求封装 主域名返回多个接口域名，循环检测接口域名，状态码为200，即该域名可以用 解密后端返回的加密的数据 实现代码 简单的vue3+axios+useAxios网络请求封装 //useAxiosApi.ts import { useAxios } from '@vueuse/integrations/useAxios' // 导入VueUse库中的useAxios函数 import a
发布于 2024-4-19 下午10:42 阅读数 1306
用nuxt3官方提供的nuxt-icon插件来引入iconify的海量图标
旧的引用方式 这里我们不用ant蚂蚁框架的图标，我们从iconify从导入图标。 iconify图标是一种矢量图标格式，它可以以小尺寸的形式显示在各种设备上，如移动设备、桌面应用程序和网页。iconify图标可以缩放到任何尺寸而不失真，并且可以通过CSS或JavaScript进行动态更改。Iconify图标还支持多种颜色和主题，使其适合各种不同的设计需
发布于 2024-4-14 下午10:0 阅读数 1727
vue3 + Nuxt3 使用AutoAnimate可以快速添加动画
AutoAnimate是什么？ 这是FormKit提供的一个动画库。只要安装了这个库，你就可以非常轻松地使用它。虽然这个库支持Vue、React、Preact、Solid、Svelta、Angular和NativeJS，但在本文中，我将介绍如何在Vue中使用它。 官方文档： https://auto-animate.formkit.com/ 设置 首先进行安装 npm install @formkit/auto-animate 接着，在nuxt.con
发布于 2024-3-17 下午9:30 阅读数 1873
antdv上传图片前压缩图片
在使用 Ant Design 的上传组件时，如果需要在上传前对图片进行压缩，可以使用一些 JavaScript 库来实现。一个常用的库是 compressorjs，它可以在客户端对图片进行压缩。 以下是一个简单的使用示例： 首先，确保你的项目中已经安装了 compressorjs 库。你可以通过 npm 安装： yarn add compressorjs 然后，使用以下代码示例在上传前压
发布于 2023-12-9 下午3:31 阅读数 1730
vue3添加百度统计的几种方式
申请百度统计后，会得到一段JS代码，需要插入到每个网页中去，下面有几种方式。 把统计代码插入到index.html入口文件中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial
发布于 2023-11-7 下午2:11 阅读数 3955
vue3 使用window.scrollTop回到页面顶部
如果你想在当前页面切换tab时将页面滚动到顶部，你可以使用window.scrollTo方法来实现。以下是一个示例代码： import { ref, watchEffect } from 'vue'; export default { setup() { const tab = ref(1); // 当前选中的tab，默认为1 watchEffect(() => { // 监听tab的变化 if (tab.value === 2) { // 如果切换到tab 2，将页面
发布于 2023-10-30 上午11:57 阅读数 6760
vue3路由跳转传多个参数
在Vue 3中，你可以使用对象的方式传递多个参数给router.push()方法。以下是一个示例代码： import { useRoute, useRouter } from 'vue-router'; export default { setup() { const route = useRoute(); const router = useRouter(); const changeParams = () => { // 获取当前路径的参数 const id = route.query.id; const
发布于 2023-10-30 上午11:45 阅读数 5641
vue3使用js-cookie，设置过期时间为分钟
在Vue 3中使用Cookie的过程类似于在Vue 2中使用。你可以使用第三方库来管理Cookie，例如js-cookie。以下是在Vue 3中使用js-cookie的简单步骤： 用法 安装js-cookie库： 在你的Vue 3项目中，可以使用npm或yarn来安装js-cookie： 使用npm： npm install js-cookie 使用yarn： yarn add js-cookie 导入并使用js-cookie： 在你的Vue组件中
发布于 2023-9-3 下午1:42 阅读数 15548
Vue3实现双色球开奖走势图并连线
效果 我们先来看一下要实现的效果： 原理 渲染页面的时候把需要连线的点加上“标记”类名，然后再把这些带有标记的元素用线段连接起来。 数据 const data = ref([ { p: '2023-01', list: [ { num: 10, active: 0 }, { num: 2, active: 0 }, { num: 14, active: 1 }, { num: 33, active: 0 }, { num: 11, active: 0 }, { num: 14,
发布于 2023-8-5 中午12:32 阅读数 9991
