sa789ya-CSDN博客

原创 vue项目的打包问题.

一. 打包白屏问题首先npm run build后打包之后在本地预览是白屏。有很多js,css无法加载1.解决方法在config文件夹中找到index.js打开把assetsPublicPath: '/'改成下图方框中的样子。2.在build文件的webpack.prod.config.js文件夹里修改 publicPath:'./',3.在npm run build 就好了二. 打包之后图片不显示 1.在build文...

2021-11-25 11:31:02 609

原创数组方法(ES6,ES5)

1、concatconcat() 方法用于连接两个或多个数组2、joinjoin() 方法用于把数组中的所有元素放入一个字符串。3、poppop() 方法用于删除并返回数组的最后一个元素，会改变原数组。4、pushpush() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。5、reversereverse() 方法用于颠倒数组中元素的顺序。6、shiftshift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。语法：array

2021-10-28 21:46:38 205

原创 js中数组排序（冒泡、快速、插入）

1.冒泡排序法将数组中的相邻两个元素进行比较，将比较大（较小）的数通过两两比较移动到数组末尾（开始），执行一遍内层循环，确定一个最大（最小）的数，外层循环从数组末尾（开始）遍历到开始（末尾）function MaoPaoSort(arr){ for(var i = 0;i<arr.length-1;i++) { for(var j = 0;j<arr.length-i-1;j++){ if(a.

2021-10-28 21:34:56 325

原创数组的去重

1、 ES6-set使用ES6中的set是最简单的去重方法var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN,NaN,'NaN', 0, 0, 'a', 'a',{},{}]; function arr_unique1(arr){return [...new Set(arr)];//或者//return Array.from(new Set(ar

2021-10-28 21:29:29 151

原创 vue中的插槽(slot)

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。分为默认插槽、具名插槽、作用域插槽 1.默认插槽指没有名字的插槽，子组件未定义的名字的插槽，父级将会把未指定插槽的填充的内容填充到默认插槽中。//子组件...

2021-10-28 21:22:29 308

原创关于js的继承

前言：js是面向过程的语言、但是有时候我们需要面向对象的语言，我们可以通过函数来模拟一个类来创建一个对象，这样就把面向过程语言变成面向对象的语言假如我们在写代码过程中：可以用面向对象实现，一定可以用面向过程实现。面向对象的三大特征：封装 , 继承，多态 1.封装：用函数把一些业务集中起来，构建一个工厂。 ES5是没有类的 ES6添加了类，是一个语法糖 2.多态：一个函数传入不同的参数可以得到不同的结果...

2021-09-23 20:25:50 105

原创 js的数据类型、堆栈存储、

基本数据类型（值类型）：Number、String、Boolean、Undefined、Null、Symbol（es6新增独一无二的值）和BigInt（es10新增）；引用数据类型:Object。包含Object、Array、 function、Date、RegExp栈堆存储值类型栈存储：主要针对（Number、String、Boolean）三种数据。直接存储在栈（stack）中，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储。例如：当我们执行下方代码时栈内存中的变化...

2021-09-23 19:39:43 150

原创 js垃圾回收和内存泄露

一.垃圾回收机制浏览器的 Javascript 具有自动垃圾回收机制(GC:Garbage Collecation)，也就是说，执行环境会负责管理代码执行过程中使用的内存。其原理是：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。但是这个过程不是实时的，因为其开销比较大并且GC时停止响应其他操作，所以垃圾回收器会按照固定的时间间隔周期性的执行.只有函数内的变量才可能被回收不再使用的变量也就是生命周期结束的变量，当然只可能是局部变量，全局变量的生命周期直至浏览器卸载页面才会

2021-09-16 21:24:44 96

原创 js异步之宏任务（marcroTask）和微任务（microTask）

js是一门单线程脚本语言，所以需要异步来辅助异步和同步的区别:异步不会阻塞程序的执行，同步会阻塞程序的执行事件循环js在执行时同步和异步任务分别进入不同的执行“场所”，同步进入主线程，异步进入任务队列里。主线程内的任务执行完毕为空，就去任务队列（Event Queue）读取对应的函数，进入主线程执行这种过程会不断重复，也就是常说的Event Loop（事件循环）。主线程执行完毕后就是读取任务列表的任务它分为宏任务和微任务什么是宏任务和微任务宏任务包括：...

2021-09-16 21:17:58 124

原创 css3/H5新特性

css3新特性选择器背景和边框文本效果 2D/3D 转换 — 变形（transform）、过渡(transtion)、动画(animation)：1. 选择器常规选择器：:last-child /* 选择元素最后一个孩子 */:first-child /* 选择元素第一个孩子 */:nth-child(1) /* 按照第几个孩子给它设置样式 */:nth-child(even) /* 按照偶数 */:nth-child(odd) /* 按照奇数 */:disabled

2021-09-16 21:03:35 130

原创浏览器兼容性问题

一、css兼容1. 不同浏览器的标签默认的margin和padding不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率: 100%解决方案：CSS里 *{margin:0;padding:0;} 但是性能不好一般我们会引入reset.css样式重置；备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，所有的CSS文件开头都会用样式重置各个标签的内外补丁是0。2. css3新属性，加浏览器前缀兼容早期浏览器-moz

2021-09-09 07:51:29 168

原创常见的块级/行内/空元素、CSS Hack、src与href的区别、link与@import区别

一.常见的块级/行内/空元素行内元素有：span a b i img input select strong 块级元素有：div p h1-h6 ul table form ul ol li dl dt dd… 空元素(没有内容)：<br> <hr> <img> <input> <link> <meta>二.CSS Hack一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。CSS Hac...

2021-09-08 20:41:30 234

原创水平/垂直居中，两/三栏布局(圣杯双飞翼) .flex布局

一 .元素居中的三种方式:方法一：父相自绝后，子分部向左向上移动本身宽度和高度的一半（也可以用 transform:translate(-50%,-50%)）最常用方法 #box{ width: 400px; height: 400px; background: red; position: relative; } #x{ width: 200px; height: 2

2021-09-08 20:31:51 279

原创 postiton定位属性值有几个

osition的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。1、position: staticstatic(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。2、position: relativerelative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素

2021-09-08 20:02:54 197

原创盒模型 BFC

一盒模型1.什么是盒模型在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成2.盒模型分为两种标准盒模型怪异盒模型标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)怪异模式下：一个块的总宽度= width + margin(左右)（...

2021-09-08 19:51:47 174

原创 axios的封装

介绍: axios是promise对象是做数据请求的它是单例模式如果不封装每次请求都要设置请求头,设置token 也是可以采取本地存储但本地存储没有响应式功能1.下载axios依赖npm install axios -s2.在main.js 引入import axios from 'axios' 将它挂载到vue原型上Vue.prototype.$axios=axios3.在src 目录下创建一个http 文件...

2021-08-31 08:17:28 421

原创 vant-ul组件的按需引入

1.安装插件:npm i babel-plugin-import -D2.在babel.config.js中配置const plugins = [ [ 'import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant' ]]module.exports = { presets: [['@vue/cli...

2021-08-30 08:14:18 406

原创 rem的适配方案

rem 是一个相对单位是相对于html的font-size的大小Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具:postcss-pxtorem是一款postcss插件，用于将单位转化为rem lib-flexible用于设置rem基准值1.下载依赖cnpm install lib-flexible postcss-pxtorem --save-dev2.在main.js中引入: import ‘lib-flexible/fle...

2021-08-30 08:00:42 166

原创 vue 项目基础配置配置多变量环境

1. 在 package.json里的scripts配置servetestbuild(启动脚本,改为三种启动方式来执行不同的环境)通过npm run serve启动本地 , 执行development 通过npm run test打包测试 , 执行testing 通过npm run build打包正式 , 执行production例:"scripts": { "serve": "vue-cli-service serve --open", //开发...

2021-08-27 11:58:53 177

sa789ya的博客