![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 92
MagnumHou
精通HTML5,CSS3,JavaScript,JQuery,Node,Vue,React等单词的拼写
展开
-
【Vue+Mysql实现前端对接数据库】
Vite + Vue3 工程化环境下,需要在 package.json 中配置。注意:Node 14+ 版本支持 CommonJS 和 ESM 两种规范。当然你也可以使用 CommonJS 规范通过。导入模块,这样项目中就存在两种规范的写法了。其它 api 文件配置参考 login.js。,且后端文件后缀需要由。原创 2023-12-17 20:52:05 · 1366 阅读 · 0 评论 -
【SCSS篇】Vite+Vue3项目全局引入scss文件
Vite+Vue3项目全局引入scss文件原创 2023-10-12 10:40:47 · 4428 阅读 · 1 评论 -
【vue富文本插件】tinymce 安装使用及汉化注意项
【vue富文本插件】tinymce 安装使用及汉化注意项原创 2023-10-10 10:32:36 · 2271 阅读 · 0 评论 -
【项目数据优化一】敏感数据脱敏处理
随着信息化发展与数字转型,企业有大量的数据二次利用(secondaryuse)与挖掘需求,为了平衡数据利用与隐私保护(敏感数据保护)问题,数据脱敏——作为一种成熟且应用灵活的数据安全技术,成为当前绝大数企业在数据安全治理与建设过程中的必选技术与措施。原创 2023-03-12 17:25:34 · 1744 阅读 · 0 评论 -
vue-router 在新窗口打开页面
Vue 属于单页面应用,而单页面应用中“路由”是在客户端执行的。客户端的 JavaScript 可以拦截页面的跳转请求,动态获取新的数据,然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验,尤其是在更偏向“应用”的场景下,因为这类场景下用户通常会在很长的一段时间中做出多次交互。原创 2023-05-04 10:44:38 · 3592 阅读 · 0 评论 -
【Vue 第二十五章】Vue3自定义指令、权限按钮实现思路、自定义拖拽指令
Vue3自定义指令、权限按钮实现思路、自定义拖拽指令原创 2023-05-30 13:55:59 · 2311 阅读 · 0 评论 -
【树形权限】树形列表权限互斥选择、el-tree设置禁用等等
树形列表权限互斥选择、el-tree设置禁用等等原创 2023-09-04 17:27:38 · 2011 阅读 · 0 评论 -
【Vue3 知识第八讲】computed 计算属性基础知识详解
computed 计算属性基础知识详解原创 2023-09-04 10:24:37 · 640 阅读 · 0 评论 -
【Vue3 知识第七讲】reactive、shallowReactive、toRef、toRefs 等系列方法应用与对比
reactive、shallowReactive 等系列方法应用与对比原创 2023-09-04 10:20:31 · 1854 阅读 · 0 评论 -
【Vue3 知识第六讲】ref、 shallowRef、unref、isRef 等系列知识应用
ref、 shallowRef、unref、isRef 等系列知识应用原创 2023-09-04 10:16:21 · 2885 阅读 · 0 评论 -
【Vue3 知识第五讲】条件渲染、列表渲染知识详解
条件渲染、列表渲染知识详解原创 2023-09-01 11:28:55 · 603 阅读 · 0 评论 -
【Vue3 知识第四讲】数据双向绑定、事件绑定、事件修饰符详解
数据双向绑定、事件绑定、事件修饰符详解原创 2023-09-01 11:18:32 · 986 阅读 · 0 评论 -
【Vue3 知识第三讲】模板语法、Vue3指令
模板语法、Vue3指令原创 2023-09-01 11:12:05 · 578 阅读 · 0 评论 -
【Vue3 知识第二讲】Vue3新特性、vue-devtools 调试工具、脚手架搭建
Vue3新特性、vue-devtools 调试工具、脚手架搭建原创 2023-09-01 11:08:13 · 2420 阅读 · 0 评论 -
【Vue3 知识第一讲】Vue 简介、核心关键词解读
Vue核心基础解读原创 2023-09-01 11:04:51 · 396 阅读 · 0 评论 -
【Leaflet + 天地图】通过经纬度、角度方向、距离(米)计算偏移后的经纬度
通过经纬度、角度方向、距离(米)计算偏移后的经纬度原创 2023-08-14 14:02:54 · 1871 阅读 · 0 评论 -
【ElementUI组件封装】搭建架子、按钮自行封装、封装element的表格、表单
有了前面封装表单的基础,要是顺手把表格也做一番封装,那么我们在处理这类增删改查页面的时候,就能节省出更多的时间去处理其它的事情,从而提高开发效率。像:后台管理系统的页面有一些表单增删改操作,这里面的控件名称和所用到的控件不一样外,逻辑大体相同。明明人家已经提供了相对完善的 UI 组件库、并且大部分想要的效果都已经有了,我们是没有必要再去浪费时间在这个上面的,应该更多的去关注业务逻辑的实现。像表格数据配置、操作列的、批量处理的、分页的、列数据个性化的等等,太多了就不一一列举了。原创 2023-07-21 16:45:49 · 977 阅读 · 0 评论 -
【Vue3 生态】VueRouter 路由核心知识点
如同调用 router.push() 一样,可以跳转到这个指定的路由地址,可以在返回对象中通过如:replace:true 或 name: ‘home’ 之类的属性来指定这个路由地址。Vue Router 提供了多种路由守卫,如:全局路由守卫、组件内路由守卫或单个路由独享守卫。带路由的项目组件中,使用 $route 会与路由紧密耦合,这限制了组件的灵活性,使得它只能用于特定的 URL。创建 ,需要正确的配置服务器。一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。原创 2023-07-02 10:14:00 · 313 阅读 · 0 评论 -
【Vue3 页面美化】常用组件库推荐
Vue 作为一款深受广大群众喜欢的前端框架,拥有众多优秀的开源 UI 组件库,这里整理了一下供大家参考。这几套框架主要用于后台管理系统和移动端的制作,方便开发者快速开发。原创 2023-06-20 10:39:49 · 3531 阅读 · 0 评论 -
【Vue3 生态】Vue Router 路由知识概览
在 Web 前端开发中,路由是非常重要的一环,但是路由到底是什么呢?原创 2023-06-19 17:29:03 · 3776 阅读 · 0 评论 -
【Pinia 状态管理篇】Vite + Vue3 组合式 API 模式下的 Store 数据处理
Pinia 是 Vue 的专属状态管理库,它允许你跨组件或页面共享状态。原创 2023-06-15 17:26:36 · 1584 阅读 · 0 评论 -
【Vue3 第二十七章】路由和状态管理
Vue 组件本身其实已经实现了对响应式状态的管理。如果你只需要一个简单的页面路由,而不想为此引入一整个路由库,你可以通过动态组件的方式,监听浏览器 hashchange 事件或使用 History API 来更新当前组件。Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。- 为 Vue.js 提供富有表现力、可配置的、方便的路由。原创 2023-06-13 11:09:03 · 822 阅读 · 0 评论 -
【ElementUI 表单校验】一个 el-form-item 下多个表单校验(循环校验)
前端开发项目的过程中,批量表单循环校验是很常见的,如上图,动态添加奖励计算规则,把所有的表单放到了一个 el-form-item 下。也可以理解为 el-form-item 做了嵌套,外层当然也可以省略,样式做微调,下面通过代码来详细的看一下。不足之处,多多交流。原创 2023-06-07 15:57:51 · 3005 阅读 · 0 评论 -
【Vue 插件篇】粘贴板插件 clipboard.js 与 原生JS中的复制、剪切、粘贴
Vue插件粘贴板 clipboard 使用介绍原创 2023-06-07 09:49:00 · 8829 阅读 · 1 评论 -
【Vue3第二十六章】自定义Hooks & 编写Vue3插件
在中,任何以v开头的驼峰式命名的变量都可以被用作一个自定义指令。在下面的例子中,vFocus即可以在模板中以v-focus的形式使用。将一个自定义指令全局注册到应用层级也是一种常见的做法,这样的话在任何一个组件中都可以调用此全局指令。// 导入 createApp 方法:每个 Vue 应用都是通过 createApp 函数创建一个新的应用实例:// 导入根组件// 通过 createApp() 函数创建一个新的应用实例。原创 2023-06-01 14:15:32 · 1141 阅读 · 0 评论 -
【Vue3第二十四章】TransitionGroup 列表动画组件
TransitionGroup 列表动画组件原创 2023-05-27 20:51:58 · 2271 阅读 · 0 评论 -
vite3+vue3 项目打包优化三 — CDN加速、文件压缩
内容分发网络(Content Delivery Network,简称 CDN),是构建在数据网络上的一种分布式内容分发网,它可以让用户从最近的服务器请求资源,以提升网络请求的响应速度。:一但依赖网站出现问题,我们的项目也就不行了,建议留下备用方案,以便维护。把打包好的项目放入服务器目录,服务器开启 gzip 服务,这样通过项目地址就可以在浏览器中进行访问了。需要注意的是,浏览器解压也是需要时间的,如果项目体积不是很大的话,不建议采用 gzip 进行压缩原创 2023-05-24 15:49:19 · 2157 阅读 · 0 评论 -
Vue3 面试必备高频知识点
自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。指令钩子及参数详见组件内自定义指令:在中(组合式API),任何以v开头的驼峰式命名的变量都可以被用作一个自定义指令原创 2023-05-23 13:53:23 · 616 阅读 · 0 评论 -
vite3+vue3 项目打包优化二 —— 依赖分包策略
当值为对象形式时,每个属性代表一个 chunk,其中包含列出的模块及其所有依赖。chunk 的名称由对象属性的键决定。})当该选项值为函数形式时,每个被解析的模块都会经过该函数处理。如果函数返回字符串,那么该模块及其所有依赖将被添加到以返回字符串命名的自定义 chunk 中。以下例子,创建一个命名为vendor的 chunk,它包含所有在中的依赖以下例子,将静态资源分拆打包:将 node_modules 中的代码单独打包成一个 JS 文件。原创 2023-05-17 17:26:33 · 1381 阅读 · 0 评论 -
vite3+vue3 项目打包优化
现在很多小伙伴都已经使用 Vite + Vue3 开发项目了,如果你是 “前端架构师” 或者是 “团队核心” 的话,不得不可考虑的一个问题就是性能优化。本篇文章主要讲述的是生产环境下 Vite + Vue3 打包优化。原创 2023-05-16 15:22:28 · 1868 阅读 · 0 评论 -
Vue 项目多个 axios 请求下 loading 处理
每当一个请求结束, loadingCount 减 1,并判断 loadingCount 是否为 0,如果为 0,则关闭 loading;造成的后果就是页面请求还没完成,loading 却关闭了,用户会以为页面加载完成了,结果页面不能正常运行,导致用户体验不好。假如现在同时发起两个请求,在请求前,拦截器 this.isShowLoading = true 将 loading 打开。这个拦截器的功能是在请求前打开 loading,请求结束或出错时关闭 loading。如果每次只有一个请求,这样运行是没问题的。转载 2023-05-15 09:52:56 · 1133 阅读 · 0 评论 -
Vue 项目利用 HBuilderX 打包 APP 流程
想要将 Vue 打包成 App,要借助一些插件工具,例如:Electron、Cordova 等,或者直接利用开发工具,例如:Android Studio、HBuilderX 等。本文的目的是带大家通过 HBuilder 开发工具对 Vue 项目进行打包。原创 2023-05-12 16:10:19 · 6287 阅读 · 3 评论 -
Vite + Vue3 实现前端项目工程化
Vue3 发布至今,周边的生态、技术方案已足够成熟,个人认为新项目是时候切换到 Vite + Vue3 了。今天就给大家操作一下这种技术方案实现前端工程化。原创 2023-05-10 11:29:46 · 837 阅读 · 0 评论 -
【Vue3 插件篇】GSAP 动画库与 图片预览插件
GSAP(GreenSock Animation Platform)是一个专业的动画库,可以用它完成你想要的各种效果官。viewer.js是一款开源的图片预览插件,功能十分强大原创 2023-05-09 08:50:53 · 2984 阅读 · 0 评论 -
【Vue 移动端开发】适配百分之99的屏幕方案
手淘框架的核心原理就是根据制不同的width给网页中html根节点设置不同的font-size,然后所有的px都用rem来代替,这样就实现了不同大小的屏幕都适应相同的样式了。1334 满天飞的时代,这两句代码确实给开发者带来了很大的方便,这样设置根font-size后,px 和 rem 的转换比例成了100, 为比如UI稿一个长宽分别为 120px。再当我们输入宽度的时候,我就可以看到vscode自动帮我们计算好了对应的rem值,我们只要点击使用就可以了。Node 版本 v14.18.1。原创 2023-04-25 20:22:25 · 1116 阅读 · 1 评论 -
Vue项目基于driverjs实现新用户导航
Driver.js 是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库。主要的作用是为刚接触应用的新手用户快速了解产品,帮助用户把注意力聚焦到某项功能,从而快速熟悉我们的开发的产品。它没有依赖项,支持所有主要浏览器。原创 2023-04-20 16:55:28 · 961 阅读 · 0 评论 -
【项目数据优化三】长列表数据优化
首先我们要知道,虚拟滚动是用到 Vue 的 v-for 实现的,上面也解释了,虚拟滚动是只渲染可视区域,那么我们可视区域的节点内容必然会随着用户的滚动条的改变而改变,假设一个页面就只能显示 n 个节点,那么我们如何让这n个需要变动的节点跟着滚动条动呢?这部分就是最核心的代码了。如上图,当1被卷去的时候(完全离开我们的可视区),我们就利用css的translateY将它顶下来,渲染成2,你会发现发现在可视区域外多出来了一个节点,为了保证滑动的连贯性,你可以多设置几个冗余节点。答案是肯定的,js为我们提供了。原创 2023-03-31 14:42:43 · 503 阅读 · 0 评论 -
【高频触发事件优化】封装节流和防抖
最近项目有一个数据导出功能,之前后端都是同步处理,前端做防抖处理,数据量特别大的时候,造成响应时间特别长。这次后端做了优化处理,将后端做了异步处理,响应特别快,但是需要再额外的下载页面去处理导出,这样造成用户下载后直接进入下载页面需要等待一段时间才能看到下载文件,而且对于后端来讲,防抖虽然可以控制频率(默认1s),但是他想要把时间控制在 10s 左右,才能实现二次下载。如果继续使用防抖,如果直接定 10s ,就会造成第一次点击无效的点击,当然这个可以通过一个变量动态控制这个时间,但是稍显麻烦。原创 2023-03-30 14:18:18 · 715 阅读 · 0 评论 -
Vue3 组合式函数
:“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。这里需要提一下的概念:它只包括了可重用的逻辑 (数据获取、分页等) 而不需要自己渲染内容,视图输出通过作用域插槽全权交给了消费者组件。大部分能用无渲染组件实现的功能都可以通过组合式 API 以另一种更高效的方式实现,并且还不会带来额外组件嵌套的开销。原创 2023-03-28 10:25:13 · 1595 阅读 · 0 评论 -
【 Vue3 性能优化】页面加载性能 与 更新性能
Vue 在大多数常见场景下性能都是很优秀的,通常不需要手动优化。然而,总会有一些具有挑战性的场景需要进行针对性的微调。原创 2023-03-08 10:56:41 · 3207 阅读 · 1 评论