weixin_46845202的博客

转载 vue props 默认值为数组或对象时报错

// 这些写时会报错 Type of the default value for 'record' prop must be a function props: { record: { type: Array, default: [] } } // 正确应该这样写// 因为vue规定，对象或数组默认值必须从一个工厂函数获取 props: { record: { type: Array, default: fun

原创 react 使用qs

1.qs.parse()将URL解析成对象的形式1 import Qs from 'qs';2 let url = 'method=query_sql_dataset_data&projectId=85&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0';3 Qs.parse(url);4 console.log(Qs.parse(url));输出结果1 {2 method:'query_sql_dataset_data',

原创 qs

qs.stringify()`和JSON.stringify()var a = {name:'hehe',age:10};qs.stringify序列化结果如下name=hehe&age=10而JSON.stringify序列化结果如下："{"a":"hehe","age":10}"qs.parse()和JSON.parseqs.parse()将URL解析成对象的形式let url = 'method=query_sql_dataset_data&projectId=8

原创 微任务与宏任务

执行顺序 34852event loop执行机制每个微任务都跟随上一个宏任务后面执行，当script整体代码执行完毕之后，执行执行后面的微任务，当一个循环结束，再执行下一个宏任务，直至全部执行完毕。执行顺序： 1、script start 2、script end 3、promise1 4、promise2 5、setTimeout例：promise为微任务，1和2为整体代码，当1和2执行完毕之后，执行微任务promise，然后再执行宏任务setTimeout...

原创 $attrs与$listeners

A组件B组件组件的

原创 $nextTick

this.$nextTick()方法主要是用在随数据改变而改变的dom应用场景中，vue中数据和dom渲染由于是异步的，所以，要让dom结构随数据改变这样的操作都应该放进this.$nextTick()的回调函数中。created()中使用的方法时，dom还没有渲染，如果此时在该钩子函数中进行dom赋值数据（或者其它dom操作）时无异于徒劳，所以，此时this.$nextTick()就会被大量使用，而与created()对应的是mounted()的钩子函数则是在dom完全渲染后才开始渲染数据，所以在moun

原创 render函数

render函数实现render函数插槽使用render函数修饰符

原创 仿京东密码输入框

此篇文章为早期转载，一直保存在我的有道云笔记上面，不记得原作者是谁，如原作者看见请留言，重新添加转载信息<template> <div class='am-payPwd' :id="`ids_${id}`"> <input type="password" readonly onfocus="this.removeAttribute('readonly');" m.

原创 css报错loader

如果是 常规 的，执行 npm install style-loader css-loader style-loader --save-dev 安装依赖就行。如果是 less 的，执行 npm install less less-loader --save-dev 安装依赖就行。如果是 sass 的，执行 npm install sass sass-loader --save-dev 安装依赖就行。或者（$npm intall sass-loader --save ; $npm install nod

原创 vue.$set方法

由于 Vue 会在初始化实例时进行双向数据绑定，使用Object.defineProperty()对属性遍历添加 getter/setter 方法，所以属性必须在 data 对象上存在时才能进行上述过程 ，这样才能让它是响应的。如果要给对象添加新的属性，此时新属性没有进行过上述过程，不是响应式的，所以会出想数据变化，页面不变的情况。此时需要用到$set。我们在项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性<template> <div class="h

转载 .env；.env.development,.env.production的相关介绍

vue中有关.env;.env.development,.env.production的相关介绍参考连接：https://blog.csdn.net/w405722907/article/details/947208681，关于文件名：必须以如下方式命名，不要乱起名，也无需专门手动控制加载哪个文件　　.env 全局默认配置文件，不论什么环境都会加载合并　　.env.development 开发环境下的配置文件　　.env.production 生产环境下的配置文件2，关于内容　　注意：属性名必

原创 vue 2.0配置less

build目录下webpack.base.conf.jsutils.js文件里配置exports.cssLoaders里添加function generateSassResourceLoader() { var loaders = [ cssLoader, // 'postcss-loader', 'less-loader', { loader: 'sass

原创 vue3.0 less全局配置

安装npm install style-resources-loader vue-cli-plugin-style-resources-loader less-loader less -S第一种方法（推荐）// vue.config.js文件中的配置const path = require('path');module.exports = {pluginOptions: { 'style-resources-loader': { preProcessor: 'less',

原创 事件冒泡、事件捕获和事件执行顺序

**早期存在有道云笔记中，没记住原创作者地址，原创作者看到请留言，改成转载**1事件传播——冒泡与捕获　　默认情况下，事件使用冒泡事件流，不使用捕获事件流。然而，在Firefox和Safari里，你可以显式的指定使用捕获事件流，方法是在注册事件时传入useCapture参数，将这个参数设为true。概念：事件冒泡：事件最开始由最具体的元素接收（文档层次中嵌套最深的那个节点），然后逐级向上传播最不具体的节点（document）。事件捕获：事件由最不具体的元素接收，最后传播至最具体的元素。<

原创 async await

1. async 和 await 在干什么async 是“异步”的简写，而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。await 只能出现在 async 函数中。如果 await 只能出现在 async 函数中，那这个 async 函数应该怎么调用？如果需要通过 await 来调用一个 async 函数，那这个调用的外面必须得再包一个 async 函数，然后……进入死循环。

原创 函数传参html标签转义

转义function HTMLEncode(html) { var temp = document.createElement("div"); (temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html); var output = temp.innerHTML; temp = null; return output; }反转义function HTMLDe

原创 http和https

什么是HTTP?超文本传输协议，是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据，互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准。设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法。什么是HTTPS？《图解HTTP》这本书中曾提过HTTPS是身披SSL外壳的HTTP。HTTPS是一种通过计算机网络进行安全通信的传输协议，经由HTTP进行通信，利用SSL/TLS建立全信道，加密数据包。HTTPS使用的主要目的是提供对网站服务器的身份认证，同时

原创 数组之间交集、差集、并集、补集

filter取两个数组中相同的值let arr1 = arr.filter((item, i) => arr2.includes(item))

原创 修改数据2个为一组

var arr = []; var data = [ { name: 'abc1' }, { name: 'abc2' }, { name: 'abc3' }, { name: 'abc4' }, { name: 'abc5' }, { name: 'abc6' }, { name: 'abc7' }, { name: 'abc8' }, { name: 'abc9' ..

原创 可选链操作符

可选链操作符是一个新的js api，它允许读取一个被连接对象的深层次的属性的值而无需明确校验链条上每一个引用的有效性。let arr = res && res.data && res.data.list同上 let arr = res?.data?.listlet arr = res && res.data || [] let arr = res?.res?.data ?? []这个??的意思是当左边的值为null或undefained的时

原创 jquery方法传对象报错

案例：js通过拼接字符串的方法传参报错JSON.stringify(limitArr[i]).replace(/"/g, '&quot;')

原创 封装深拷贝方法

function copy(obj) { let res = obj instanceof Array ? [] : {}; for (const [k, v] of Object.entries(obj)) { res[k] = typeof v == 'object' ? copy(v) : v; } return res;}

原创 获取年月日

原创 对象去null

var arr = [{ a: 1, b: 2, c: null }] arr.map(r => { for (l in r) { if (!r[l]) { r[l] = '' } }; return r })

转载 数组排序与flat方法

数组排序arr2 = [13, 24, 51, 3];arr2.sort(compare); // [3, 13, 24, 51]function compare(a,b){ return a-b;}降序function compare(value1, value2) { if (value1 < value2) { return 1; } else if (value1 > value2) { return -1; } else { return 0;

原创 手机号显示省略号

function starPhone(phoneNum) { let str = String(phoneNum), strLen = str.slice(-8, -4); return str.replace(strLen, "****"); }

原创 动态日期

var t = null; t = setTimeout(time, 1000);//开始运行 function time() { // 清除定时器 clearTimeout(t); dt = new Date() var y = dt.getFullYear(); var mt = dt.getMonth() + 1; var d.

原创 天/时/分/秒倒计时

var timeout = setInterval(() => { var laterDate = new Date(finishTime).getTime() var nowDate = new Date().getTime() var time = laterDate - nowDate if (time <= 0) { timeShop()

原创 监听localStorage变化

<script> var orignalSetItem = localStorage.setItem; localStorage.setItem = function (key, newValue) { var setItemEvent = new Event("setItemEvent"); setItemEvent.key = key; setItemEvent.newValue ...

原创 获取浏览器分辨率

function redirectPage() { var wjb51 = screen.width; var hjb51 = screen.height; var navigator =window.navigator.appVersion alert("经系统检测，你的屏幕分辨率为 " + wjb51 + "*" + hjb51 ); alert(navigator,'navigator');} redirectPage()

原创 js获取url参数

function urlFn(url, name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var t_len = url.length var len = url.indexOf('?') var para = url.substr(len, t_len) var r = para.substr(1).match(re

原创 函数节流和函数防抖

案例：问题原因：input事件每输入一次就会调用一次事件，使用函数防抖可以控制oninput事件的频繁触发函数防抖：function debounce(fn, wait) { var timer = null; return function () { var context = this var args = arguments if (timer) { clearTimeout(timer); timer =