笔记
易函123
我知道吹过的牛b,也会随青春一笑了之!!
展开
-
vue3.0配置vue-i18n
项目安装vue-i18n需要安装最新版的vue-i18nnpm install vue-i18n@next --save或者用yarnyarn add vue-i18n@next --save安装完成之后,可以看一下package.json文件;看是否是最新版的vue-i18n,我安装的是9.1.7。在项目src文件夹中新建lang文件夹新建lang文件夹,在lang文件夹中新建三个js文件:zh-CN.jsmodule.exports = { header:{ text:原创 2021-09-01 10:28:29 · 938 阅读 · 0 评论 -
JavaScript数据类型
JavaScript数据类型JavaScript基本数据类型/原始数据类型/值类型(六种)NullUndefinedStringNumberBooleanSymbol注:Symbol 是 ES6 引入了一种新的原始数据类型,表示独一无二的值。注:在es10中加入了原始数据类型BigInt,现已被最新Chrome支持console.log(BigInt) // ƒ BigInt() { [native code] }console.log(typeof 1n) // bigi原创 2021-08-11 17:49:06 · 151 阅读 · 0 评论 -
ES6Set和Map数据结构
概览Set类似于数组,但是成员的值都是唯一的,没有重复的;Set本身是一个构造函数,用来生成Set数据结构;不能区分 +0,-0;认为NaN不等于NaN;不能区分对象,认为两个对象总是不相等的;不能区分数组,认为两个数组总是不相等的;Set的基础和数组去重let arr = [2,3,4,5,1,'1',1,undefined,undefined,'undefined',null,NaN,NaN,+0,-0,{},{},[],[]];function unique(arr){ r原创 2021-04-19 20:08:00 · 134 阅读 · 0 评论 -
ES6 Symbol
概览const mySymbol = Symbol('mySymbol');console.log(mySymbol); // Symbol(mySymbol)console.log(mySymbol === Symbol('mySymbol')); // falseconsole.log(typeof mySymbol); // 'symbol'基本数据类型SymbolES6 六种基本数据类型: String、Number、Boolean、Null、Undefined、SymbolES6原创 2021-04-14 19:50:36 · 780 阅读 · 1 评论 -
js封装日期格式化函数
// 封装日期格式化函数const date = new Date('2021-4-12 10:22:22');function dateFormat (date, format = 'YYYY-MM-DD HH:mm:ss') { const config = { YYYY: date.getFullYear(), MM: date.getMonth(), DD: date.getDate(), HH: date.getHour原创 2021-04-13 20:28:04 · 237 阅读 · 0 评论 -
原生js时间戳获取和转换
时间转变为时间戳的方法汇总const date = new Date('2021-4-12 08:22:22');console.log(date); // Mon Apr 12 2021 08:22:22 GMT+0800 (中国标准时间)console.log(date * 1); //1618186942000console.log(Number(date)); // 1618186942000console.log(date.valueOf()); // 1618186942000co原创 2021-04-13 20:24:41 · 268 阅读 · 0 评论 -
自适应好用的一个css
主要是利用cssmax-width:min-content如下代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style原创 2021-04-12 19:18:05 · 79 阅读 · 0 评论 -
ES6五种遍历对象属性的方式
ES6五种遍历对象属性的方式function allObj(){ this.name = '张三'; // 自有属性 this.age = '12'; // 自有属性 this.invisible = { enumerable: false, value: 'hello' }, this.invisible = { enumerable: false, value: 'hello' }}allObj.prototype.disEnum = {原创 2021-04-12 19:14:30 · 1541 阅读 · 0 评论 -
ES6对象属性名简洁表示法和表达式、对象新方法、属性的遍历
概览对象属性的简洁表示法ES6允许直接写入变量和函数作为对象的属性和方法。ES6允许在对象中只写属性名,不写属性值。let foo = 'bar';let baz = {foo};console.log(baz); // {foo:'bar'}// same aslet baz1 = {foo:foo}console.log(baz1); // {foo:'bar'}let first = 'Jone';let last = 'Doe';let obj = {first,las原创 2021-04-08 19:37:27 · 1868 阅读 · 0 评论 -
ES6数组扩展运算符(Rest+Spread)、类方法、原型方法
概览ES6引进了一些新的数组方法。扩展运算符(Spread)+剩余操作符(Rest)含义: 扩展运算符(spread)是三个点...,它如同rest参数的逆运算,将一个数组转为用逗号分隔的参数序列。剩余操作符提取数组,用于剩余参数和结构。扩展操作符将数组元素转换成函数调用的参数或者数组字面量的元素。console.log(...[1, 2, 3]); // 1 2 3console.log(1, ...[2, 3, 4], 5); //1 2 3 4 5Rest(函数参数) 和 S原创 2021-04-06 20:16:32 · 454 阅读 · 2 评论 -
var/let/const、块级作用域、TDZ、变量提升
概览ES6 新增了两个定义变量的关键字:let 与 const,它们几乎取代了 ES5 定义变量的方式:var。let是新的var,const简单的常量声明。function f() { { let x; { // okay, block scoped name const x = "sneaky"; // error, const x = "foo"; } // error, already declared in b原创 2021-03-30 20:15:52 · 153 阅读 · 0 评论 -
89版本的chrome不支持less deep样式穿透
问题chrome版本号89.0.4389.90,不支持less的/deep/样式穿透解决既要照顾以前的版本,又要兼容新版本,建议写两种css样式.main{ .el-dialog__headerbtn{ top:-5px!important; right:0px!important; } /deep/.el-dialog__headerbtn{ top:-5px!important; right:0px!important; }}原创 2021-03-29 21:40:11 · 894 阅读 · 0 评论 -
前端利用XMLHttpRequest读取本地文本文件
问题前端常见是通过input按钮上传读取文件信息,此时知道本地文件路径需要直接js读取本地文件内的信息注意本地测试,需要解决本地浏览器跨域问题,如:可查看此链接解决:解决本地浏览器运行项目是的跨域问题解决利用XMLHttpRequest获取到文件的信息。/** * XMLHttpRequest.open() 初始化请求参数 * XMLHttpRequest.send() 发送网络请求 * XMLHttpRequest.onload() 监听请求结果 * XMLHttpReque原创 2021-03-09 22:43:53 · 8335 阅读 · 0 评论 -
三大样式穿透
问题用到很多vue常用的组件库(element, vant, vuetify),虽然配好了样式但是还是需要更改其他的样式解决三大样式穿透 >>> , ::v-deep , /deep/在style经常用scoped属性实现组件的私有化,所以才需要样式穿透需要注意:( >>> 只作用于css::v-deep 只作用于sass/deep/ 只作用于less示例:1<style lang="scss" scoped>.conBox原创 2021-03-09 22:08:13 · 175 阅读 · 0 评论 -
vscode使用chrome调试报错
问题vscode使用chrome调试报错"无法访问您的文件"或者"localhost 拒绝了我们的连接请求"。解决ctrl+p 搜索launch.json文件改为:{ "version": "0.2.0", "configurations": [ { "name": "使用本机 Chrome 调试", "type": "chrome", "request": "launch", "file": "${file}",原创 2021-03-09 22:05:06 · 535 阅读 · 0 评论 -
npm insatll 下载依赖总会卡住
问题npm ERR! code ENOTFOUNDnpm ERR! errno ENOTFOUNDnpm ERR! network request to https://registry.npmjs.org/babel-plugin-import failed, reason: getaddrinfo ENOTFOUND registry.npmjs.org registry.npmjs.org:443npm ERR! network This is a problem related to net原创 2021-02-10 09:07:16 · 241 阅读 · 1 评论 -
vscode启动项目EsLint报错(.eslintrc.js文件)
{root: true, // 当前配置为根配置,将不再从上级文件夹查找配置parserOptions: { parser: 'babel-eslint', // 采用 babel-eslint 作为语法解析器 sourceType: 'module', // 指定来源的类型,有两种script或module ecmaVersion: 6, //指定ECMAScript支持的版本,6为ES6},env: { browser: true, // 设置为所需检查的代码是在浏览器环境运行的 e原创 2021-02-02 23:15:52 · 1725 阅读 · 2 评论 -
Vue+element tree使用,当弹窗关闭时,this.$refs.tree.setCheckedKeys([])不能清空选中
问题Vue+element tree使用,当弹窗关闭时,this.$refs.tree.setCheckedKeys([])不能清空选中。解决由于弹窗关闭,导致this.$refs.tree.setCheckedKeys([])无效。此时,需要我们重新获取整个树组件的node,然后将对应的每个选项checked为空。// 首先获取nodelet node = this.$refs.tree.getNode(this.data[0].id).parent;// 这里的this.data是指的原创 2021-01-28 21:50:57 · 4126 阅读 · 0 评论 -
npm ERR! A complete log of this run can be found in
del package-lock.jsonnpm install原创 2021-01-21 20:48:04 · 186 阅读 · 0 评论 -
Vue面试题之vue实现MVVM数据绑定
MVVM什么是MVVM?MVVM是Model-View-ViewModel,是把一个系统分为了模型(model)、视图(view)和view-model三个部分。vue是一个典型的MVVM思想,数据驱动视图。通俗一点就是view层不直接和model层通信,他们只能通过view-model层通信。vue中MVVM的理解vue是一个MVVM渐进式框架,MVVM是vue的实际模式,在vue框架中数据会自动驱动视图。我们写vue就知道它的单文件组件开发方式。Model:数据层,仅仅关注数据本身,不关心任原创 2021-01-16 19:40:02 · 453 阅读 · 0 评论 -
vue 父子组件传数组eslint报错(Type of the default value for ‘arrNew‘ prop must be a function)
报错Type of the default value for ‘arrNew’ prop must be a function. (vue/require-valid-default-prop) arrNew: { type: Array, default:[]}解决arrNew: { type: Array, default() { return [] }}vue 父子组件传数组eslint报错(Type of the default value for ‘原创 2021-01-12 20:42:19 · 594 阅读 · 0 评论 -
element如果Button被Disable了,如何显示Tooltip
需求按钮被disabled了需要显示tooltip错误案例直接用tooltip包着按钮<el-tooltip placement="top" :disabled="tooltipDisabled" content="按钮被disabled了需要显示tooltip"> <el-button style="margin-bottom:10px" :disabled="btnDisabled" type="primary" size="small" @click="handleE原创 2021-01-11 20:24:27 · 4610 阅读 · 0 评论 -
词法作用域和动态作用域
词法环境词法环境:是一种规范类型,用于根据ECMAScript代码的词法嵌套结构来定义标识符与特定变量和函数的关联。通俗来说,词法环境就是一套约定的规则。写代码时,应该按照这个规则来,js引擎对源码进行词法分析。因此,词法环境在我们写代码的时候就已经确定了。词法环境其实就是作用域,也称词法作用域,也是所说的静态作用域。静态作用域与动态作用域因为javascript采用的是词法作用域,函数的作用域在函数定义的时候就决定了(我们写代码的时候就已经存在了);而与词法作用域相对的是动态作用域,函原创 2021-01-07 20:10:44 · 231 阅读 · 0 评论 -
lodash防抖
一import _ from "lodash";const infoBoxDebounce = _.debounce(fc => fc(), 500, { leading: true });//方法clickMethod(){ infoBoxDebounce(()=>{ //代码块 })}二<script>import _ from 'lodash'export default { methods: { //方法 cl原创 2021-01-06 22:55:38 · 162 阅读 · 0 评论 -
element-ui的input设置小于15的正整数
需求输入必须为数字,正整数;小于15,大于0;解决首先element-ui的input组件<el-input type="text" :maxLength="2" autocomplete="off" v-model="maxNum" placeholder="请输入<=15的正整数"></el-input>利用onkeyup,对输入的进行更改最终代码<el-input onkeyup="value=value.replace(/[^0-9]/g原创 2020-12-31 19:50:17 · 598 阅读 · 0 评论 -
原型与原型链一知半解
前言看过不少深入了解原型原型链系列,大体是明白不少,还是不够透彻!以下仅为个人总结和理解。初见各名词首先得了解这几个词:函数,构造函数,函数原型(实例原型),实例,实例对象,对象原型,原型,prototype,proto,constructor先看下面这个例子:function Person() {}function Foo() {}const foo = new Foo();const person = new Person();函数,构造函数:在上面的例子中构造函数就是原创 2020-12-30 20:46:32 · 98 阅读 · 2 评论 -
js格式化json字符串和json对象
格式化json对象const list= {name: 'lisi',age: 14,id: 1}JSON.stringify(list, null, "\t")格式化json字符串let list= "{name: 'lisi',age: 14,id: 1}"list = JSON.parse(list)JSON.stringify(list, null, "\t")输出{ name: 'lisi', age: 14, id: 1}js格式化json字符串和json对原创 2020-12-15 23:46:56 · 181 阅读 · 0 评论 -
reduce 一知半解(一):根据id合并两个数组
日常日常遇到的,同id的两数组合并成一数组的问题语法arr.reduce(function(prev,cur,index,arr){...}, init);arr 表示原数组;prev 表示上一次调用回调时的返回值,或者初始值 init;cur 表示当前正在处理的数组元素;index 表示当前正在处理的数组元素的索引,若提供 init 值,则索引为0,否则索引为1;init 表示初始值。注意:其实常用的参数只有两个:prev 和 cur根据id合并两个数组le原创 2020-12-10 22:48:06 · 861 阅读 · 0 评论 -
textarea去除右下角默认样式
textarea{resize:none}textarea去除右下角默认样式原创 2020-12-10 22:42:25 · 1346 阅读 · 0 评论 -
css禁止点击事件
将禁用的按钮灰掉的效果.disabled { pointer-events: none; cursor: default; opacity: 0.6;}选中的按钮.disabled.is-active { pointer-events: auto; cursor: pointer; opacity: 1;}css禁止点击事件原创 2020-11-26 21:44:08 · 522 阅读 · 0 评论 -
普通下载 && Vue文件图片下载处理
一般的下载,也就a标签加个链接地址,标签内加个download属性. 当地址是后端提供时:可通过创建a标签, 随即给a便签附下载链接,文件名和属性, 最后再创建点击效果,最后清楚生成的a标签. 再则是图片地址提供:可以通过Base64加canvas,对图片的下载可以进行处理. 下面就是相关方法处理函数 HTML与文件下载HTML与文件下载<a href="large.jpg" download>下载</a>文件下载配合后端表格导出export function dow原创 2020-11-18 22:41:40 · 138 阅读 · 0 评论 -
js判断文件名是否合法
文件类型可查询MIME参考手册.获取文件后缀名/** * @description 获取文件后缀名 * @param {String} fileName 文件全名,包含后缀名的那种 */export function getFileExt(fileName) { let splits = fileName.split('.'); return _.last(splits);}检查文件类型/** * @description 检查文件类型,是否是合法的,这里的validM原创 2020-11-18 22:39:41 · 884 阅读 · 0 评论 -
Js去除字符串中的中括号
let str = '这是一个字符串[html]语句;[html]字符串很常见';alert(str.replace(/\[|]/g,''));//移除字符串中的所有[]括号(不包括其内容)//输出:这是一个字符串html语句;html字符串很常见alert(str.replace(/\[.*?\]/g,''));//移除字符串中的所有[]括号(包括其内容)//输出:这是一个字符串语句;字符串很常见移除所有中括号,不包括其内容let str = "[1,2,3,4,5,6,7,8]";let原创 2020-11-18 22:36:50 · 2383 阅读 · 2 评论 -
日常页码样式问题
问题当页码到一千多的时候,页码的方框会非常不好看;又不能超出方框min-width&&padding解决<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title原创 2020-11-09 19:29:51 · 181 阅读 · 2 评论 -
echart 设置 Y轴标签在柱状图上垂直居中 失效
问题yAxis: { type: 'category', data: yAxis, axisLabel: { inside: true, *verticalAlign: 'middle'* // 文档中应该是这个属性来设置垂直居中,但是未生效 }, axisLine: { lineStyle: { color: '#fff', }, }原创 2020-10-29 21:11:19 · 1949 阅读 · 0 评论 -
git 出现 fatal: unable to access 问题
问题解决管理员没有赋你推送权限原创 2020-10-29 20:11:33 · 12569 阅读 · 0 评论 -
vue两data参数等于res.detail,更新一参数另一参数跟着改变
问题vue两data参数等于res.detail,更新一参数另一参数跟着改变import serviceSkill from "@service/skill"export default{ data(){ return{ datalist:{}, dataOldlist:{}, } }, created(){ this.changeSomething() }, methods(){ changeSomething(){原创 2020-10-29 20:01:18 · 499 阅读 · 0 评论 -
webpack 报错(Cannot find moudle ‘webpack-cli\bin\config-yargs‘)
问题webpack 报错(Cannot find moudle ‘webpack-cli/bin/config-yargs’)解决webpack和webpack-dev-server版本兼容webpack 3.5.5 webpack-dev-server 2.7.1可以用。npm uninstall webpack -Dnpm uninstall webpack-dev-server -D然后执行npm i webpack@3.5.5 -Dnpm i webpack-dev-serv原创 2020-10-29 19:58:33 · 141 阅读 · 0 评论 -
js图片压缩推荐
1. irz图片压缩图片压缩:不能定义压缩后大小2. image-conversion图片压缩:能定义压缩后大小js图片压缩推荐原创 2020-10-26 19:25:59 · 166 阅读 · 0 评论 -
Object.assign()更新对象
Object.assign()Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]],所以它会调用相关 getter 和 setter。因此,它分配属性,而不仅仅是复制或定义新的属性。如果合并源包含getter,这可能使其不适合将新属性合并到原型中。为了将属性定义(包括其可枚举性)复制到原型,应使用Obje原创 2020-10-24 14:21:08 · 642 阅读 · 0 评论