Scorpio_sky的博客

原创 Vue里面计算属性computed带参数的使用方式

最后附上结果图片及完整测试代码< template > < h2 > 计算属性是否带参 </ h2 > < div > 不带参：result -> {{ result }} </ div > < br /> < div > 参数为5，但使用错误会报错：errResult(5) < br /> < br /> 报错提示 errResult is not a function <!

原创 关于Echarts中折线图两侧会出现多余空白的解决方案

使用Echarts的折线图开发统计图中，发现左右两侧会留白。最后翻文档，发现在XAxis配置对象中有一个配置项。尝试使用grid配置，却不起任何作用。这玩意默认在坐标轴两边会留白。

原创 关于在element-ui中同时使用el-input的@blur和@keyup.native.enter事件时所产生的二次函数调用问题

在项目中使用el-input，输入内容完成后，失去焦点@blur()或按下回车后@keyup.native.enter即调用函数，此。回车键事件不调用函数，而是直接触发blur事件，这样函数只会被执行一次。，也就是说使用回车键@keyup.native.enter事件的话，只是blur事件还好，toLook函数只被触发一次。，导致函数被执行了两次。

原创 Vue开发在作用域插槽中使用多个根标签提示[vue/no-multiple-template-root] The template root requires exactly one element.

2、VsCode打开设置-搜索 eslint，找到图中Vetru > Validation: Template这项。如图，父组件中使用作用域插槽时，如果直接在template下直接书写多个根标签，编辑器就会报错提示。4、重启VsCode后再尝试，就没有报错了。

转载 Vue中挂载自定义函数到全局的三种方式

在Vue项目中，多次被使用的一些组件会被封装成全局组件在入口文件中引入并全局注册，这样一来每个页面/父组件中都能随时使用这些组件。就像这类全局组件一般，当自己有一些函数想要封装进全局以便每个页面/组件都能随时调用的话，该如何封装则有不同的几种思路。网上自己查了下，他人总结了3种方法，转载以便学习。

原创 关于ES6 export default 和 import语句中的解构赋值

结果发现报错，网上搜索了一番，发现需要多一个步骤才能够正常使用 ↓。在引入时，本打算就以解构的方式这么处理 ↓。

原创 关于如何处理设置VSCode在DOM中打花括号{}}会多一个边的情况

VSCode中，在DOM结构中插入花括号时，经常会出现下图这种左半边花括号打出来后，右半边花括号自动补了两个的情况 {}}频繁遇到这种现象还是挺讨厌的，查了下，发现设置里可以解决此现象。找到下图选项，选择beforeWhitespace。选完后重启下VSCode，再试试就可以了~搜索 closing brackets。

原创 Vue-cli 5版本设置路径别名

【代码】Vue-cli 5版本设置路径别名。

原创 git常用操作（初始化、回滚、撤销、分支相关）

把暂存区的文件提交到仓库：git commit -m “提交信息”以当前分支为基础新建分支：git checkout -b。查看提交的历史记录：git log --stat。单纯地切换到某个分支：git checkout。推送当前分支最新的提交到远程：git push。拉取远程分支最新的提交到本地：git pull。克隆仓库：git clone 删掉特定的分支：git branch -D。添加文件到暂存区：git add -A。列举所有的分支：git branch。

原创 vscode中代码片段内，禁用代码提示

（快捷键启动设置-> （Ctrl + ,） or （Command + ,））回来看效果，index改名i，不出现代码提示了。这边将index改名为i，则出现了代码提示。生成后，默认预设点在index变量名上。vscode -> 首选项 -> 设置。比如下图，生成for循环的代码片段。1、我只想要修改变量名称后按。2、出现了代码提示时，按了。则会优先生成提示的代码。，找到如下选项，勾上。

原创 Npm、Yarn切换淘宝源

淘宝源默认源。

原创 【Npm】对已有代码项目npm install 报错，以及npm run serve 报错的原因

这其中的符号 ^ 代表在下载该依赖时，将自动下载大于等于其的版本。比如在这边代表的是，下载less时最低版本不会低于4.1.1，但也可能下载的版本过高导致报错。经过搜查后，发现是Node的版本过高导致，这边先把当前的node卸载，然后用nvm工具进行安装管理，解决如下，将 ^ 去掉，只下当前版本，确保下载的依赖与项目所用依赖版本一致。在安装node进行npm install之后，内的某些依赖报错，似乎是版本过高的问题，

原创 JavaScript-Promise相关个人总结（Promise、async与await、JS异步回调的宏队列及微队列、Promise面试题）

目录Promise- 基本使用（new Promise）- Promise的resolve及reject方法（创建Promise对象的语法糖）- Promise.all（成功则返回所有promise对象的成功值，失败则返回失败对象的失败值）- ES11新增 Promise.allSettled（无论其中promise对象成功或失败，返回所有promise对象的返回状态及值）- Promise.race（返回第一个执行完毕的promise对象结果）- Promise的几个关键点* 改变promise状态* 指

