vue
关注
分享
扫一扫
文章平均质量分 60
duansamve
我的Web前端(React、Vue)、NodeJS......开发笔记
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
破解 Vue3.x 新特性
一、refref() 函数用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个对象，这个对象上只包含一个 .value 属性：基本语法：import { ref } from 'vue'// 创建响应式数据对象 count，初始值为 0const count = ref(0)// 如果要访问 ref() 创建出来的响应式数据对象的值，必须通过 .value 属性才可以console.log(count.value) // 输出 0// 让 count.原创 2021-10-27 11:15:52 · 430 阅读 · 0 评论
-
手动封装Vue组件并发布到NPM
1、首先用vue-cli4.5新建一个简易版本的Vue项目，方法如下:创建一个项目 | Vue CLI目录结构如下：v src-v util--v plugins---v perms---- codes.js---- index.js---- index.vuepackage.json2、新建line-chart文件夹，新开发的自定义组件放在此文件夹下，其中：index.vue：为组件开发文件，需要注意是组件必须声明name，因为name是该组件标签，打包发布到npm后其原创 2020-06-30 23:08:16 · 807 阅读 · 0 评论 -
Vue性能优化方法与技巧大全
一、常用指令：v-if：v-show：v-for：v-bind：v-on：v-is：二、方法、计算属性、侦听器：三、Class和Style绑定：四、事件处理；五、表单输入绑定：六、组件：1、如何定义一个组件；2、父->子通信、子->父通信；3、组件分类：普通组件、动态组件、异步组件；4、slot：...原创 2020-05-17 14:14:09 · 626 阅读 · 0 评论 -
解析Vue2 Diff 算法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="https://cdn.bootcss.com/bootstr原创 2018-08-15 23:17:47 · 1377 阅读 · 0 评论 -
vue-router实现原理
路由router\index.js配置：import Vue from 'vue'import Router from 'vue-router'const Home = () => import('@/components/HelloWorld')const Badge = () => import('@/components/Badge')const Progress ...原创 2019-09-26 10:04:29 · 2043 阅读 · 0 评论 -
Vue2中将多个异步请求的数据传递给子组件性能最优的方式
并行请求：两个异步请求同时发起（而非串行），减少总等待时间（关键优化点，串行总耗时 = 两个请求耗时之和，并行≈最长单个请求耗时）；条件渲染：只有当两个数据都获取成功后，才渲染子组件（避免子组件接收不完整数据，减少无效渲染和错误处理）。一、最优方案：并行请求 + Promise.all + 单次 Props 传递（性能最好）数据聚合：用 Promise.all 监听两个请求完成，统一聚合结果后存入一个响应式数据；原创 2025-11-19 22:08:16 · 251 阅读 · 0 评论 -
前端性能检测及优化
前端性能衡量是优化用户体验和提升应用效率的关键环节，主要从多个维度进行评估，包括加载性能、运行时性能、交互响应性、网络与资源使用等。原创 2025-10-24 09:23:58 · 734 阅读 · 0 评论 -
React-router和Vue-router底层实现原理
向浏览器历史记录栈中添加一条新记录。不会触发页面刷新或跳转。url是可选的，可以是相对路径或绝对路径（但必须同源）。替换当前历史记录，而不是新增。用途：比如更新当前页面的状态但不新增历史记录。window.onpopstate事件当用户点击浏览器的前进/后退按钮时触发。可以通过 event.state获取之前通过 pushState/replaceState 设置的状态。原创 2025-09-20 15:55:11 · 500 阅读 · 0 评论 -
Vue3和vue2的Diff算法有何差异？
Vue2 和 Vue3 的 DIFF 算法本质都是 “同层对比”，但对比的精细度和跳过无效对比的能力完全不同。Vue3 的 DIFF 算法通过引入 “静态标记” 和 “最长递增子序列”，在性能上比 Vue2 有显著提升，尤其是在处理长列表和复杂 DOM 结构时。原创 2025-10-20 22:13:52 · 410 阅读 · 0 评论 -
Vue-Router4使用详解（结合Vue3）
你也可以通过 <router-link :to="{ name: 'User', params: { id: 123 }}">用户123</router-link>这样的方式跳转。这样，Home.vue和 About.vue不会在初始加载时都打包进来，而是在用户访问对应路由时才加载，有助于提升首屏速度。除了使用 <router-link>，你还可以通过代码进行导航，称为编程式导航。为了优化性能，推荐对路由组件进行懒加载，即用到时才加载对应的组件。原创 2025-10-19 22:04:52 · 858 阅读 · 0 评论 -
TS在Vue3中的使用实例集合
钩子函数的参数类型（如 onMounted 无参数，onBeforeUpdate 接收 DOM 快照）会自动提示。ref：通过泛型指定类型（复杂类型推荐显式声明）。计算属性的返回值类型会自动推断，也可显式指定。reactive：通过接口定义对象结构。原创 2025-10-17 22:25:42 · 277 阅读 · 0 评论 -
Vue3-Devtools开发者工具制作与安装
在进入到下载首页后，我们会看到这样一个页面：我们依次点击如下内容选择需要下载的版本：点击下载：在下载完后我们将压缩包进行解压会得到这样一个文件目录：CMD命令下进入此目录。由于 electron的 postinstall 脚本默认是从 GitHub 或国外服务器下载二进制文件，在国内可能会非常慢或失败。🔧 这是 淘宝 npm 镜像 提供的 Electron 二进制镜像，速度会比较快。原创 2025-10-18 22:07:59 · 422 阅读 · 0 评论 -
Vue3与Vue2中使用对比
v-on 修饰符：.stop、.prevent、.self、.once、.passive 等；v-model 修饰符：.lazy、.number、.trim 等；用法与行为在 Vue 2 和 Vue 3 中完全一致。原创 2025-10-18 16:29:16 · 814 阅读 · 0 评论 -
Vue3系列：9、深入学习
4、避免对 reactive对象进行解构或展开操作，除非使用 toRefs。5、在 TypeScript 中，ref对类型推断有时更清晰，特别是基本类型。2、在组合多个响应式数据时，可使用 toRefs配合 reactive。3、在返回给模板或 composable 函数时，ref更灵活。1、基本类型用 ref，复杂对象可以考虑 reactive。定义一个对象或数组，并对其属性进行频繁修改。需要对返回的对象属性进行解构且保持响应性。在组合式函数中返回多个响应式值。原创 2025-10-16 09:40:00 · 448 阅读 · 0 评论 -
Vue2中使用DHTMLX Gantt
在 Vue 2 项目中集成 DHTMLX Gantt 甘特图组件，可通过以下步骤实现。原创 2025-06-30 14:04:41 · 1250 阅读 · 0 评论 -
Web端实时播放RTSP视频流（监控）
2、点击Windows图标，选第一个：Windows builds from gyan.dev3、跳转到下载页面：4、下载后放到合适的位置，不用安装，解压即可：5、配置path复制解压后的\bin路径，配置环境变量如图：命令行输入：ffmpeg -version出现如下信息则说明配置成功。原创 2025-01-15 11:46:23 · 1285 阅读 · 0 评论 -
若依前后端分离版（Vue3）在新标签页打开页面
基于RuoYi-Vue3前后端分离框架。原创 2025-01-02 09:45:05 · 1562 阅读 · 0 评论 -
如何快速搭建若依管理系统？
6、IntelliJ IDEA通过Maven下载开发依赖；原创 2024-12-15 22:14:44 · 602 阅读 · 0 评论 -
el-table动态新增/删除表单行及校验规则
点击新增，table新增一行，点击删除，删除所在行。若验证不通过，点击“确定”，提示如下图。原创 2024-10-20 21:48:11 · 581 阅读 · 0 评论 -
Vue3在大数据场景下原生实现单元格合并，让Thead固定让Tbody滚动
【代码】Vue3在大数据场景下原生实现单元格合并，让Thead固定让Tbody滚动。原创 2024-10-20 10:28:01 · 458 阅读 · 0 评论 -
LogicFlow工作流在React和Vue3中的使用
LogicFlow 是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和简单灵活的节点自定义、插件等拓展机制，方便我们快速在业务系统内满足类流程图的需求。原创 2024-08-12 10:26:37 · 2405 阅读 · 2 评论 -
React/Vue项目解决跨域的方法
CORS是浏览器的一种机制，当发起跨域请求时，服务器可以返回一个特殊的响应头Access-Control-Allow-Origin来授权给定源访问该资源。只需要在服务器端设置响应头即可实现CORS。通过在请求中添加一个回调函数的参数，服务器返回的数据会包裹在该回调函数中，实现跨域获取数据。在上述示例中，将以/api开头的请求转发到http://api.example.com，并将请求路径中的/api部分去除。在上述示例中，将以/api开头的请求转发到http://api.example.com。原创 2024-07-22 22:06:07 · 859 阅读 · 0 评论 -
vue3使用方式汇总
iconfont阿里：https://www.iconfont.cn/在main.js中导入。原创 2024-07-07 17:00:57 · 327 阅读 · 0 评论 -
vue-router 4获取当前路由及路由传参
传递参数：src/components/Today.vue。接收参数：/src/components/Map.vue。路由配置：/src/router/index.ts。原创 2024-07-05 22:43:31 · 606 阅读 · 0 评论 -
前端文件预览汇总
vue-office支持多种文件(docx、excel、pdf)预览的vue组件库，支持vue2/3，也支持非Vue框架的预览。原创 2024-07-04 11:17:40 · 808 阅读 · 0 评论 -
element-plus 2.7.6相关使用方式
【代码】element-plus 2.7.6相关使用方式。原创 2024-07-01 11:03:51 · 549 阅读 · 0 评论 -
解决vue3中父组件使用ref 获取不到子组件属性问题+子组件触发父组件中方法的方式
父子组件使用语法糖，父组件通过给子组件定义ref访问其内部事件。原创 2024-06-24 22:47:55 · 2378 阅读 · 0 评论 -
Vue3系列：8、Vue3新组件
/原创 2024-05-25 22:15:15 · 372 阅读 · 0 评论 -
Vue3系列：7、其它 API
通过使用 shallowRef()和 shallowReactive()来绕开深度响应。浅层式API创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理，避免了对每一个内部属性做响应式所带来的性能成本，这使得属性的访问变得更快，可提升性能。原创 2024-05-25 22:13:52 · 463 阅读 · 0 评论 -
Vue3系列：6、组件通信
子 => 父。注意区分好：原生事件、自定义事件。原生事件：事件名是特定的（clickmosueenter等等）事件对象$event: 是包含事件相关信息的对象（pageXpageYtargetkeyCode自定义事件：事件名是任意名称事件对象$event: 是调用emit时所提供的数据，可以是任意类型！！！--在父组件中，给子组件绑定自定义事件：--> < Child @send-toy = " toy = $event " />原创 2024-05-25 22:12:18 · 419 阅读 · 0 评论 -
Vue3系列：5、pinia
第二步：操作此时开发者工具中已经有了pinia选项。原创 2024-05-25 22:10:54 · 326 阅读 · 0 评论 -
Vue3系列：4、路由
缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有。通过点击导航，视觉效果上“消失” 了的路由组件，默认是被。作用：让路由组件更方便的收到参数（可以将路由参数作为。优点：兼容性更好，因为不需要服务器端处理路径。作用：控制路由跳转时操作浏览器历史记录的模式。作用：可以简化路由跳转及传参（后面就讲）。作用：将特定的路径，重新定向到已有路由。浏览器的历史记录有两种写入方式：分别为。参数时，需要提前在规则中占位。文件夹，一般组件通常存放在。掉的，需要的时候再去。的对象写法，必须使用。原创 2024-05-25 22:09:21 · 474 阅读 · 0 评论 -
Vue3系列：3、Vue3核心语法
Vue3核心语法原创 2024-05-25 22:07:33 · 520 阅读 · 0 评论 -
Vue3系列：2、创建Vue3工程
点击查看备注：目前vue-cli已处于维护模式，官方推荐基于Vite创建项目。原创 2024-05-25 22:03:49 · 349 阅读 · 0 评论 -
Vue3系列：1、Vue3简介
2020年9月18日，Vue.js发布版3.0One Piece（n3.3.4。原创 2024-05-25 22:02:27 · 319 阅读 · 0 评论 -
vue中使用xlsx插件导出多sheet excel实现方法
【代码】vue中使用xlsx插件导出多sheet excel实现方法。原创 2023-10-26 21:45:34 · 1750 阅读 · 0 评论 -
企业微信应用开发实践
使用企业微信开放接口和工具资源，为企业提供丰富的应用服务。原创 2022-11-25 22:34:55 · 3490 阅读 · 0 评论 -
Electron集成React和Vue
Electron集成React或者Vue的方式很多，这是灵活性比较大的一种原创 2022-08-23 09:55:29 · 1043 阅读 · 0 评论 -
vue-cli3.0如何在打包时设置静态资源目录？
vue-cli3.0如何在打包时设置静态资源目录？原创 2022-06-18 23:26:43 · 2484 阅读 · 0 评论 -
常用第三方Vue/NodeJS组件、工具
1、vue-treeselect：vue-treeselect 是一个多选组件，具有对 Vue.js嵌套选项支持。支持嵌套选项的单选和多选 模糊匹配 异步搜索 延迟加载（仅在需要时加载深度选项的数据） 键盘支持（使用Arrow Up & Arrow Down键导航，使用键选择选项Enter等） 丰富的选项和高度可定制的 支持 多种浏览器需要Vue 2.2+官网：Vue-Treeselect | Vue-Treeselect 中文网............原创 2022-04-29 13:48:31 · 1394 阅读 · 0 评论