目录一、需求描述二、界面展示三、代码实现一、需求描述前段时间接到一个需求是做一个类似接口文档的显示功能,将一段json数据贴到里面就可以自动解析出json数据的每个字段的类型和层级关系,用element组件的树表格的形式展示,并且可以手动新增、修改和删除某个数据字段。二、界面展示功能如下图所示:1.未贴数据之前:2.点击右上角的‘导入json',在打开的弹框 ......
419
0
0
2023-07-29
目录VUE简单使用lodop1.创建LodopFuncs.js文件2.在打印功能vue页面引入LodopFuncs3.执行打印方法4.打印接口函数官网样例说明5.完整页面示例VUE 集成LODOP插件打印Lodop、C-Lodop使用说明及样例http://www.lodop.net/LodopDemo.htmlVUE简单使用lodop1.创建LodopFu ......
447
0
0
2023-07-28
该模板将帮助您开始使用Vue 3、Vite3.0中的TypeScript以及Pinia、Vant3进行开发。该模板使用Vue3,请查看文档了解更多教程。推荐的IDE设置VS Code + Volar键入支持。TS中的vue导入因为TypeScript无法处理的类型信息。vue导入,默认情况下,它们填充为通用vue组件类型。在大多数情况下, ......
374
0
0
2023-07-25
目录axios响应拦截获取返回状态码方式整理方法一方法二方法三Vue的axios拦截器用法总结axios响应拦截获取返回状态码方式整理方法一axios.interceptors.response.use( response => { console.log('拦截器响应成功') return response }, error ......
340
0
0
2023-07-24
目录深入分析对于map、set、weakMap、weakSet的响应式拦截(1).mutableInstrumentations(2).shallowInstrumentations(3).readonlyInstrumentations(4).shallowReadonlyInstrumentationsref、computed等方法的实现(1).ref与 ......
311
0
0
2023-07-24
目录本文主要内容调度器1.添加任务(queueJobs)2.二分法找到插入位置(findInsertionIndex)3.将执行任务的函数推入微任务队列(queueFlush)4.执行普通任务(flushJobs)5.添加后置任务(queuePostFlushCb)6.queuePostRenderEffect7.执行后置队列任务(flushPostFlus ......
290
0
0
2023-07-24
目录前言一、回顾 Vue2 的全局引用方式 1. 简单项目的全局引用2. 复杂项目的三步封装二、Vue3 中的使用 1. provide/inject 方式2. getCurrentInstance 组合式API引入总结前言边看边学边记录系列,正好到 Vue3 了今天就和大家一起学习并记录一下 Vue3 的Compos ......
380
0
0
2023-07-23
目录1.渲染组件2.组件的状态与自更新3.组件实例和生命周期4.props与组件状态的被动更新5.setup函数的作用与实现6.组件事件和emit的实现7.插槽的工作原理及实现8.注册生命周期1.渲染组件从用户的角度来看,一个有状态的组件实际上就是一个选项对象。const Componetn = { name: "Button", dat ......
362
0
0
2023-07-23
目录背景思路方式1-通过定时器做防抖处理(a)概述(b)代码(c)预览(d)存在的问题情况-在点击事件上做防抖情况-在接口方法做防抖方式2-通过取消ajax请求(a) 概述(b)原理原生ajax取消请求axios取消请求(c)代码步骤1-通过axios请求拦截器取消重复请求步骤2-通过axios响应拦截器处理请求成功步骤3-通过axios响应拦截器处理请求失 ......
282
0
0
2023-07-22
目录背景思路实现方式1-通过location.reload和$router.go(0)方法方式2-通过空白页面方式3-通过provide和inject背景项目当中如果做新增/修改/删除等等操作通常情况下都需要刷新数据或者刷新当前页面.思路(1)如果页面简单,调用接口刷新数据即可.(2)如果页面复杂,需要调用多个接口或者通知多个子组件做刷新,可以采用刷新当前页 ......
239
0
0
2023-07-21
目录1、父组件传给子组件2、子组件传给父组件3、兄弟组件间传值4、路由间传值 i.使用问号传值5、使用$ref传值6、使用依赖注入传给后代子孙曾孙7、祖传孙 $attrs8、孙传祖9、$parent10、sessionStorage传值11、vuex总结不写这篇文章,我自己都不知道我知道的vue组件传值的方式竟然有11种之多,其实静下来想想,常用的也有五六种 ......
357
0
0
2023-07-20
1.VUE验证邮箱export const isEmail = (s) => { return /^([a-zA-Z-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s) } 2.VUE验证手机号码export const isMobile = (s) => { ......
256
0
0
2023-07-17
目录概述Vuex的模块化state数据状态对象getters计算属性对象actions异步请求对象mutations数据同步对象Vuex的使用方式在自定义组件中使用在自定义js文件中引用Vuex持久化配置main.js代码modules/user.js代码概述Vuex作为VUE状态管理组件,能够将项目公共数据进行统一管理。而且可以按照不同的业务功能将数据状态 ......
280
0
0
2023-07-17
将echarts封装成组件,达到只要调用方法,传入数据和相应的参数就能生成图表的效果,避免在项目中编写大量重复和累赘的echarts的配置代码,实现的思路如下:接口返回的一般是json数据,所以首先要将json数据进行处理,处理成echarts需要的数据形式将echarts的配置代码封装在一个方法里,通过自定义的配置名进行调用下面对我自己封装的组件 Echa ......
248
0
0
2023-07-16
目录前言1.实现搜索布局代码:2.搜索布局css样式代码:3.城市列表布局代码:4.城市列表css样式代码:5.城市列表获取焦点的事件:6.设置焦点背景颜色和字体效果:7.搜索框输入事件:8.搜索框获取焦点的事件:9.默认弹出TV软键盘:10.完整代码如下:11.实现的效果截图如下:总结前言vue中城市列表和搜索很常见,这篇博客就来说说咋实现搜索和城市列表1 ......
245
0
0
2023-07-15