原创 JavaScript中常见的内置错误及处理方式

目录常见的内置错误- Error，所有错误的父类型- ReferenceError，引用的变量不存在- TypeError，数据类型不正确的错误- RangeError，数据值不在其所允许的范围内- SyntaxError，语法错误错误处理- 捕获错误: try...catch- 抛出错误 throw常见的内置错误- Error，所有错误的父类型所有错误的父类型，一般常被主动用于throw错误输出- ReferenceError，引用的变量不存在// ReferenceErrorconsole.

原创 JavaScript ES7~ES11新增语法相关个人总结

目录ES7- includes- ** 幂运算ES8- async和await* async函数* await表达式- 对象方法扩展ES9- rest参数与spread扩展运算符- 正则扩展* 命名捕获分组* 正则断言* dotAll模式ES10- Object.fromEntries（二维数组或Map转为对象）- trimStart和trimEnd（去除字符串前面或后面的空格）- flat（多维数组转为低维数组）- flatMap（map函数功能 + 转换低维数组）- Symbol.prototype.d

原创 JavaScript ES6新增语法相关个人总结（四）

目录class 类- 基本使用- static 静态成员- 类继承 ES5- 类继承 ES6- class的get、set数值扩展对象方法扩展浏览器使用ES6模块化引入模块- 暴露方式（分别暴露、统一暴露、默认暴露）- 导入方式（通用方式、解构赋值、简便形式）- 创建入口文件导入class 类ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以

原创 JavaScript ES6新增语法相关个人总结（三）

目录Promise基础- 基本语法- then方法- 链式调用- catch方法Set（集合）- Set相关应用Map数据结构Promise基础- 基本语法代码例：// 实例化Promise对象const p = new Promise(function(resolve, reject){ setTimeout(function(){ let data = '请求成功的数据' // 请求成功，调用resolve resolve(data) // let err = '请求失败'

原创 JavaScript ES6新增语法相关个人总结（二）

目录第7种数据类型，Symbol- Symbol创建对象属性- Symbol内置的值迭代器，for...of- 基本使用及实现原理- 使用迭代器自定义遍历对象生成器函数- 生成器函数传参- 生成器函数-模拟请求数据第7种数据类型，SymbolSymbol 的值是唯一的，用来解决命名冲突的问题Symbol 值不能与其他数据进行运算Symbol 定义的对象属性不能使用for…in循环遍历，但是可以使用Reflect.ownKeys 来获取对象的所有键名 - 代码例：// 创建Symbollet

原创 JavaScript ES6新增语法相关个人总结（一）

目录数组及对象的解构新的声明字符串的方式 ``箭头函数- 箭头函数体中的this指向- 不能作为构造实例化对象- 不能使用 arguments 变量- 箭头函数的简写- 箭头函数总结函数形参默认值rest参数「...」扩展运算符扩展运算符的应用数组及对象的解构 - 代码例：// 数组的解构const arr = ['sky', 'jack', 'tom', 'mary']let [sky, jack, tom, mary] = arrconsole.log(sky) // 'sky'conso

原创 Vue响应式原理的解析过程

