码代码的程序员-CSDN博客

原创 pc端纯前端实现文件下载

说明：下面的例子都是使用vue写的例子1.txt下载利用a标签进行下载 onClickDownDaily() { //定义文件内容，类型必须为Blob 否则createObjectURL会报错 const jsonData = [ { name: "路人甲", phone: "123456789", email: "000@123456.com", }, .

2021-12-10 17:41:57 496

标准盒子模型在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。见下图。假设定义了 width, height, margin, border, and padding:.box { width: 350px; height: 150px; margin: 25px; padding: 25px; border: 5px solid black;}如果.

2021-03-30 16:57:23 3561

原创什么是BFC，BFC特性，BFC怎么产生？

什么是BFC?BFC（Block formatting contexts），翻译过来就是块级格式化上下文，指的是一种上下文环境.MDN：一个块格式化上下文（block formatting context）是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。BFC怎么产生?一个块格式化上下文由以下之一创建：1.根元素或其它包含它的元素2.浮动元素 (元素的 float 不是 none)3.绝对定位元素 (元素具有 position 为 abso

2021-03-30 16:16:46 688

原创面试题经常问的左侧固定宽度，右侧自适应的5种实现方案

1.float布局1.1利用margin-left<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edg

2021-03-29 11:48:49 198

原创 Vue.js中$router和$route的区别

1.$router$router是VueRouter的一个对象，通过Vue.use(VueRouter)和Vu构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由，包含了许多关键的对象和属性用法：$router.push({path:'home'})，本质是向history栈中添加一个路由，在我们看来是切换路由，但本质是在添加一个history记录$router.replace({path:'home'})，//替换路由，没有历史记录2.$route是一

2021-03-02 00:55:40 1000

原创 v-if 与 v-for 的优先级对比

2.x 版本中在一个元素上同时使用v-if和v-for时，v-for会优先作用。3.x 版本中v-if总是优先于v-for生效

2021-03-02 00:03:58 552

原创什么是防抖和节流？有什么区别？如何实现？

防抖：高频率触发的事件,在指定的单位时间内，只响应最后一次，如果在指定的时间在触发，则重新计算时间(后面触发的事件执行，替代了前面的事件)function debounce(fn,time) { let timeout = null; // 创建一个标记用来存放定时器的返回值 return function () { clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉 timeout

2021-02-20 16:09:10 10145

原创 react hook中的useState的第二个参数是异步的

useState的异步更新 const [list, setlist] = useState([0]); function change(){ setlist([22, 1]) console.log(list) //我想这里直接获得[22,1]，但是拿到的是[0] }useState每次执行会返回一个新的state（简单类型的等值拷贝）setState会触发UI更新（重新render，执行函数组件）由于UI更新是异步任务，所以setState也是一个异步过程解决方

2021-01-23 17:17:50 6778 1

原创 antd中的一些坑

在写自定义校验的时候，不管是if/else一定要有返回值,要不然点击提交按钮获取不了表单的数据 ({ getFieldValue }) => ({ validator(_, value) { let confirmPasswords = getFieldValue('password') if (value) { if (confir

2021-01-15 00:34:51 510

原创 react中按需引入antd(不需要eject暴露环境)

1.安装模块cnpm i customize-cra --save-dev2.在package.json的同级目录中新建一个config-overrides.js文件const { fixBabelImports } = require("customize-cra");module.exports = override( fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', sty

2021-01-11 00:15:46 319

原创 react配置sass全局变量(不需要eject暴露环境)

1.安装3个模块:cnpm install react-app-rewired customize-cra sass-resources-loader --save-dev2.在package.json的同级目录中新建一个config-overrides.js文件const { override, adjustStyleLoaders } = require("customize-cra");module.exports = override( // fixBabel

2021-01-11 00:10:28 1008

原创 npm的常用命令

npmnpm的全称是Node Package Manager，是随同NodeJS一起安装的包管理和分发工具，它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包。(安装node就可以使用了)npm查看版本npm -v常用命令本地安装（local）npm install gulp-g是代表全局安装(全局安装（global）,使用-g 或 --global)npm install 安装模块 -g@x.x.x代表安装指定版本npm install gulp@3.9.1

2020-12-29 18:30:59 332

原创 react生命周期的一些个人理解（16.3+）

react生命周期的一些更新React V16.3 新增的生命周期方法getDerivedStateFromProps()getSnapshotBeforeUpdate()逐渐废弃的生命周期方法：componentWillMount()componentWillReceiveProps()componentWillUpdate()虽然废弃了这三个生命周期方法，但是为了向下兼容，将会做渐进式调整。V16.3 并未删除这三个生命周期，同时还为它们新增以 UNSAFE_ 前缀为别名的三个函数

2020-12-23 00:40:24 183

原创 react中的关于 setState() 你应该了解三件事

不要直接修改 State// Wrongthis.state.comment = 'Hello';而是应该使用 setState():this.setState({comment: 'Hello'});this.setState()构造函数是唯一可以给 this.state 赋值的地方State 的更新可能是异步的出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。因为 this.props 和 this.state 可能会异步更新，所以你不要依赖他们的值来

2020-12-22 10:07:47 444

原创 React onClick点击事件传参三种写法

1.<Button onClick={this.delFolder.bind(this,"xxx")}></Button>定义delFolder方法delFolder = (name,e)=>{alert(name)}2.<Button onClick={this.delFolder("abc")}></Button>定义delFolder方法delFolder = (name)=>{return (e

2020-11-27 17:17:26 5361

原创 vue中出现了echarts图标超出容器宽度的问题的解决方法

出现容器宽度的问题是，因为宽高设置了百分比的原因，如果设置固定宽度是没有问题解决方法1.this.$refs.{refname}.style.width为容器设置一个固定的宽度2.把声明echart的方法放在this.$nextTick方法中运行(推荐)...

2020-11-19 10:15:58 2513 1

原创 html转jsp

在浏览器中无法直接打开jsp文件，所以要安装Tomcat服务器以及jdk1.Tomcat服务器可以参考下面的链接https://www.cnblogs.com/yocichen/p/10478431.html2.jdk的安装可以参考下面https://blog.csdn.net/wumingxiaozei/article/details/95628747下面是没有在ide工具或者eclipse运行的方法3.准备JSP文件 <%@ page contentType="

2020-10-30 10:18:11 508

原创 vue中的混入 mixin

什么是mixins？官方解释：混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。mixins可以理解成常见函数封装，想像一下封装JS方法。一个方法你想到处使用，是不是可以提个文件出来封装个函数。但也不一定只干这个事，也可以进行一些业务逻辑的拆分、组合。不过这个还是风险比较大(命名冲突的问题)的。混入方式组件按需混入、// 定义一个混入对象.jsvar my

2020-10-19 00:44:22 251

原创谈一下图片的自适应

在工作中经常遇到要求图片自适应的需求，下面就谈一下我在工作中经常使用的一些方法单独使用img标签的情况单独使用img的时候，可以只设置width就可以了，height不用设置，因为img不设置height，它会自动根据图片的比例设置自适应高度例如：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" .

2020-10-10 11:04:45 4090

原创谈谈工作中git的一些常用的命令

1.初始化仓库: git init2.配置邮箱以及用户名git config --global user.email "随便邮箱"git config --global user.name "用户名"3.提交文件到暂存区3.1提交单个文件：git add index.html3.2批量添加：git add . 或git add --all4.忽略某些文件不被git管理在根目录下面创建一个.gitignore文件5.提交一个文件到本地仓库git commit -m ...

2020-09-30 10:18:43 172

原创 for of 和 for in 的一些区别

自己经常会搞混淆for of 和for of 的区别以及用法，所以记录一下，方便以后忘记了，可以回来看看1.for infor...in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性。用法：for (variable in object)variable在每次迭代时，variable会被赋值为不同的属性名。object非Symbol类型的可枚举属性被迭代的对象。如果你只要考虑对象本身的属性，而不是它的原型，那么使用getOwnPropertyNames...

2020-09-21 16:11:05 2253

原创数组中的filter方法

filter()方法不会对空数组进行检测，不会改变原始数组filter()方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];const result = words.filter(word => word.length > 6);console.log(result);// expected outpu.

2020-09-18 14:18:21 19877

原创 es6中数组新增的find() 和 findIndex()

find()数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。[1, 4, -5, 10].find((n) => n < 0)// -5find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。[1, 5, 10, 15].find(function(value, index, arr).

2020-09-18 11:17:44 423

原创 element 表格出现滚动条时，出现不对齐的问题的解决方案

1.兼容谷歌浏览器以及火狐浏览器element表格中有一个doLayout方法，使用改方法时对 Table 进行重新布局。mounted(){ setTimeout(()=> { this.$refs.table.doLayout() },1200)}其中的this.$refs.table是在<el-table>中使用了ref="table <template> <el-table :da..

2020-09-17 17:41:39 4322

原创 es6的一些编程风格

1.在let和const之间，建议优先使用const，尤其是在全局环境，不应该设置变量，只应设置常量。const优于let有几个原因。一个是const可以提醒阅读程序的人，这个变量不应该改变；另一个是const比较符合函数式编程思想，运算不改变值，只是新建值，而且这样也有利于将来的分布式运算；最后一个原因是 JavaScript 编译器会对const进行优化，所以多使用const，有利于提高程序的运行效率，也就是说let和const的本质区别，其实是编译器内部的处理不同...

2020-08-20 23:51:30 200

原创 vue中v-slot指令如何应用Vue插槽及与slot、slot-scope的用法区别

不具名插槽子组件：<template> <div>  <slot></slot> <h3>这里是不具名插槽组件</h3> </div></template><script>export default { data() { return {} }, created() {}, moun

2020-07-24 11:19:58 805

原创 svg图标修改颜色

在svg标签中定义一个class类，在class中添加fill:currentColor,然后添加color：red,就可以修改svg图标的颜色了例子：.svg{fill:currentColor;color:red;}

2020-07-07 15:03:42 22418 3

原创 Promise的一些个人理解

ECMAscript 6 原生提供了 Promise 对象。Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。Promise 的特点：1、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：pending: 初始状态，不是成功或失败状态。 fulfilled: 意味着操作成功完成。 rejected: 意味着操作失败。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意

2020-07-02 14:54:13 334

原创 js逻辑运算（a||b） (a&&b)

JS中的||符号：诀窍只要"||"前面为false,不管"||"后面是true还是false，都返回"||"后面的值。只要"||"前面为true,不管"||"后面是true还是false，都返回"||"前面的值。例子let a = 1 ;let b = 3 ;let c = 0;a||b ====>1a||c =====>1b||c =====>0总结：真前假后JS中的&&符号诀窍只要"&&amp

2020-06-18 15:54:51 3994 3

原创 vue中使用pdf.js预览pdf文件

1.官网直接下载pdf.js，链接：点击打开链接这里面有核心的pdf.js和pdf.worker.js,以及展示pdf的viewer页面把它作为静态资源来编译，基本想要的build和web这两个重要文件夹的东西都正常编译。当然你可以可以npm install一下，整个文件放在static目录下的不好地方就是打包会很大哟（当然你可以选择性的删除里面的文件，比如绝大部分语言包）2.个人弄的一...

2020-03-29 23:29:15 818

原创经典面试题----Eventloop（事件循环）

Event Loop即事件循环，是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。JavaScript代码的执行过程中，除了依靠函数调用栈来搞定函数的执行顺序外，还依靠任务队列(task queue)(先进先出)来搞定另外一些代码的执行Javascript单线程任务被分为同步任务和异步任务，同步任务会在调用栈中按照顺序等待主线程...

2020-03-29 22:42:47 5729 1

原创 export default 和 export的一些区别

正确写法let man ={name:"13123",year:323,}export default man错误的写法（会报错）export default man ={name:"13123",year:323,}导入使用import man form xxx

2020-03-27 15:29:23 2599

原创 vue-cli3配置去掉console.log

在开发环境写了很多console.log/info/debug,在生产环境需要去掉这些console。webpack提供了删除console的插件，在vue-cli3里面是这样用的：首先安装terser-webpack-plugincnpm install terser-webpack-plugin -Dvue.config.js中的配置const TerserPlugin ...

2020-03-11 16:00:03 3591 1

原创 vue中引用阿里iconfont

1.安装svg-sprite-loadercnpm i svg-sprite-loader -D2.在阿里iconfont下载好icon,保存成svg格式，放在vue项目文件下面，我这里是icon文件夹，然后创建一个index.js文件icons--index.jsimport Vue from 'vue'import SvgIcon from '@/component...

2020-02-25 15:16:22 352

原创基于 webpack 的require.context来实现自动加载组件并注册的全局的功能

require.context：一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块。require.context(directory, useSubdirect...

2020-02-21 21:22:55 1304

原创 Sass 和 Js 之间变量共享

假设我们在xxx.scss中声明了一个theme:blue，我们在 js 中该怎么获取这个变量呢？我们可以通过css-modules:export来实现。// xxx.scss$theme: blue;:export { theme: $theme;}// test.jsimport variables from '@/styles/xxx.scss'cons...

2020-02-21 00:46:03 3843 1

原创谈谈vue中的.sync修饰符用法及原理

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源vue中我们经常会用v-bind(缩写为:)给子组件传入参数。或者我们会给子组件传入一个函数，子组件通过调用传入的函数来改变父组件的状态例如：//父组件给子组件传入一个函数 <Footers :name="...

2020-02-21 00:41:42 1834

原创 Vue 新增的$attrs与$listeners的详解

inheritAttrs：默认值true,继承所有的父组件属性（除props的特定绑定）作为普通的HTML特性应用在子组件的根元素上，如果你不希望组件的根元素继承特性设置inheritAttrs: false,但是class属性会继承（简单的说，inheritAttrs：true 继承除props之外的所有属性；inheritAttrs：false 只继承class属性）$attrs--继承所...

2020-02-20 19:29:24 780

原创 vue-cli3.0中的vue.config.js

vue.config.js一般的配置module.exports = { /** * You will need to set publicPath if you plan to deploy your site under a sub path, * for example GitHub Pages. If you plan to deploy your si...

2020-02-18 19:28:13 330

原创 router-link-active

组件支持用户在具有路由功能的应用中（点击）导航。通过 to 属性指定目标地址，默认渲染成带有正确链接的标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名，就是router-link-active，我们就可在a标签被点击时，给a标签添加颜色或背景如果你觉得router-link-active这个名字过长时，你可以在main...

2020-02-16 17:49:56 5364

空空如也

空空如也