- 博客(57)
- 收藏
- 关注
RSS订阅原创 vue3怎么提升效率的？为什么vue3比vue2快？效率提升主要在哪些方面？
vue3怎么提升效率的？为什么vue3比vue2快？效率提升主要在哪些方面？
2023-11-28 22:08:47
1659
1
原创 vue3组件通信详解
vue3组件通信方式有以下几种：porps，$emit， bus，v-model，useAttrs，$ref/$parent，provide/inject，pinia，slot。
2023-05-30 17:23:54
3791
原创 JS数据类型有哪些？区别是什么？
JS数据类型有Number、String、Boolean、BigInt、Symbol、Null、Undefined、Object、8种。 基本数据类型是直接储存在栈中的简单数据段，占用空间小，属于被频繁使用的数据。 引用数据类型是储存在堆内存中，占用空间大。引用数据类型在栈种储存了指针，改指针指向堆内存中实体的起始地址，当解释器寻找到引用值时，会检索其在栈中的地址，取得地址后从堆中获得实体。
2023-02-06 11:09:29
631
原创 oss 部署前端项目报错 Cannot find module ‘@/views/.....‘（require和import区别）
oss 部署前端项目报错 Cannot find module ‘@/views/.....‘（require和import区别）
2022-11-10 14:01:01
1917
原创 react 使用useRoutes遇到的问题
Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.
2022-07-01 14:55:39
3428
原创 vue做图片裁剪——vue-cropper
这里使用的是vue-cropper 官方文档以及案例在这里先安装裁剪图片组件注意事项：1.代码中设置的是只有正确的url是才展示，裁剪组件2.需要给容器固定高度3.props传值可自行加减具体使用（这里使用的是antd）效果图...
2022-06-20 17:07:37
2546
原创 vue3父子组件通信（＜script setup＞）
在vue3中，父子组件通信与vue2不同，没有this，所以不能直接使用this.$emit 和this.$refs和Props。那么在vue3中我们要怎么通信呢？（补充：这里我们使用的是， 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。相比于普通的 语法，它具有更多优势。
2022-06-02 13:56:41
4946
原创 解决class绑定数组，改变数组不更新view问题
首先我们先思考一下，vue的数据是怎么更新的，绑定原理是什么。众所周知，vue2采用的数据劫持是使用object.defineproperty()方法，但是object.defineproperty()方法并不完美，它的缺陷，主要表现在两个方面：1.无法检测到对象属性的新增或删除 由于js的动态性，可以为对象追加新的属性或者删除其中某个属性，这点对经过Object.defineProperty方法建立的响应式对象来说，只能追踪对象已有数据是否被修改，无法追踪新增属性和删除属性，这就需要另外处理。
2022-05-20 15:57:10
350
原创 解决this._data.$$state...“Error: [vuex] do not mutate vuex store state outside mutation handlers.“ 报错
今天遇到了这样一个报错：[Vue warn]: Error in callback for watcher "function () { return this._data.$$state; }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."javascript:void(0)使用场景是这样的： this.$store.commit("business/set_state",
2022-05-20 15:42:43
2078
原创 window.location.search无法获取参数以及获取参数方法
很多时候我们会需要获取URL里面携带的参数，但是有时候window.location.search获取不到参数。原因是window.location.search只能在取到“？”后面和“#”之前的内容，如果“#”之前没有“？”search取值为空。它默认参数和#是一个字符串。下面是获取有#和没有#的方法// 有#的情况export function getQueryStringhash(key) { var after = window.location.search; if (af
2022-04-24 17:31:24
4387
原创 Failed to execute ‘insertBefore‘ on ‘Node‘: The node before which the new node is to ...报错
今天遇到了Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. at Object.vi [as insertBefore]这个报错，使用场景：框架使用的是若依前端框架，在使用按钮权限时，报了这个错。 <el-button type="text" size="small" v-if
2022-04-21 17:07:18
13654
3
原创 解决el-table滚动条错位问题（完美级）
滚动条创建一个js文件，并在main.js引入:import Vue from "vue";Vue.directive("tableFit", { //指令所在组件的 VNode 及其子 VNode 全部更新后调用。 componentUpdated(el, binding, vnode) { setTimeout(() => { adjustColumnWidth(el, vnode); }, 0) },
2022-04-20 19:04:14
5440
4
原创 两位小数正则验证
一、两位小数 /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/二、小于等于100的小数正则/^(100|([1-9][0-9]?)|(0|[1-9][0-9]?)(?:\.\d{0,2}))?$/解读：^：匹配输入字符串的开始位置，以什么开头$：匹配输入字符串的结束位置，以什么结尾*：匹配前面的子表达式零次或多次?：匹配前面的子表达式零次或一次{n}：n 是一个非负整数。匹配确定的 n 次{n,m}：m 和 n 均为非负整数，其中n &
2022-04-12 10:23:24
4142
原创 el-input-number 如何设置初始值为空
使用el-input-number 组件时，初始化数据总是为最小值，但是很多时候我们不想展示任何数据，此时我们只需要将初始值设置为 undefined 即可。如下：
2022-04-07 17:45:40
4002
原创 若依框架项目部署后路由报错
若依框架部署到服务器后，动态路由报错，无法访问，原因是有些版本不支持动态import导入解决：找到 /store/modules/permission.js，将 import引入改为requireexport const loadView = (view) => { return (resolve) => require([`@/views/${view}`], resolve)}原：export const loadView = (view) => { if
2022-03-23 15:12:58
1970
原创 vue嵌入PDF预览以及报错（Cannot read properties of undefined (reading ‘catch‘)）解决
项目中需要用到PDF预览，查找病尝试了很多种方法，使用了iframe，但是无法访问链接，可能是跨域问题，没有深究。使用了pdfjs,引入后模块报错，无法启动，可能是版本问题，最后选择了vue-pdf。下载依赖：npm install --save vue-pdf引入：import pdf from "vue-pdf";使用（这里使用的是带有分页的，否则只会展示一页）： components: { pdf, }, <pdf ref="pdf" :sr
2022-03-23 14:38:54
5309
1
原创 解决vue打包后去掉console
npm install babel-plugin-transform-remove-console --save-dev安装插件 生产环境：在项目的babel.config.js的plugin中添加节点。 let transformRemoveConsolePlugin = [];if (process.env.NODE_ENV === 'production') {transformRemoveConsolePlugin = ['transform-remove-console...
2022-02-28 14:49:37
6453
原创 Android 空包签名
找到jdk bin 目录：搜索javac，右键点击所在位置。将空包与签名复制到bin目录下在此地输入cmd 打开命令面板输入：jarsigner -verbose -keystore [签名的路径] -signedjar [签名后的文件名] [未签名的文件名] [证书别名) ]例如：需要输入密钥就输入证书密钥签名成功，签名后的包在bin目录中。...
2022-02-11 11:17:29
1814
原创 解决js计算精度问题
// 除以 accDiv(arg1, arg2) { let t1 = 0, t2 = 0, r1, r2; try { t1 = arg1.toString().split(".")[1].length } catch (e) {} try { t2 = arg2.toString().split(".")[1].length } catch (e) {}; r1 = Number(arg1.toString().repla...
2022-02-09 14:23:44
733
原创 js时间格式转换
// 时间转换 time(date, symbol) { let y = date.getFullYear(); let m = date.getMonth() + 1; m = m < 10 ? "0" + m : m; let d = date.getDate(); d = d < 10 ? "0" + d : d; let h = date.getHours(); h = h < 10 ? "0" + h : h; let min.
2022-02-09 14:02:42
669
原创 uniapp离线打包（Android）
Android Studio 工程配置。步骤1：生成本地打包APP资源步骤2：替换资源将\assets\apps中的 __UNI__ 开头的文件替换成打包的资源步骤3打包：next:结束。
2022-02-09 12:07:56
1653
原创 uniapp原生插件使用
注：只要原生插件有改动，都需要重新打自定义基座，否则不生效。且热更新无法更新基座。步骤1：将原生插件放入nativeplugins文件夹中。步骤2：manifest.json文件，进入原生插件模块，选择本地插件步骤3：let TrackingIO = uni.requireNativePlugin('TrackingIO');注意uni.requireNativePlugin('name')，中的name要与插件中的package.json 中的na..
2022-02-09 11:29:12
2145
1
原创 uniapp 微信分享
第一步：在微信开放平台申请获取微信平台的AppID第二步：在manifest.json 模块配置中勾选打包安卓非常方便，只需要填写对应的appid即可。第三步：ios配置Universal Links在配置模块中，可直接参考文档按照参考文档操作，下面讲一下注意事项。1.一定要先开启 Associated Domains服务后重新生成证书。2.自定义域名配置完成后，文件管理会多新增如下文件：3.如果配置完成后，ios分享会跳转到微信，再跳转到APP再跳回到
2022-01-27 15:52:56
739
原创 uniapp 热更新带进度条
注意：在使用plus.runtime.install 时，如果无法更新成功，请按将 force设置为trueApp.vue 文件onLaunch() { this.HotUpdate(); },methods: { HotUpdate() { // #ifdef APP let data ={ version:"1.1.0",//线上版本 Url:url,//下载更新文件地址 }; plus.runtime.getPrope.
2022-01-27 15:21:31
2098
原创 Vue seo优化
一、什么是SEOSEO（Search EngineOptimization）中文意思“搜索引擎优化”，是指在了解搜索引擎自然排名机制的基础上，对网站进行内优化和修复(网站Web结构调整、网站内容建设、网站代码优化和编码等)和站外优化，改进网站在搜素引擎中的关键词自然排名，通过搜索引擎查找信息是当今网民们寻找网上信息和资源的主要手段。二、vue为什么seo不友好vue单页面应用渲染是从服务器获取所需js，在客户端将其解析生成html挂载于id为app的DOM元素上，这样会存在两大问题：...
2021-11-30 11:31:04
1154
原创 FileReader API 文件操作
File API 文件操作FileReader：使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据.其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果。FileReader API 的工作原理
2021-11-03 11:14:29
385
原创 如何实现自适应布局
其他文件参考：flexible.js 布局详解-前端开发博客rem是如何实现自适应布局的？-前端开发博客移动端自适应方案-前端开发博客移动端布局一、布局概念1. 静态布局直接使用px作为单位2. 流式布局宽度使用%百分比,高度使用px作为单位3. 自适应布局创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。使用@media媒体查询来切换多个布局4. 响应式布局通常是糅合了流式布局+弹性布局,再搭配媒体查询技术使用5. 弹性布局通常指的是re
2021-11-02 18:34:13
3732
原创 vue clipboard 点击复制
第一步：下载依赖：npm install clipboard --save第二步：导入使用 <el-button type="parimy" @click="copy" class="publicKeyCopy" data-clipboard-text="复制的内容" > 一键复制 </el-button>import Clipboard from "clipboard"; met
2021-10-28 16:56:12
114
原创 vue2&vue3使用纯前端验证码
例：一、创建容器 <div id="v_container" style="width: 40%; height: 50px;" ></div>二、新建VerificationCode.jsfunction GVerify(options) { //创建一个图形验证码对象，接收options对象为参数 console.log(2323) this.options = { //默认optio...
2021-10-26 16:04:19
412
原创 SQL常用语句解释
添加数据补充:将一个查询结果插入到另一张表中create table student(name char(10),gender int);insert into student values("jack",1);insert into student values("rose",0);create table student_man(name char(10),gender int);insert into student_man select * from student where g
2021-10-09 15:48:19
336
原创 MySQL基础知识
字段类型分类char和varchar类型区别char：底层会先留出所有空位varchar：底层不会留空位，输入多少个字符就会计算多少个字符的空位创建多种字段类型的表create table husband( id int primary key auto_increment,no char(12) unique, name char(20) , age int)ENGINE=InnoDB DEFAULT CHARSET=utf8;create table w..
2021-10-09 15:36:05
119
原创 mysql建表常用sql语句
连接：mysql -h主机地址 -u用户名 －p用户密码 （注:u与root可以不用加空格，其它也一样）断开：exit （回车）创建授权：grant select on 数据库.* to 用户名@登录主机 identified by \"密码\"修改密码：mysqladmin -u用户名 -p旧密码 password 新密码删除授权: revoke select,insert,update,delete om *.* from test2@localhost;推荐：《mysql教程》
2021-10-09 15:21:20
192
原创 ECharts的基本使用
一、ECharts的特点二、基本使用第一步：引入echarts.js文件第二步：准备呈现图标的盒子第三步：初始化echarts实力对象：let mCharts = echarts.init(document.querySelector('div'));//传递的dom元素//就是用来装echarts的框第四步：准备配置项let option = { XAxis：{ type：'category',
2021-10-09 15:10:12
1560
原创 MVC和MVVM
MVCmodel：数据模型层view：视图层controller：控制层jQuery：频繁DOM操作影响界面渲染效率，重绘重排过程。重绘：字体颜色，背景颜色等，叫重绘重排：DOM结构大小，位置的重排，重排会引起重绘MVC的思想：一句话描述就是Controller负责将Model的数据用View显示出来，换句话说就是在Controller里面把Model的数据赋值给View，比如在controller中写document.getElementById("box").innerHTM
2021-10-08 11:13:13
67
原创 JS基础-数组
一、数组的创建1. Array构造函数创建数组，关键词newvar arr=new Array();//arr=[] var arr=new Array(10);//数组长度为10 var arr=new Array（10，20，30，40）；//arr=[10,20,30,40]2. 字面量创建var arr=[10,20, ,40] // []里面是存入的数据3. Object.creat()创建var arr=Object.creat(new Array())/.
2021-10-08 11:07:27
493
原创 JS基础知识
一、网页结构分层：结构层：HTML 骨头修饰层：CSS 皮囊逻辑层：JS 灵魂二、JS的简单认识：1、什么是JS：1）具备面向对象能力的解释型脚本语言，运行在浏览器里面，在浏览器里面有js的解释器。2）提升用户体验。4）弱类型语言，在声明变量的时候不用声明变量类型。2、JS分成三部分：1）ES：语法 （核心）2）DOM：DocumentObjectModel 文档对象模型，实现页面特效...
2021-10-08 10:32:48
120
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人