- 博客(34)
- 收藏
- 关注
RSS订阅原创 mpvue中v-for嵌套报错SyntaxError: missing ) after argument list 问题解决
vue程序，在多层v-for嵌套时，需要指定第二个参数，否则默认为index，这样就会冲突报错，重复了index index。在解决了索引问题后，继续出现第二个问题，就是题目所述的问题，查阅测试了网上所有的解决办法，都无法解决，大家把精力都集中在索引冲突上了。其实这个报错问题出在key的拼接上，因为在子v-for中，key值肯定是要用字符拼接的，即引用父级索引或者属性，再加上本层的属性或索引，问题就出在这里，在mpvue中无法编译绑定值中的字符拼接。解决办法就是：使用函数methods方法返回拼接就行了。
2023-08-12 13:25:34
382
原创 vue项目引入vant后不生效问题的解决办法
之前创建项目时，直接使用vue add vant的方式引入，很方便，一键完成安装、引入、配置及使用。但是存在一个问题，就是版本较低，vue官方好像很久没有更新这个vant了。所以决定手动安装引入配置。其次是引入 vant.js import 然后 Vue.use 在main.js中引入。其实也可以用vue add vant的方式一键部署后，再通过更换版本来完成版本更新的。以为这样就完了，结果就是样式不生效。原因就是缺少样式文件的引入。安装后，再启动，就成功了！会自动更换相关的连接。...
2022-08-13 14:28:13
5708
原创 前端滚动加载数据解决办法
在不想使用分页展示数据时，全部数据使用滚动加载，来避免大量数据造成的宕机风险。html模板上底部加标签，显示是否加载或者全部加载完成。这个应该是比较常见的滚动加载方案。相比虚拟列表来的简单。但是数据量特大时，可能会造成前端卡顿。...
2022-07-10 12:01:44
2055
原创 javascript的防抖节流方法
js的防抖节流方法，之前写过，现在在做后台数据滚动加载，触底方法需要用到，就再写一遍，记录一下，后续再用也方便找了。节流——保证一定时间内只调用一次应用场景：提交表单、高频的监听事件移动端，触摸移动就会发起请求将一定时间内的多个事件合并成一个防抖 —— 在固定的时间内，事件仅允许发生一次例如：在下面输入时，会立刻发送请求，防抖就是限制在输入结束后2秒再发送请求以上两个方法比较常用，借用了闭包的原理，记录一下。...
2022-07-10 10:53:42
339
原创 收藏javascript好用函数2022年新整理
一些简单而又实用的底层功能函数收集。陆续更新中。 // 共享onload 可以多个函数绑定 防止覆盖 随时可以添加任意多个 function addLoadEvent(fn){ let oldonload = window.onload; if (typeof window.onload != 'function'){ window.onload = fn; }else{ window.on
2022-05-26 10:16:39
141
原创 前端使用vuetify库UI时，页面加载很慢的问题解决方法
当vue的ui使用了vuetify，在生产环境后期出现大白屏，加载很长时间后，才出来。进控制台，有库出现404丢失情况，如下图：查看vuetify的引入情况，如下：import Vue from 'vue';import Vuetify from 'vuetify/lib/framework';Vue.use(Vuetify);export default new Vuetify({ icons: { iconfont: 'mdiSvg', // 'mdi'
2022-05-26 09:43:33
1099
1
原创 vue的router编程式导航进去后再点击报错解决办法
当使用vue-router编程式导航时，二次进入，即重复点击就会报错：[Vue warn]: Error in v-on handler (Promise/async)，界面如下：因为router.push的promise回调问题。试着重新push方法如下：//重写push方法前, 先备份一下let originPush = VueRouter.prototype.push;//第一个参数: 告诉原来的push方法 你往哪里跳转VueRouter.prototype.push = fun
2022-04-15 10:30:01
1242
原创 mysql中的字符串连接符
以前用SQL Server 连接字符串是用“+”，现在数据库用mysql，写个累加两个字段值SQL语句居然不支持"+"，郁闷了半天在网上查下，才知道mysql里的+是数字相加的操作，连接字符串是CONCAT函数例：UPDATE notice SET readers = CONCAT(readers, ', $reader') where id = $nid ...
2022-04-09 12:38:08
4881
原创 linux服务器LAMP框架下SSL证书安装问题(已解决)
Linux下apache服务器安装SSL证书其实很简单，就是放置证书文件，修改服务器配置文件即可。但我这个服务器始终未成功。最后历经几天折腾，终于成功了。下面说说过程。这台Linux服务器apache的配置文件在httpd下，这服务器配置的有多ip，多站点，站点比ip多。主配置文件conf下httpd.conf，引入了conf.d下的全部配置文件，ssl配置文件在conf.d下。正常就是在httpd.conf中引入模块，ssl配置文件里加入证书位置及站点信息。反复修改失效；合并了多个子配
2022-04-06 09:43:46
283
原创 JavaScript获取后端json数据eval转换报错问题解决方法
通过ajax或者axios获取后端text形式json数据时，在使用前，需要转换成js的对象，有2种方法：一、使用JSON.parse来回转换，会经常报错，不推荐。二、使用eval强制转换。会偶尔报错。1、当数据是{}形式，可能就报错了，解决办法是，在字符外包裹()小括号来解决；2、当数据里面有换行符时，上面加小括号的方法也不适用，就需要对字符串进行处理，如下：eval("(" + res.data.replace(/\n/g,'') + ")");至此，问题完美解决！...
2022-03-07 10:42:22
2624
原创 什么是方法链，如何使用方法链，参考用例
如果我们知道类/对象的用户将一起使用多个函数，那么方法链是一种很有用的技术。先看原始方式class Player { constructor (name, score, position) { this.position = position; this.score = score; this.name = name; } setName(name) { this.name = name; } setPosition(position) {
2022-03-07 10:30:31
357
原创 js的await同步使用方法通过案例详解
先用settimeout和promise模拟异步function one(){ return 'I am one'}function two(){ setTimeout(()=>{ return 'two' },1000)} //改写two()function four(){ return new Promise( (resolve, reject)=>{ setTimeout(() => {
2022-03-04 13:34:03
1109
原创 call和apply详解-利用借充电宝模拟用法
javascript的这两个方法使用，假设对象是人，充电宝是方法，一个人有充电宝，另外一个人没有，如果借用呢，这里就用到了callconst steven = { name: 'steven', phoneBattery: 70, charge: function (level) { this.phoneBattery = level }}//steven有充电宝const becky = { name: 'becky', pho
2022-03-04 13:25:22
375
原创 如何使用Object.assign覆盖原对象默认属性
使用了es6的扩展符...原始方法const createButton = ({title, color, disabled, padding}) => { const button = {}; button.color = color || '#333'; button.disabled = disabled || false; button.title = title || ''; button.padding = padding || 0; return bu
2022-03-04 13:20:22
490
原创 js如何调用BOM接口发送桌面通知
只需要浏览器开着，不管在不在激活状态，都可以直接调用桌面的右下角通知，如下图代码如下：function doNotify(title, options = {}, events = {}) { const notification = new Notification(title, options); for (let event in events) { notification[event] = events[event]; }}functio
2022-03-04 13:00:35
248
原创 如何使用promise避免回调地狱
一、原始使用callback的回调地狱const getSocials = (callback) => { setTimeout(() => { callback({socials: {youtube: 'youtube.com/CodeWithAhsan', twitter: '@codewith_ahsan'}}); }, 1500);}const getBooks = (callback) => { setTimeout(() =&
2022-03-04 12:51:11
309
原创 js的toString方法详解，可以实现获取随机字符串
toString()方法 1、返回一个数字对应的字符串 2、返回一个表示该对象的字符串 3、检测对象类型 Object.prototype.toString()方法 返回对象的类型字符串，可用来判断一个值的类型 不能直接用toString()以防被对象重写 用call方法...
2022-03-04 12:35:35
843
原创 一个例子来看promise异步的执行顺序
通过settimeout来对比异步的执行顺序console.log(1)setTimeout(() => { console.log(2) new Promise((resolve)=>{ console.log(3) resolve() }).then(()=>{ console.log(4) })}, 0);new Promise((resolve)=>{ console.lo
2022-03-04 12:26:57
63
原创 promiseAll方法是如何实现的呢
用一个重写来还原这个方法：Promise._all = function(arr){ return new Promise( (resolve,reject)=>{ const res = [] let count = 0 for(let i=0;i<arr.length;i++){ arr[i].then( data=>{ res[i] = data
2022-03-04 11:17:00
119
原创 localStorage的存储空间有多大
localhostStorage的键也占空间,如果键不占空间,加字符应该不会报错报错,就说明空间已超5M了,注意是字符串长度const charTxt = 'a';let count = (2.5 * 1024 * 1024);let content = new Array(count).fill(charTxt).join('');let key = new Array(count).fill(charTxt).join('');localStorage.clear();try {
2022-03-04 11:15:08
3191
原创 在javascript中使用yield
yield 关键字用来暂停和恢复一个生成器函数（(function* 或遗留的生成器函数）。/** * 在控制台每隔1秒，依次输出 * 0,1,2,3,4 *///延迟1秒返回nfunction delay(n){ return new Promise(resolve => { setTimeout(() => { resolve(n) }, 1000); })}//方案一： async + awa
2022-03-04 11:12:04
2870
原创 javascript通用的事件侦听
兼容浏览器的通用事件侦听函数，如下：const EventUtils = { // 视能力分别使用dom0||dom2||IE方式 来绑定事件 // 添加事件 addEvent: function(element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEve
2022-02-25 15:25:23
127
原创 javascript 创建对象的几种方式总结
我们一般使用字面量的形式直接创建对象，但是这种创建方式对于创建大量相似对象的时候，会产生大量的重复代码。但 js和一般的面向对象的语言不同，在 ES6 之前它没有类的概念。但是我们可以使用函数来进行模拟，从而产生出可复用的对象创建方式，我了解到的方式有这么几种：（1）第一种是工厂模式，工厂模式的主要工作原理是用函数来封装创建对象的细节，从而通过调用函数来达到复用的目的。但是它有一个很大的问题就是创建出来的对象无法和某个类型联系起来，它只是简单的封装了复用代码，而没有建立起对象和类型间的关系。（2）第
2022-02-25 14:52:01
567
原创 js实现数组随机排序的几种方法
// （1）使用数组 sort 方法对数组元素随机排序，让 Math.random() 出来的数与 0.5 比较，如果大于就返回 1 交换位置，如果小于就返回 -1，不交换位置。function randomSort(a, b) { return Math.random() > 0.5 ? -1 : 1;}// 缺点：每个元素被派到新数组的位置不是随机的，原因是 sort() 方法是依次比较的。// （2）随机从原数组抽取一个元素，加入到新数组function randomS.
2022-02-25 14:47:11
3628
原创 利用javascript给浮点数添加千位分隔符
利用javascript给浮点数每三位添加逗号，使用如下正则即可：function format(number) { return number && number.replace(/(?!^)(?=(\d{3})+\.)/g, ",");}
2022-02-25 14:31:29
616
1
原创 javascript里三种获取原型的方法汇总
在js中获取原型，可以通过以下三种方式：1、p.proto2、p.constructor.prototype3、Object.getPrototypeOf(p) //推荐，规范写法
2022-02-25 14:15:41
1875
原创 vuetify的radio等UI样式未生效解决办法
当使用v-radio时，无样式出现，如下图：仅需要：更改你的字体库，需要在实例化过程中添加 iconfont选项。export default new Vuetify({ icons: { iconfont: 'mdiSvg', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4' || 'faSvg' },})即可解决问题，如下：...
2022-02-24 11:03:17
713
转载 新一代的状态管理器Pinia下一代Vuex
前言Pinia.js 是新一代的状态管理器，由 Vue.js团队中成员所开发的，因此也被认为是下一代的 Vuex，即 Vuex5.x，在 Vue3.0 的项目中使用也是备受推崇。Pinia.js 有如下特点：完整的 typescript 的支持； 足够轻量，压缩后的体积只有1.6kb; 去除 mutations，只有 state，getters，actions（这是我最喜欢的一个特点）； actions 支持同步和异步； 没有模块嵌套，只有 store 的概念，store 之间可以自由使
2022-01-26 09:42:42
404
原创 在vue中使用element的el-table和表单元素el-input或el-radio时失效的问题解决办法（已解决）
el-table嵌套表单元素时，表单元素失效，也就是输入和点击无效时，是因为数据更新失效、试图更新失效。原因可能是因为加入了新的对象属性，或者数据层级太深，官网有提到前面的情况，新加入的对象属性变更不会带来试图更新。解决办法就是在表单元素上加入change方法：<el-table-column label="见面"> <template slot-scope="scope"> <el-radio-group v-model="scope.row.se
2022-01-23 11:09:57
6891
3
原创 TCP、UDP协议的区别
常用协议IP协议是一个分组交换，它不保证可靠传输。而TCP协议是传输控制协议，它是面向连接的协议，支持可靠传输和双向通信。TCP协议是建立在IP协议之上的，简单地说，IP协议只负责发数据包，不保证顺序和正确性，而TCP协议负责控制数据包传输，它在传输数据之前需要先建立连接，建立连接后才能传输数据，传输完后还需要断开连接。TCP协议之所以能保证数据的可靠传输，是通过接收确认、超时重传这些机制实现的。并且，TCP协议允许双向通信，即通信双方可以同时发送和接收数据。TCP协议也是应用最广泛的协议，许多高级
2022-01-23 09:29:33
1349
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人