本文仅用于个人学习过程中的总结巩固html<div id="app"> {{name}} <!-- 发布者name属性内的订阅者1 --> {{name}} <!-- 发布者name属性内的订阅者2 --> {{name}} <!-- 发布者name属性内的订阅者3 --> {{age}} <!-- 发布者age属性内的订阅者1 --></div>jsconst app = new Vue({ el: '

原创 JavaScript中闭包的相关总结

目录1、认识闭包* 什么是闭包？* 如何产生闭包？* 如何查看闭包对象2、闭包的使用* 常见的闭包及闭包作用* 闭包的生命周期* 产生多个闭包3、闭包的缺点及解决方案4、面试题* 题1* 题1答案及解析* 题2* 题2答案及解析1、认识闭包* 什么是闭包？ - 代码例：// 什么是闭包function fn1() { // 定义fn1函数 let a = 2 // fn1函数体内声明变量a，值为2 let b = 'abc' // fn1函数体内声明变量b，值为'abc' let c

原创 JavaScript中对象的继承模式

目录前言1、原型链父子继承2、利用call函数继承3、原型链父子+call函数-组合继承前言阅读此文前需先掌握原型对象、原型链及call函数的使用方法JavaScript原型对象及原型链相关总结JavaScript中call、apply、bind的应用及函数中的this指向相关总结没问题的话就请往下看吧1、原型链父子继承我们都知道，实例对象可以使用其原型对象的一些方法但是如果有以下这么一种情况：我们自行创建了两个构造函数A和B，B的实例想要使用A的方法，这是否可行呢，看代码有两个构造

原创 JavaScript创建对象的几种模式相关总结

目录1、Object构造函数2、对象字面量3、工厂模式4、自定义构造函数5、自定义构造函数+原型对象前言这边整理一下几种创建对象的模式，并不存在哪个最好哪个不好之类的说法，每种模式都有着各自的优缺点及适用场景1、Object构造函数先创建空Object对象，再动态添加属性/方法适用于起始时不确定对象内部数据的场景缺点：语句过多 - 代码例：// Object构造函数，创建对象let p = new Object()p.name = 'sky'p.age = 18p.setNam

原创 JavaScript关于函数作用域的两道面试题

目录- 面试题1- 面试题1答案及解析- 面试题2- 面试题2答案及解析- 面试题1// 问题：请问以下代码的输出结果var a = 1function fn() { console.log(a)}function fn2(f) { var a = 2 f()}fn2(fn)- 面试题1答案及解析// 问题：请问以下代码的输出结果var a = 1function fn() { console.log(a)}function fn2(f) { var a

原创 JavaScript执行上下文（栈）及变量/函数提升相关总结

目录1、全局上下文2、局部上下文3、执行上下文栈*面试题*面试题答案及分析4、变量提升与函数提升原理解析*面试题*面试题答案及分析1、全局上下文先来看代码 - 代码例：// 全局上下文console.log(name) // undefinedfn() // 'fn()'let name = skyfunction fn() { console.log('fn()')}同样都是先输出后声明，为何变量为undefined，函数却能输出？这个问题的答案，在“变量提升与函数提升原理

原创 JavaScript原型对象及原型链相关总结

目录1、原型对象- prototype和constructor- 显式原型和隐式原型- 隐式原型的应用（原型继承）2、原型链- 原型继承详解1、原型对象- prototype和constructor任何函数都有一个属性prototype，该属性默认指向一个空对象，此对象即称为原型对象 - 代码例：function fn(){ }console.log(fn.prototype)// 以下为函数fn的原型对象// {// constructor: {...},// __pro

原创 JavaScript中call、apply、bind的应用及函数中的this指向相关总结

目录1、call、apply及bind的基本应用2、call、apply及bind的传参应用3、函数中的this指向1、call、apply及bind的基本应用 - 代码例：let obj1 = {name: 'sky'}let obj2 = { name: 'jack', getName: function(){ console.log('名字是 ' + this.name) }}// 直接调用obj2.getName() // '名字是 jack'// call调用obj2

原创 JavaScript 多个引用变量指向同一对象后的操作情况

目录- 例子1- 例子2- 例子3- 例子1多个变量指向同一引用对象，那么任一变量修改该引用对象的值后，其余变量接收的值也会改变 - 代码例：// 定义变量a为赋值对象let a = {name: 'sky'}// 定义变量b等于a，相当于把a保存的对象地址值，赋值给了b// 此时a和b指向的是同一个对象let b = a// 将变量b指向的对象属性age赋值为18b.age = 18// 由于指向对象为同一个，因此变量a指向对象属性age当然也是18console.log(a

原创 JavaScript中判断数据类型的一些方式及总结

判断数据类型的几种方式1、typeof2、instanceof3、===（全等）总结1、typeof返回数据类型的字符串表达 - 代码例：let a // 仅声明a，未赋值console.log(a, typeof a) // undefined 'undefined'a = 123 // a为数字console.log(typeof a) // 'number'a = 'hello' // a为字符串console.log(typeof a) // 'string'a = true /

转载 【转载】前端 好看实用的颜色大全（16进制）

原创 关于Vue.js基础部分的个人理解及杂记(v-if, v-else, v-model及修饰符)

本篇记录了一些个人对Vue.js基础使用方法的一些理解及总结，修饰符的部分或许显得不是那么重要，但抱着“或许哪天会用上”的想法，就一并记录了。目录1、关于v-if, v-else产生的现象及解决方案2、v-model 双向绑定- input值的绑定- 多个input绑定一个data属性3、v-model 修饰符- v-model.lazy- v-model.number- v-model.trim- 多个修饰符同时使用1、关于v-if, v-else产生的现象及解决方案现象：比如要切换两个inpu

原创 关于JavaScript常用的几个高阶函数(filter, map, reduce)

原本打算昨天发一篇博文，家里有事给忘了，今天发2篇吧，都是个人学习过程中的一些总结。目录1、filter2、map- 接口数据映射3、reduce操作用数据(纯数字数组):const nums = [10, 20, 111, 222, 444, 50, 453]1、filterfilter函数用来过滤满足指定条件的数组，调用时需要传入一个函数，该函数内部需要设立一个条件，并且能为该函数返回一个布尔值结果。返回数组nums中所有小于100的元素使用例：let newNums = nums.

原创 ES5及ES6常用对比及个人总结（var、let、const、对象字面量增强写法）

目录1、关于var和let- ES5 var- ES5 var 总结- ES6 let- ES6 let 总结2、关于const- 使用const的注意事项- ES6 const 总结3、ES6中对面字面量的增强写法- 属性的增强写法- 函数的增强写法1、关于var和letvar的设计可以看成JavaScript语言设计上的错误，但这种错误多半不能修复和移除，因为需要向后兼容，大概2008年左右，Brendan Eich就决定修复这个问题，于是他添加了一个新的关键字：let- ES5 varES5