115浏览

0评论

React commit源码分析详解

目录总览commitBeforeMutationEffectscommitMutationEffects插入 dom 节点获取父节点及插入位置判断当前节点是否为单节点在对应位置插入节点更新 dom 节点更新 HostCompone...

• 2023-01-05

104浏览

0评论

React可定制黑暗模式切换开关组件

目录正文如何使用它。1.安装和下载2.导入DarkModeToggle组件3.将黑暗模式切换添加到应用程序中4.默认的组件道具预览正文一个用于React的可定制的黑暗模式切换开关组件。如...

• 2023-01-05

337浏览

0评论

React Hook中的useState函数的详细解析

useState => 让函数组件具有维持状态的能力
useState 这个 Hook 是用来管理 state 的，它可以让函数组件具有维持状态的能力。即在一个函数组件的多次渲染之间，这个 state 是共...

• 2023-01-05

113浏览

0评论

React动画实现方案Framer Motion让页面自己动起来

目录前言效果体验快速开始安装输入使用方式示例节点的挂载与卸载(mount、unmount)列表更多API美中不足前言相信很多前端同学都或多或少和动画打过交道。有的时候是产品想要...

• 2023-01-05

101浏览

0评论

React中的路由嵌套和手动实现路由跳转的方式详解

目录React的路由嵌套手动路由的跳转React的路由嵌套接上一篇文章, 在上一篇文章中讲解了路由的基本介绍, 我再来介绍一下路由的其他用法在开发中，路由之间是存在嵌套关系的。...

• 2023-01-05

130浏览

0评论

el-form错误提示信息手动添加和取消的示例代码

目录需求方案最新想到的方案 推荐运行效果：实现代码需求对表单填写字段进行标记有误和取消标记有误方案最新想到的方案 推荐定义一个存放错误信息的对象，然后再自定义一个验证...

• 2022-12-31

265浏览

0评论

el-table 行合并的实现示例

目录示例一：单个表格示例二：循环表格页面实现行合并的情况还是比较常见的，但实现起来却有一点点难。官网的例子有，不过人家的合并逻辑是从第一行开始两行两行合并，不能根据数据动...

• 2022-12-31

145浏览

0评论

Vue全局事件总线和订阅与发布使用案例分析讲解

目录一、全局事件总线作用安装组件使用案例案例分析组件一（小明）组件二（小红）效果展示二、订阅与发布安装组件使用案例案例分析组件一（小明）组件二（小红）效果展示一、全局事件总线作...

• 2022-12-31

157浏览

0评论

vue-quill-editor富文本编辑器超详细入门使用步骤

目录首先放上效果图1.安装2.引入到项目中3.在页面上写组件4.配置option5.给工具栏鼠标悬停加上中文释义6.上传图片到七牛云7.自定义控制图片大小参考文章：总结首先放上效果图...

• 2022-12-31

301浏览

0评论

ant-design-vue动态表格合并案例

目录前言数据格式ant-desgin-vue表格提供的api合并单元格算法实现效果展示前言最近接到一个需求，要把后端传过来的数据动态展示在表格上面，并且支持前端筛选，相同数据进行单元...

• 2022-12-31

208浏览

0评论

vue移动端项目渲染pdf步骤及问题小结

第一步：引入pdf包 import pdf from "vue-pdf-signature";，这里不引入vue-pdf的包后面再做解释import CMapReaderFactory from "vue-pdf-signature/src/CMapReaderFactory.js";...

• 2022-12-31

131浏览

0评论

Vue装饰器中的vue-property-decorator 和 vux-class使用详解

目录1. 安装2. vue-property-decorator3. vuex-class目前在用vue开发的项目中，都会配合使用TypeScript进行一些约束。为了提高开发效率，往往会使用装饰器来简化我们的代码。本...

• 2022-12-31

153浏览

0评论

vue项目使用cdn加速减少webpack打包体积

目录1.引入cdn资源​2.在webpack基础配置文件中加入externals配置，打包、编译时去除cdn加速的模块，可以大大压缩打包后的压缩包体积3.去除main.js中对以上模块的引用，注册总结...

• 2022-12-31

105浏览

0评论

Vue cli3.0创建Vue项目的简单过程记录

创建Vue项目在要创建项目的文件夹下面打开Powershell窗口输入命令 vue create 项目名称选择第二项回车后选择是否使用历史路由 no 回车选择 Less 回车选择第三个 回车选择第...

• 2022-12-31

140浏览

0评论

Vs-code/WebStorm中构建Vue项目的实现步骤

目录一、使用Vue脚手架(vue-cli)构建Vue项目二、使用Vite构建工具构建Vue项目三、WebStorm中创建Vue项目(使用Vite构建工具)一、使用Vue脚手架(vue-cli)构建Vue项目1、打开c...

• 2022-12-31

153浏览

0评论

Vue+Koa+MongoDB从零打造一个任务管理系统的详细过程

大概是在18年的时候，当时还没有疫情。当时工作中同时负责多个项目，有 PC 端运营管理后台的，有移动端 M 站的，有微信小程序的，每天 git 分支切到头昏眼花，每个需求提测需要发送邮件...

• 2022-12-31

111浏览

0评论

vue el-select与el-tree实现支持可搜索树型

目录1. 树型下拉菜单2. vue页面代码3. selectTree 组件代码1. 树型下拉菜单实现效果2. vue页面代码引入selectTree组件import { selectTree } from '@/components'export de...

• 2022-12-31

158浏览

0评论

关于路由重定向redirect的基本使用

目录路由重定向redirect重定向案例vue路由重定向+路由别名路由重定向路由别名（了解）路由重定向redirect重定向使得一个路由地址A与另一个路由地址B联系起来，执行A的时候会跳转...

• 2022-12-31

171浏览

0评论

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

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

• 2022-12-31

154浏览

0评论

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

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

• 2022-12-31

145浏览

0评论

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

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

• 2022-12-31

125浏览

0评论

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

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

• 2022-12-31

143浏览

0评论

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

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

• 2022-12-31

225浏览

0评论

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

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

• 2022-12-31

232浏览

0评论

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

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

• 2022-12-31

183浏览

0评论

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

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

• 2022-12-31

172浏览

0评论

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

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

• 2022-12-31

162浏览

0评论

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

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

• 2022-12-31

285浏览

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

164浏览

0评论

Vue状态管理库Pinia详细介绍

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

• 2022-12-31

163浏览

0评论

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

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

• 2022-12-31

190浏览

0评论

vue使用csp的简单示例

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

• 2022-12-31

180浏览

0评论

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

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

• 2022-12-31

153浏览

0评论

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

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

• 2022-12-31

177浏览

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

139浏览

0评论

Vue生命周期深入分析总结

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

• 2022-12-31

164浏览

0评论

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

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

• 2022-12-31

116浏览

0评论

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

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

• 2022-12-31

139浏览

0评论

关于Vue-extend和VueComponent问题小结

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

• 2022-12-31

143浏览

0评论

手写实现Vue计算属性

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

• 2022-12-31

476浏览

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

165浏览

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

153浏览

0评论

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

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

• 2022-12-31

130浏览

0评论

Vue环境搭建报错整理大全

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

• 2022-12-31

402浏览

0评论

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

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

• 2022-12-31

139浏览

0评论

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

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

• 2022-12-31

95浏览

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

142浏览

0评论

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

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

• 2022-12-31

143浏览

0评论

vue项目兼容ie11的实现方法

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

• 2022-12-31

123浏览

0评论

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

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

• 2022-12-31