03 2023 档案
vue3中watch的写法大合集。
摘要：VUE2的watch是一个属性写法是 watch:{ data1(newVal,oldVal){ 同步/异步操作 } } VUE3的watch则是一个函数，写法是 注意数据必须是响应式的 let num = ref(0) //watch(要监听的响应式数据,(新值，旧值)=>{更新时的回调}) wa
小程序checkbox单独监听状态改变
摘要：小程序中的checkbox中监听change要和checkbox-group放在一起，然后在checkbox-group上监听change事件，但是这样太麻烦了，特别时对于只有一个checkbox的时候，我们可以监听tap事件，然后手动判断 <checkbox checked="{{ agree }
CSS 媒体查询 @media【详解】
摘要：关于媒体查询的一篇好文推荐 https://blog.csdn.net/weixin_41192489/article/details/126028971
IOS 不支持this.$router.go解决办法
摘要：在使用Vue路由实例对象$router.go进行页面切换时ios是不起作用得，可以使用 location.href = "javascript:history.go(-2);" 解决
vue中van-picker的选项插槽使用方法
摘要：van-picker的内部选项怎么来自定义 首先要确保 Vant UI 的版本在2.10.0以上 然后利用插槽slot来实现，在Vant 里插槽有一个进阶用法 # <van-picker :show-toolbar="false" :default-index="2" // 默认选中第三行，选中第一
van-popup 组件中的 close-on-click-overlay 失效
摘要：我在写van-popup 组件中的的时候 <van-popup v-model="taskShow" round position="bottom" close-on-click-overlay="false"> 禁用了点击蒙层关闭弹窗，但是一直不生效，网上也找了很多的文章一直没解决掉。 后来我转念
new Date(时间) IOS兼容的问题
摘要：当时间格式为yyyy-MM-dd HH:mm:ss时，即日期使用-连接时，ios会无法识别，返回invalid Date无法识别和转换 解决方法： 使用replace替换，直接将 - 替换为 / 这样安卓和IOS就都可以识别了 new Date("yyyy-MM-dd HH:mm:ss").repl
package.json browserslist
摘要：作用：根据提供的目标浏览器的环境来，智能添加css前缀，js的polyfill垫片,来兼容旧版本浏览器。避免不必要的兼容代码，以提高代码的编译质量。 共享使用browserslist的组件们： 组件名功能 Autoprefixer postcss添加css前缀组件 bable-preset-env
Vue中div和template的区别
摘要：template是作为占位符模板，用于包裹元素，自身并没有被渲染出来。 相较于使用div 会节省一个没必要的div标签的空间。 我们都知道 v-show隐藏元素的原理是 控制其元素的display:none； template并没有被作为 dom元素被渲染出来， 所有无法控制其 display：no
vue2之对象属性的监听
摘要：vue2之对象属性的监听的一些总结 对象属性监听的两种方法： 1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValue) { console.log(newValue) } } 2
echarts中clear和dispose的区别和使用场景
摘要：clear和dispose是echarts提供的用于解决内存溢出的方法。 echarts.clear()是清空当前实例，会移除实例中所有的组件和图表。 echarts.dispose()是销毁实例，销毁后实例无法再被使用。 我觉得clear和dispose就类似于v-show和v-if clear类
echarts图表随着视图窗口的大小resize改变图表大小的实现
摘要：最近使用echarts比较多，之前用的比较少，这次使用时发现视图窗口变小以后在恢复原来的大小，图表不会自己恢复。 通过监听视图变化调用图表的resize()方法解决了问题 window.onresize = () => { console.log("窗口大小改变了"); if (this.weekC
解决for in 遍历js对象，得到的顺序不正确问题
摘要：最近在项目中需要遍历一个对象，按照顺利来渲染 用for in之后发现每次得到的对象属性的顺序都不是按照后端数据源来排序的。 因为对象中没有顺序，他不是数组，所以想要得到一个顺序就首先要只给对象指定规则，这里是通过对象的value的字母来指定的规则。 objectOrder(obj) {//排序的函数
记录VUE开发遇到异常el-select绑定值为对象的时候报key重复的异常问题
摘要：最近在用el-select时发现渲染出来的选项全部被激活了，一开始以为时v-for的key重复了，后来发现不是。 又以为时v-model绑定的数据不是响应式的，发现也不是。 查询Element UI 官方文档得到解决方案 <el-form :model="form2" ref="form2" siz
ElementUI的不常见报错Error in beforeDestroy hook: “Error: [ElementForm]unpected width
摘要：今天在解决项目BUG的时候，发现控制台突然多出了一个错误， Error in beforeDestroy hook: “Error: [ElementForm]unpected width 简单分析过后，确定了问题出在了 Form 表单中，但不影响正常功能，看了一些文章，同样的问题也会出现在dial
Required request body is missing: 前端接口报错错误解决
摘要：前几天遇到一个报错：Required request body is missing； 经过检查是因为在传递参数时使用params来传递的。 而使用params来传递参数会被拼接到url上不管是get还是post请求，这时候请求体也就是body是不存在的。 所有后端在获取参数时会报request b
记录v-solt的几种写法
摘要：最近vue2/vue3混着写经常出现插槽写法的混淆 下面记录一些vue2中作用域和具名插槽使用时的写法 v-slot使用方式1： <template v-slot:operate="{ row }"><template> 则可替换为： <template slot="operate" slot-sc
在请求中使用键值对来进行传参，不使用JSON格式
摘要：在项目中碰到了个别请求需要使用键值对进行传参，不允许使用JSON格式。 第一步：引入qs模块，qs模块时node自带的模块，直接引入即可 import qs from 'qs' 第二步：使用qs.stringify()方法，qs.stringify()作用是将对象或者数组序列化成URL的格式。那么这
this.$nextTick无法获取到this.refs.xxx问题的解决
摘要：在做一个打印预览的功能时要通过循环添加要打印的二维码来预览 使用this.$nextTick无法获取更新后的dom，并且二维码在循环后生成也没有生成，因为先循环数组生成二维码的容器，然后再生成二维码。二维码容器的dom在循环后使用this.$nextTic没有获取到，所有二维码自然也生成不了。 最终
使用axios+vue在离开页面时中断网络请求
摘要：最近做到一个需求需要在离开页面时中断未完成的网络请求 第一步： 引入axios和CancelToken实例子 import axios from 'axios' const CancelToken = axios.CancelToken 第二步：在封装好的接口方法中加入cancelToken配置属性
基于elementUI二次封装一个表格加上搜索的控件
摘要：<template> <!-- 组件属性： selection：表格是否可勾选 querys: [搜索配置 { label: "所属网关",//标题 name: 'gatewayId',//v-model的参数名 value: '',//v-model的参数值 type: "select",//控件
在echaerts中渲染50万条数据的优化方案
摘要：背景：项目需求中要在页面上渲染大约50万条左右的波形数据图表 那么如何解决渲染中的卡顿呢？ 肯定是要从服务端和前端一起优化这是毋庸置疑的。 1.服务端： 服务端耗时最多的一定是在数据库的筛选数据的行为上，本次需求中数据的筛选是根据物理量的类型和时间来进行的。 为了提速，应当取消掉其他的筛选条件，并且
记录一次重置数据库root用户的过程
摘要：服务器的mysql突然连接不上去了，密码也忘记了。只能重新设置密码了 1、使用如下指令打开mysql数据库配置文件（具体的文件路径以实际情况为准） vim /etc/my.cnf在虚拟机中直接输入即可添加如下命令 skip-grant-tablesskip-networking直接复制进文件即可，加
