- 博客(339)
- 收藏
- 关注
RSS订阅
转载 关于Vue中props的详解
看一下官方文档：组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。也就是props是子组件访问父组件数据的唯一接口。详细一点解释就是：一个组件可以直接在模板里面渲染data里面的数据（双大括号）。子组件不能直接在模板里面渲染父元素的数据。如果子组件想要引用父元素的数据，那么就在...
2018-07-23 00:11:08
137427
12
原创 css制作动画(动效的序列帧图)
在我们平时做宽高确定,需要背景图片切换的效果时,我如果用的是一张大的png图片.而且恰好是所有小图都是从左向右排列的,那么 我们只需测量出某一个小图距左侧有多少像素(x),然后我们banckgroun ...css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...CSS3 animation属性中的steps实现GIF动图(逐帧动画)
2023-03-10 14:20:54
1717
1
原创 前端工程化配置-husky + eslint + lint-staged
lint-staged 是文件过滤器，它只会校验你提交或者说你修改的部分内容。在当前项目的 .husky 文件夹中创建了一个 pre-commit 文件。找一个文件测试是否配置成功，增加一行无法通过 eslint 的代码。当你的文件栏中出现 .eslintrc.js，就说明安装成了。4、你的项目使用 TypeScript 了吗？然后根据弹出的内容区选择你需要的规范。6、你希望你的配置文件的格式是什么？3、你的项目使用哪个框架开发？2、 你的项目使用哪个规范？5、你的代码在哪里运行？2、配置 ESlint。
2022-11-02 14:24:19
3373
2
转载 js中!和!!的区别及用法
js中!的用法是比较灵活的，它除了做逻辑运算常常会用！做类型判断，可以用！与上对象来求得一个布尔值，1、！可将变量转换成boolean类型，null、undefined和空字符串取反都为false，其余都为true。1 !null=true2 3 !undefined=true4 5 !''=true6 7 !100=false8 9 !'abc'=false2、！！常常用来做类型判断，在第一步!（变量）之后再做逻辑取反运算，在js中新手常常会写这样臃肿的代码：判断变量
2020-08-13 20:20:14
410
转载 React组件方法中为什么要绑定this
如果你尝试使用过React进行前端开发，一定见过下面这样的代码：//假想定义一个ToggleButton开关组件class ToggleButton extends React.Component{ constructor(props){ super(props); this.state = {isToggleOn: true}; this.handleClick = this.handleClick.bind(this);
2020-07-26 21:36:46
605
原创 webpack.config.js文件模板
Webpack 在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的webpack.config.js文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者通过--config选项来指定配置文件。直接上码:const path = require('path');const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //提...
2020-07-06 00:40:08
568
转载 物理机、虚拟机、容器的比较
俗话说，学好虚拟化走遍宇宙都不怕，但对于计算机方面的初学者，肯定很多人都好奇为什么要使用虚拟机和容器，而不是直接使用多进程来运行多个业务。下面Mr chen就带大家一起浅谈浅谈三者的区别。首先用三张图很直观的表示三者的区别。一、物理机二、虚拟机三、容器物理机，对应采购的服务器设备，又叫裸设备，bare metal，随着摩尔定律的增长，单个服务器的性能逐渐提升，物理服务器的性能是如此的高，以致于我们实际使用到的物理机的性能只占了百分之几甚至更低，为了灵活的部署系统和应用，.
2020-05-28 15:23:38
1734
原创 Google Chrome 突然无法保存密码
解决方案，需要删除掉 Chrome 的 配置文件内 Login Data 与 Login Data-journal，重启即可。搜索路径：~/Library/Application Support/Google/Chrome
2020-05-08 12:03:15
6498
原创 js实现文件流下载文件
// http请求函数,支持配置请求和响应参数function ajaxRequest(method, url, type) { return new Promise((resolve, reject) => { const req = new XMLHttpRequest(); req.open(method, url, true); ...
2020-04-27 12:48:03
21569
3
原创 node设置环境变量方法
当使用NODE_ENV =production, 来设置环境变量时，大多数Windows命令提示将会阻塞(报错)。 （异常是Windows上的Bash，它使用本机Bash。）同样，Windows和POSIX命令如何使用环境变量也有区别。 使用POSIX，您可以使用：$ ENV_VAR和使用％ENV_VAR％的Windows。说人话：windows不支持NODE_ENV=development的设置...
2020-04-25 03:00:31
1847
原创 使用Blob对象进行指定文件名-在响应头获取
const fileName = res.getResponseHeader('Content-Disposition').split(';')[1].split('filename=')[1];
2020-04-25 02:49:32
7569
1
原创 js创建键值对new Map()
es6创建map键值对例子：const PRODUCTMAP = new Map([['SECURITY_GROUP', '/network/#/vpc/security/list~vpcId'],['安全组', '/network/#/vpc/security/list~vpcId'],['DCC', '/bcc/#/dcc/host/list'],['CDS', '/bcc...
2020-04-04 19:32:53
3892
原创 git的恢复操作-后悔药操作
用git命令，想看到自己的操作记录，则可以使用log与reflog，两个操作的区别如下：1.git log 命令可以显示所有提交过的版本信息2.git reflog可以查看所有分支的所有操作记录（包括已经被删除的 commit 记录和 reset 的操作）例如执行 git reset --hard HEAD@{1}，退回到上一个版本，用git log则是看不出来被删除的commiti...
2020-03-28 22:17:32
377
转载 css如何解决border的重叠问题
我现在在做一个ul列表，然后给每个li加上边框，但是加完了之后，相邻列表的边框就会变成2px，比如第一个li的下边框和第二个li的上边框就会重叠在一起，请问这有什么办法解决一下么？解决方法是：试试给li在样式中指定margin-top:-1px; 这样两个边框就可以重叠在一起了.新问题：不过我现在这个li是加了hover的，就是鼠标悬停就会边框变色，这样一来，每个变色的只会是...
2020-02-27 14:46:06
7364
原创 module.exports与exports的区别
console.log(module); //你会看到Module中的exports为空对象{}console.log(exports); //你会看到Module中的exports为空对象{}module.exports = { print : function(){console.log(12345)}}console.log(module); //你会看到Module中的...
2020-01-29 13:40:49
162
转载 object对象keys(), values() entries()
1、 Object.keys()ES5 引入了Object.keys方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键名。var obj = { foo: "bar", baz: 42 };Object.keys(obj)// ["foo", "baz"]2 、Object.values()Object.values方...
2019-12-06 03:56:34
163
转载 JS数组reduce()方法详解及高级技巧
reduce()方法可以搞定的东西，for循环，或者forEach方法有时候也可以搞定，那为啥要用reduce()？这个问题，之前我也想过，要说原因还真找不到，唯一能找到的是：通往成功的道路有很多，但是总有一条路是最捷径的，亦或许reduce()逼格更高...1、语法arr.reduce(callback,[initialValue])reduce 为数组中的每一个元素依次执行...
2019-12-03 22:29:36
197
原创 kill占用端口
1、查看端口：lsof -i :port 将port换成被占用的端口(如：8080)2、kill 进程：kill PID（进程的PID，如2033） 强制杀死：kill -9 2033
2019-11-20 12:04:14
700
原创 使用git reset 合并只有两个commit到一个
git reset --soft HEAD^1git commit --amend最后:git push --force origin master
2019-11-19 19:20:36
506
原创 百度SAN框架初步总结
webpack4 + san 快速构建一个项目：https://www.jianshu.com/p/efc955b2b38b百度前端项目总网址：https://efe.baidu.com/SAN网址:https://baidu.github.io/san/tutorial/component/san-ui组件库:https://ecomfe.github.io/san-xui/#comp=x...
2019-11-12 14:24:31
2559
原创 vue-cli3配置文件模板(文件名为vue.config.js)
const webpack = require('webpack')module.exports = { //部署应用包时的基本 URL publicPath: process.env.NODE_ENV === 'production' ? './' : './', //当运行 vue-cli-service build 时生成的生产环境构建文件的目录 outpu...
2019-10-28 13:45:03
2200
转载 dependencies和devDependencies的区别？
在我们使用npm下载各种三方库的时候，都会在package.json中生成devDependencies或者dependencies，那么对于这两者，到底有什么区别呢？附图一张↓效果图区别 对于我们依赖的这些插件库，有的是我们开发所使用的，有的则是项目所依赖的。对于这个分界线，我们诞生了dependencies和devDependencies，具体却别如下： de...
2019-10-25 14:13:44
175
原创 正则匹配（以***开头以***结尾的任意字符串）
var str='12#$[22@@JL]444[[你是]11[——+][]';var reg=/\[([^\[\]])*\]/g; //[^\[\]]匹配除[]以外的全部字符，因[ ]是特殊字符，所以需要\转义var des=str.replace(reg,(ev)=>{ return ' '+ev+' '});console.log(des);输出：12#$ [...
2019-10-10 14:45:26
11495
转载 element表格行列拖拽
element ui 表格没有自带的拖拽排序的功能，只能借助第三方插件Sortablejs来实现，先来看一下动态图，效果是不是你们想要的。首先需要安装Sortable.jsnpm install sortablejs --save然后引用import Sortable from ‘sortablejs’需要注意的是element table务必指定row-key，row-key必须是唯...
2019-09-09 19:08:57
1212
转载 vue 解决关于*!!vue-style-loader!css-loader?{"sourceMap":true}!../../../../vue-loader
问题描述*!!vue-style-loader!css-loader?{“sourceMap”:true}!../../../../vue-loader/lib/style-compiler/index?{“vue”:true,”id”:”data-v-570115ee”,”scoped”:false,”hasInlineConfig”:false}!../../../../vux-loader...
2019-08-23 14:39:15
14989
1
转载 如何用canvas绘制带有箭头的直线
话不多说，直接上代码~~~<canvas id="canvasId" width="400" height="400" style="border: 1px solid #ccc;"></canvas>1window.onload = function(){ var cavParam = {}; cavParam.canvas = document....
2019-08-13 12:03:57
3554
原创 js获取元素到文档区域document的(横向、纵向)坐标的两种方法
// 获取元素到文档区域的坐标function getPosition(element){ var dc = document, rec = element.getBoundingClientRect(), x = rec.left, // 获取元素相对浏览器视窗window的左、上坐标 y = rec.top; // 与html或body元素的滚动距离相加就是元...
2019-08-09 18:26:56
1945
原创 js实现复制功能(不依托表单)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>复制功能(不依托表单)</title> </head> <body> <button id="btn">...
2019-08-07 16:16:12
416
转载 函数防抖和节流
在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。让我们先来看看在事件持续触发的过程中频繁执行函数是怎样的一种情况。html 文件中代码如下<div id="conten...
2019-08-02 21:49:47
173
转载 module.exports与exports，export与export default之间的关系和区别
首先我们要明白一个前提，CommonJS模块规范和ES6模块规范完全是两种不同的概念。CommonJS模块规范Node应用由模块组成，采用CommonJS模块规范。根据这个规范，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的expo...
2019-07-29 00:38:48
269
原创 三列布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>中间定宽，两边自适应</title> <style type="text/css"> *{ margin: 0; ...
2019-07-21 22:53:28
131
转载 浏览器缓存
浏览器缓存指的是http缓存，而storage是应用层缓存，不一样浏览器缓存分为两类：强缓存和协商缓存先了解一下浏览器缓存机制：缓存这东西，第一次必须获取到资源后，然后根据返回的信息来告诉如何缓存资源，可能采用的是强缓存，也可能告诉客户端浏览器是协商缓存，这都需要根据响应的header内容来决定的。下面用两幅图来描述浏览器的缓存是怎么玩的，让大家有个大概的认知。第一次请求后续请...
2019-07-05 17:26:38
148
转载 正则匹配出字符串中两串固定字符区间的所有字符
正文：效果：匹配两个字符串区间的字符串 1、js截取两个字符串之间的内容：var str = "aaabbbcccdddeeefff";str = str.match(/aaa(\S*)fff/)[1];alert(str);//结果bbbcccdddeee2、js截取某个字符串前面的内容：var str = "aaabbbcccdddeeefff";tr = s...
2019-07-03 18:20:15
3323
转载 vue 依赖注入
vue中的依赖注入 provide 和 injectprovide选项允许我们指定我们想要提供给后代组件的数据/方法provide:function () { return { getMap:this.getMap }}inject选项来接收指定的我们想要添加在这个实例上的属性：inject: ['getMap']...
2019-07-02 17:09:45
1723
原创 JS 中的深拷贝
1.使用递归的方式实现深拷贝//使用递归的方式实现数组、对象的深拷贝function deepClone(obj) { //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝 var objClone = Array.isArray(obj) ? [] : {}; //进行深拷贝的不能为空，并且是对象或者是 if (obj &&...
2019-07-01 23:26:52
189
转载 ES6中Map与对象、数组，JSON之间的相互转换
Map转为数组const map = new Map();map.set(1,"foo").set(2,"bar").set(3,"baz");const arr = [...map];//转数组方法1Array.from(map);//转数组方法2console.log(arr);数组 转为 Mapconst arr = ["foo","bar","baz"];const ...
2019-07-01 00:49:47
16790
2
原创 如何通过css设置滚动条在滚动区域最下方
desObj.scrollTop=desObj.scrollHeight;//设置滚动条在最下方desObj为滚动包含元素，即为设置overflow属性的元素scrollTop为滚动距离；可读可写scrollHeight为元素所包含高度，包含已隐藏等等全部；只读...
2019-06-29 18:46:24
7231
1
原创 React父子组件及兄弟组件通信方式
1.子组件调用父组件：在子组件中传属性，可传各种，包括this...，然后在子组件中通过this.props去调用，还可以改变值，因为setState等等；2.父组件调用子组件，可以给子组件调用处设置ref属性，然后就直接通过this.ref...调用;3.兄弟组件通信，只能通过Redux;父组件import React,{Component} from 'react';imp...
2019-06-23 14:38:08
4868
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人