weixin_55182699的博客

原创 Vue-自定义指令（v-permission）

vue除了默认设置的核心指令( v-model ，v-show，v-if ), Vue 也允许注册自定义指令。自定义指令就是一种有效的补充和扩展，不仅仅可用于定义任何dom操作，并且是可以复用的。目前项目刚好是有在做按钮权限方面的功能，我实现的方式就是用自定义指令（v-permission）来实现的。

原创 对象数组去重最简单的方法-map

我们知道ES6中有Set方法可以对数组进行去重，但是如果数组里的子集都是对象的话就无法实现了，那这个时候我们有一个简单的方法能够实现。

原创 原型与原型链和__proto__与prototype的区别

原型原型的概念：每一个javascript对象创建的时候，就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型中“继承”属性。粗俗的说就是Javascript中所有的对象都是Object的实例，并继承Object.prototype的属性和方法，也就是说Object.prototype是所有对象的爸爸，下面三点概念需谨记：1.所有引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象2.所有函数都有一个prototype(原型)属性，属性值是一个普通的对象

原创 Promise的与SetTimeout执行顺序

最近遇到的一个笔试的题目直接上代码 setTimeout(() => { console.log(3) }, 1000); new Promise((res,rej)=>{ console.log(2) setTimeout(() => { console.log(4) res() }, 1000); }).then(res=>{ console.log(

原创 重绘和回流有什么区别（CSS）

原创 git：SSL证书问题：无法获取本地颁发者证书

一：SSL证书问题出现的原因：SSL证书的主要目的是确认身份验证，并通过参考HTTPS协议确保服务器与客户端之间安全地交换信息。只有当您拥有由证书颁发机构直接或间接签名的有效根证书时，这才有可能。但是，当根证书无法正常工作时，尤其是在SSL客户端发出HTTPS请求且在此期间，客户端必须共享SSL证书以进行身份验证时，会出现“无法获取本地颁发者证书的错误”二：修复办法：1.临时修复：可以禁用SSL证书的验证。但是，我们建议您谨慎使用它，因为它可能会降低网站的安全性。使用以下命令来禁用对SSL证

原创 BFC是什么？BFC（块级格式化上下文）详解

BFC - Block Formatting Context 块级格式化上下文 BFC的定义，在官方文档到中，是这么介绍BFC的：一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，那这句话到底是什么意思呢？我们用代码来说明<div class="d1" id="BFC1"> <div class="d2"></div> <div class="d3"></div> <d

原创 JS 加号（+）的作用 一元运算符

在 JavaScript 中，加法的用法有两种情况:1.数字求和，字符串拼接如果都是数字的情况就会和数学的+号一样做一个求合的功能，如果其中有字符串类型就会变成字符串的拼接 let a = 990 let b = 89 let c = '90' console.log(a + b) // 数字1079 console.log(a + c) // 字符串990902.一元运算符在'+'号运算符作为一元运算符时，Expression将进行ToN..

原创 javaScript的宏任务与微任务总结

宏任务与微任务

原创 判断一个变量是否是数组的方法

1.instanceof ，原型判断，写法：变量 instanceof Arrayarr instanceof(Array)2.__proto__，原型判断，写法：变量.__proto__ === Array.prototype console.log(arr.__proto__ === Array.prototype)3.constructor，原型判断，写法：变量.constructor === Array console.log(arr.constructor =

原创 JS中map、filter、foreach区别

1.map()会根据提供的函数对指定序列做映射。第一个参数 function 以参数序列中的每一个元素调用 function 函数，返回包含每次 function 函数返回值的新列表，不会修改原来的数组。let arr = [1, 22, 36, 56]; let a = arr.map((item) => { if (item === 36) {return item} return null }); console.log(a, "-",.

原创 CSS 画三角形、半圆、扇形、

1.三角形：元素宽高设置为0，通过border属性来设置，让其它三个方向的border颜色为透明或者和背景色保持一致，剩余一条border的颜色设置为需要的颜色，三角形的方向就设置反方向的border。.down { width: 0; height: 0; border: 100px solid transparent; border-top-color: red;}.up { width: 0; height: 0; border: 1

原创 获取对象属性（key）值 js

下面是data里定义的一个对象 return { obj:{ id:225, name:"buy", type:"1" } };1.for infor(var key in this.obj){ console.log(key) }打印出来的结果如下：这个时候我们需要拿哪个key做相应的操作或者拿相应的key值key使用这个方法2.Object.keys()l

原创 cron表达式详解 quartz

1.一个cron表达式最少有5个空格来分割时间元素，总共有7个元素，分别如下：① 秒（0-59）② 分钟（0-59）③ 小时（0-23）④ 天（月的第几天）（0-31，但是你需要考虑你月的天数）⑤ 月（0-11）⑥ 天（星期几）（1-7 1=SUN 或 SUN，MON，TUE，WED，THU，FRI，SAT）⑦ 年份（1970-2099）说明：每个元素可以是一个具体的值（如6） 一个连续区间（9-12）， 一个间隔时间（0/5）（表示从0开始每隔5，写到哪个元素就表示间隔的是哪个元素，

原创 Vue 组件生命周期（有父子组件的情况）

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。生命周期主要分为三个阶段：一：挂载阶段beforeCreate:此阶段为实例初始化之后,此时数据观察和事件机制还没有形成,不能获取到dom节点，举个栗子：可以在这加个loading事件；created：此阶段的vue实例已经创建,仍不能获取DOM 节点.把vu

原创 VUE 动态绑定背景图片（:style）需要用require包裹

vue 动态绑定图片路径

原创 CSS 不包括等冷门却有用的属性

1.css3选择器，不包含某个类名比如给没有“single”类名的span加上北景颜色-:not(类名)<style scoped>span:not(.single) { background: #ff1464;}</style>2.当兄弟元素中只有自己一个p时（包括本身）的样式p:only-of-type{ background:yellow; }3.当元素为空时的样式p:empty{ background:

原创 @hook-监听子组件生命周期（vue）

vue-hooks是简化组件定义、复用状态逻辑的一种最新尝试，且结合 Vue 实例的特点提供了适用的 Hooks，hooks.js中的this为当前vue实例1.@hook的使用在子组件用@hook：+对应的子组件生命周期，再给定一个方法如下的‘moutedEvent’，那我们就能把我们的业务逻辑写在方法里面即可。<template> <div> <Chilid @hook:mouted="moutedEvent"></Chilid>

原创 TypeScript报错解决-//@ts-ignore

项目中最近切换了TypeScript，运行时没有问题的，但是打包的时候会报很多的错，最后我们是在报错的文件上方加上了'// @ts-ignore'隐藏了ts文件的报错，建议我们在使用的时候在这句代码给定相应的注释，解释一下为什么使用。if (this.type) { // @ts-ignore：无法被执行的代码的错误 console.log(this.type);}...

原创 localForage-改进的离线存储

1.什么是localForagelocalForage 是一个 JavaScript 库，通过简单类似localStorageAPI 的异步存储来改进你的 Web 应用程序的离线体验。它能存储多种类型的数据，而不仅仅是字符串。localForage 有一个优雅降级策略，若浏览器不支持 IndexedDB 或 WebSQL，则使用 localStorage。在所有主流浏览器中都可用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile）。localForage..

原创 JS中int类型数字超过最大值的问题

问题：在项目中遇到一个奇怪的问题，我们在后台获取到一个id是数字类型的，然后再进行页面操作时通过这个id去查其所绑定的数据时，一直查不到数据后台报错；问题原因：后面经过自己的对id的比对之后发现我们获取到的id与传给后台的值竟然是不一样解决办法：在获取到数字类型的id之后先将id转成字符串再传入后台，问题就解决了。 data() { return { number: 59588178895489589, }; }, created() { conso

原创 JS 数组转字符串的4种方法

前言：在项目过程中，我们会有很多情况会遇到我们拿到的的是一个数组的情况，但是后台可能需要的是一个以“,”分割的字符串，那我们有哪些方法进行转换呢？1.我们首先for循环这个数组，将需要的值加","拼接起一个字符串，这个时候的字符串会以‘,’结尾，我们再用substring对这个字符串进行截取去掉最后的那个‘,’得到想要的值2.toString()方法能够把每个元素转换为字符串，然后以逗号连接输出显示JavaScript会以迭代的方式调用toString()方法把所有数组都转换为字符串。...

原创 动态表单（form）的实现

前言 在做一些数据展示类的系统项目的时候，我们会遇到一些项目有很多需要展示的表单的内容，如果是已经设定好的字段，我们可以直接按照需求上来实现。但是在一些大的项目页面上展示的内容是通过前面的配置页面动态生成的情况我们如何是实现呢？实现方法我们以vue的项目为例，其他框架的实现的方法大体相同的，只是写法有些不一样...

原创 window10 vue指令禁止运行，在此系统上禁止运行脚本解决办法

vue : 无法加载文件 C:\Users\73167\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。所在位置 行:1 字符: 1+ vue init webpack+ ~~~ + CategoryInfo : SecurityError: (:) []，PSSecuri...

原创 事件代理（事件委托）

事件代理（事件委托）的原理：利用冒泡机制把所需要相应的事件绑定到外层，就是不给每个子节点单独设置事件监听器，而是设置在其父节点上，然后利用冒泡原理设置每个子节点实现例子：<body> <ul id="list"> <li>1111111</li> <li>22222222</li> <li>43333</li> </ul>

原创 webpack Plugin 和 Loader 的区别

webpack是一个模块打包器（module bundler），提供了一个核心，核心提供了很多开箱即用的功能，同时它可以用loader和plugin来扩展。 Loader： 用于对模块源码的转换，loader 描述了 webpack 如何处理非 javascript 模块，并且在 buld 中引入这些依赖。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或者将内联图像转换为 data URL。比如说：CSS-Loader，Style-Loader 等。

原创 TCP三次握手过程理解

第一次握手：建立连接时，客户端发送syn包（syn=j）到服务器，并进入SYN_SENT状态，等待服务器确认；SYN：同步序列编号（Synchronize Sequence Numbers）。第二次握手：服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISH

原创 如何搭建vue工程，步骤

一：安装node.js1、下载地址为：https://nodejs.org/en/2、检查是否下载成功：在菜单输入命令“cmd”，命令行输入“node -v”如果有版本号就说明安装成功二：搭建Vue