93浏览

0评论

element-ui tree 异步树实现勾选自动展开、指定展开、指定勾选功能

目录背景1.监听复选框点击事件check2.手动展开，使用node.expand()方法项目中的实现一、复选框勾选后能自动展开并选中，先展开再勾选也可以自动展开二、 展开指定结点三. 勾选...

• 2022-12-31

76浏览

0评论

Vue组件的继承用法示例详解

目录Vue组件的继承用法Vue组件的继承用法vue组件的继承适用于UI几乎一样，只是数据不一样的情况下，但是这种情况通过统一封装组件也是能实现的，小功能建议用封装，大功能建议用组...

• 2022-12-31

68浏览

0评论

Vue实现自定义字段导出EXCEL的示例代码

目录导入依赖导入EXCEL导出工具类在main.js中引入按钮样式 DatastaticData.js 选择列 按钮点击事件弹出框 方法导入依赖"element-ui": "2.13.0","file-saver": "^2.0.5","xl...

• 2022-12-31

46浏览

0评论

vue网站优化实战之秒开网页

目录【vue网站优化】网页渲染速度快到极致在路由配置文件中，采用路由懒加载关闭webpack的productionSourceMap选项使用uglifyjs-webpack-plugin来压缩js文件使用cdn加速用来...

• 2022-12-31

75浏览

0评论

Vue中实现过渡动画效果实例详解

目录Vue的transition动画Transition动画的使用Transition组件的原理Transition动画的classVue的animation动画Animation动画的使用过渡的模式mode列表过渡列表过渡的介绍列...

• 2022-12-31

137浏览

0评论

vue-print-nb实现页面打印功能实例(含分页打印)

目录安装引用API示例代码补充：vue-print-nb插件的一些优化总结Web 实现页面打印安装官网地址：https://github.com/Power-kxLee/vue3-print-nb// 安装 打印组件npm install vue...

• 2022-12-31

173浏览

0评论

el-table渲染慢卡顿问题最优解决方案

1.如下图，需要绑定两个id，第一个id是需要浮动的元素，加上scroll方法监听滑块变化，第二个id是其子元素。2.给eagleMapContainer设置overflow属性和滑块样式，CSS参考如下#eagleMapC...

• 2022-12-31

115浏览

0评论

element tree懒加载:load="loadNode"只触发一次的解决方案

当tree 懒加载获取 信息时,只有在第一次 加载时,触发 :load=“loadNode” ,但是这样明显是不合理的,因为当增删改查,后端数据已经改变,但是咱们的:load=“lo...

• 2022-12-31

84浏览

0评论

vue3中h函数的常用使用方式汇总

目录前言renderVNodeh渲染组件h函数中使用"v-model"使用场景总结前言一般情况下每个vue组件都用"<template>"写html, 但实际还可以在js代码中通过render函数生成dom. 最主要...

• 2022-12-31

101浏览

0评论

解决el-tree数据回显时子节点部分选中父节点都全选中的坑

el-tree 在编辑中回显数据时，有一个bug，就是只要我们回显的数据中有父节点的 id，不管当前父节点下的子节点是部分选中还是全选中，回显的效果是该父子节点下的子节点都会全选中，这...

• 2022-12-31

195浏览

0评论

element-plus 在vue3 中不生效的原因解决方法(element-plus引入)

目录1.安装element-plus （3种方式 ）2. 在main.js种引用原因一原因二vue3.0 不兼容 element-ui ，于是推出了element-plus1.安装element-plus （3种方式 ）npm install element-plus...

• 2022-12-31

63浏览

0评论

Vue状态管理库Pinia详细介绍

目录什么是 Pinia如何使用 Pinia认识 Store定义一个store使用 store操作 StateGetters1. 认识和定义 Getters2. 访问 Getters认识和定义 Action什么是 PiniaPinia (西班牙语...

• 2022-12-31

81浏览

0评论

vue3 setup中父组件通过Ref调用子组件的方法(实例代码)

目录在setup()钩子函数中调用在<srcipt setup>中调用在setup()钩子函数中调用父组件<template> <div> 我是父组件 <children ref="childrenRef" /> <b...

• 2022-12-31

88浏览

0评论

vue使用csp的简单示例

在 VUE 中 {{{data}}} 和 v-html 属性会把内容解析成 html，可能会造成 xss 漏洞；以及 当使用 SSR（ Server Side Rendering（服务端渲染））， SSR 的时候忘记了转义和过滤而导致 XSS；vue...

• 2022-12-31

109浏览

0评论

vue+elementUI实现多文件上传与预览功能实战记录(word/PDF/图片/docx/doc/xlxs/txt)

目录需求实现需求1、利用on-preview+window.open()实现简易版预览效果2、封装组件实现更完整的上传完成、预览功能追加关于问的比较多的问题回复1、imgsrc路径2、显示原本el...

• 2022-12-31

93浏览

0评论

将VUE项目部署到服务器的详细步骤

目录一、idea中vue项目的打包1、设置打包后项目的名称2、将项目打包3、生成的包内的文件如下：二、部署到服务器1、找到Nginx的安装位置2、 将打包后的vue项目文件放在html文...

• 2022-12-31

107浏览

0评论

vue前端框架vueuse的useScroll函数使用源码分析

目录引言1.示例2.源码解析2.1 参数解析2.2 响应式状态定义2.3 onScrollEnd滚动结束回调2.4 onScrollHandler滚动处理2.5 使用 useEventListener监听滚动事件2.6 返回值3.总...

• 2022-12-31

72浏览

0评论

Vue生命周期深入分析总结

目录一、生命周期图二、生命周期三个组成部分第一节-初始化beforeCreatecreatedbeforeMountmounted第二节-更新状态beforeUpdateupdated第三节-销毁实例beforeDestroydestro...

• 2022-12-31

84浏览

0评论

Vue 和 Django 实现 Token 身份验证的流程

目录基于 Token 的验证流程Token 的组成HeaderPayloadSignature加密算法Django 生成和验证 Token处理 Token登录成功批发 Token中间件拦截验证 (Middleware)Vue 存储和携带...

• 2022-12-31

54浏览

0评论

vue双向数据绑定指令v-model的用法

目录基本使用响应式v-model数据双向绑定步骤响应式v-model简易实现原理v-model，被称为双向数据绑定指令，就是Vue实例对数据进行修改，页面会立即感知，相反页面对数据进行修改，Vue...

• 2022-12-31

72浏览

0评论

关于Vue-extend和VueComponent问题小结

在一个非单文件组件中(一个文件中包含n个组件，最常见的就是单个html文件中存在多个组件)，如果我们需要在这个文件中创建n个组件，然后再页面上展示，这时候我们就需要先定义组件，然...

• 2022-12-31

63浏览

0评论

手写实现Vue计算属性

目录前言初始化计算属性依赖属性更新总结前言官网对计算属性的介绍在这里：传送门计算属性是Vue中很常用的一个配置项，我们先用一个简单的例子来讲解它的功能：<div id="app"> {...

• 2022-12-31

349浏览

0评论

electron vue 模仿qq登录界面功能实现

目录1、使用vuecli创建vue项目2、安装electron3、vue项目安装Electron-builder打包工具4、在vue项目的src下有个background.js文件5、安装remote模块6、代码7、效果图1、使...

QQ
• 2022-12-31

97浏览

0评论

element ui时间日期选择器el-date-picker报错Prop being mutated:"placement"解决方式

目录发现错误解决补充：el-date-picker 初始化报错总结发现错误这两天在写新项目的时候，遇到了element ui 时间日期选择器一直报错[Vue warn]: Avoid mutating a prop directly...

• 2022-12-31

78浏览

0评论

Vue3 中的插件和配置推荐大全

目录1. Vite2. 自动导入常见方法2.1 传统写法2.2 自动导入3. 组件去后缀4. name 属性问题小伙伴们知道 TienChin 项目前端用的是 Vue3，当我们把 Vue3 官网刷了一遍之后回来看...

• 2022-12-31

51浏览

0评论

Vue环境搭建报错整理大全

目录错1: 执行 cnpm install / npm install 报错如下办法1：降低node.js版本办法2：降低版本依旧报错，执行相关命令报错2:core-js 缺失问题报错3: Connection was aborted, errno...

• 2022-12-31

316浏览

0评论

vue中关于redirect(重定向)初学者的坑

目录关于redirect(重定向)初学者的坑vue-router路由重定向redirect的使用事项关于redirect(重定向)初学者的坑第一个对象里是配置路由重定向path:&rsquo;/&#39;为项目的根目...

• 2022-12-31

79浏览

0评论

vue引入elementUi后打开页面报错Uncaught TypeError的解决方式

vue引入elementUi后打开页面报错本人在用idea创建vue项目并引入elemenUi之后网页报错：
Uncaught TypeError: Cannot read properties of undefined(reading &lsquo;prototype...

• 2022-12-31

37浏览

0评论

vue navbar tabbar导航条根据位置移动实现定位、颜色过渡动画效果的代码

vant文档：Vant 2 - Mobile UI Components built on Vue实现效果： 代码实现：1.navbar、tabbar顶部导航过渡效果、颜色过渡；<div class="mallHead"> <van-nav-bar :title="...

• 2022-12-31

64浏览

0评论

vue常用事件v-on:click详解事件对象,事件冒泡,事件默认行为

目录1.监听事件2.事件处理方法3.带参数的时间绑定方法：4.内联处理器中的方法5.事件对象6.事件冒泡7.阻止默认行为：8.其他事件修饰符补充：原生JS阻止冒泡其实v-on后面跟的不止是...

• 2022-12-31

74浏览

0评论

vue项目兼容ie11的实现方法

目录前情提要经过(一)经过(二)经过(三)经过(四)最后附加总结前情提要事情的起因是项目在设计之初要求兼容IE11，也在开发之初对此做了处理，但在经过两年的多的迭代后，经过大几十...

• 2022-12-31

57浏览

0评论

vue3 获取元素高度不准的问题

目录vue3 获取元素高度不准页面获取元素高度和$el问题vue3 获取元素高度不准html：<transition name="slide-width">    <a-col class="fixed-small" v-show="isShow" :styl...

• 2022-12-31

65浏览

0评论

elementui中树形表格切换展开不同层级的示例代码

效果： 代码（复制粘贴即可）：<template> <div class="myDiv"> <el-row style="margin:10px 0"> <el-col :span="22"> <el-button type="pri...

• 2022-12-31

150浏览

0评论

vue源码解读子节点优化更新

目录前言优化前存在的问题优化策略分析源码解析小结前言Vue中更新节点，当新 VNode 和旧 VNode 都是元素节点且都有子节点时，Vue会循环对比新旧 VNode 的子节点数组，然后根据不...

• 2022-12-31

67浏览

0评论

一文详解Vue的响应式原则与双向数据绑定

目录反应性原则双向数据绑定v-model实践反应性原则它是 Vue.js 的核心特性之一，一个数据驱动的视图，我们修改数据视图来响应更新，非常优雅。Vue2.x 使用 Object.defineProperty...

• 2022-12-31

74浏览

0评论

element el-tree折叠收缩的实现示例

原理：通过el-tree 的 elTree.store.nodesMap获取所有树节点，设置所有节点的 expanded 属性，使用该方法时特别注意el-tree必须设置node-key="id",作为每个树节点唯一标志，否则使...

• 2022-12-31

62浏览

0评论

vue日常开发基础Axios网络库封装

目录引言axios使用配置请求基本信息设置请求拦截器设置请求响应器项目中使用结尾引言首先Axios，一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。网络请求库无疑是...

• 2022-12-31

64浏览

0评论

vue3 使用setup语法糖实现分类管理功能

目录setup语法糖简介setup语法糖中新增的api模块简介分类模块路由分类列表组件获取分类列表数据分类表单组件setup语法糖简介直接在 script 标签中添加 setup 属性就可以直...

• 2022-12-31

63浏览

0评论

vue和react中关于插槽详解

目录简述Slot基本插槽vue基本插槽react基本插槽具名插槽vue具名插槽react具名插槽的讨论模仿具名插槽属性插槽插槽传参vue插槽传参react：render-props简述Slotslot插槽是Vue...

• 2022-12-31

70浏览

0评论

Vue3 源码解读静态提升详解

目录什么是静态提升transform 转换器hoistStatic 静态提升walk 函数walk 函数流程图总结什么是静态提升静态提升是Vue3编译优化中的其中一个优化点。所谓的静态提升，就是指在...

• 2022-12-31

76浏览

0评论

Vue3中使用pnpm搭建monorepo开发环境

目录前言Pnpm 和 Monorepo搭建开发环境创建项目配置 monorepo安装依赖初始化Typescript准备两个模块sharedreactivity编写构建脚本完成第一次调试小结前言Vue3 源码阅读系列...

• 2022-12-31

62浏览

0评论

教你在vue 中使用 svg symbols

目录安装svg-sprite-loader插件在vue.config.js中配置 svg-sprite-loader封装IconSvg.vue通用组件加载所有的svg静态资源，并且把IconSvg注册到全局组件当中使用安装svg-sprit...

• 2022-12-31

44浏览

0评论

vue2中组件互相调用实例methods中的方法实现详解

目录前言：开始前：使用第一步、定义全局mixin第二步添加代码提示d.ts声明文件在项目下新建jsconfig.json添加shims-vue.d.ts声明文件添加event-keys.d.ts声明文件第三步编写web...

• 2022-12-31

69浏览

0评论

Vue手机号正则匹配姓名加密展示功能的实现

目录一丶手机号二丶姓名一丶手机号（1）正则匹配if (!/^1[3|4|5|6|7|8|9]\d{9}$/.test(13807999985)) { console.log(resultPhone);//138****9985（2）substr截取 var phone =...

• 2022-12-31

52浏览

0评论

el-tree的实现叶子节点单选的示例代码

目录1、首先查看官网2、熟悉基本的代码2.1、参数说明：defaultProps2.2、对应的数据结构2.3、为什么要使用disabled属性呢？3、添加check事件，实现单选。完整源码效果要求：火车的...

• 2022-12-31

65浏览

0评论

老生常谈vue3组件通信方式

目录vue3七种组件通信方式1. Props方式2. emit方式3. v-model方式4、Refs5. provide/inject6. eventBus7. vuex/piniavue3七种组件通信方式面试题经常会问到vue3组件间的通...

• 2022-12-31

72浏览

0评论

使用VitePress搭建及部署vue组件库文档的示例详解

目录安装vitepress目录结构文档首页配置导航栏配置侧边栏部署到GitHub Pages每个组件库都有它们自己的文档。所以当我们开发完成我们自己的组件库必须也需要一个组件库文档...

• 2022-12-31

123浏览

0评论

Vue项目获取url中的参数(亲测可用)

目录情况一：内部页面之间互相传值情况二：外部跳转VUE项目时自带参数1 获取?后面的参数2 获取不带?的URL中的参数亲测可用，若有疑问请私信获取url参数有两种情况：情况一：内部页面...

• 2022-12-31

58浏览

0评论

Vue3 源码解读之 Teleport 组件使用示例

目录Teleport 组件解决的问题Teleport 组件的基本结构Teleport 组件 process 函数Teleport 组件的挂载Teleport 组件的更新moveTeleport 移动Teleport 组件hydrateTeleport...

• 2022-12-31

90浏览

0评论

vue3 elmentPlus table实现列宽可拖拽功能

el-table 里边的border属性，设置之后表格即可直接拖拽，下文内容是相关扩展功能的实现最近公司项目里边需求要让表格的宽度可拖动，我们的公司的项目有vue2的也有vue3的，表格分别...

• 2022-12-31