- 博客(21)
- 收藏
- 关注

原创 ES6中export的三种对外暴露的方式及引入方法
对外暴露的三种方式1.分别暴露export let a = 1export function fun(){ console.log("你好")}2.统一暴露let a = 1function fun (){ console.log("你好")}export { a , fun }3.默认暴露一个js文件中只能有一个默认暴露,默认暴露的可以是一个常量,函数,对象等。//默认暴露一个函数export default function fun(){ console.log("你
2022-04-22 00:47:02
6430
原创 react中setstate是异步还是同步?是异步宏任务还是异步微任务?
react中setstate是异步还是同步?是异步宏任务还是异步微任务?
2022-07-18 17:59:09
784
原创 axios的封装
在开发中使用axios请求数据时,经常需要对axios进行封装。//对axios进行二次封装import store from "@/store";import axios from "axios";//引入进度条import nprogress from "nprogress";//start方法:进度条开始 done方法:进度条结束//引入进度条样式import "nprogress/nprogress.css";//1.利用axios对象的方法create,去创建一个axi
2022-05-08 15:35:57
279
原创 CSS弹性布局
弹性布局开启弹性布局的方法块元素开启flex布局.box{ display: flex;}行内元素开启flex布局.box{ display: inline-flex;}弹性布局的属性属性值效果flex-directionrow设置主轴方向水平,起点在左端row-reverse设置主轴方向水平,起点在右端column主轴方向为垂直方向,起点在上沿column-reverse主轴方向为垂直方向,起点在下沿fl
2022-05-01 09:48:40
127
原创 一篇文章带你理解Promise
同步与异步在理解promise前,我们需要理解JS中同步操作与异步操作的特点。可以参考我的另一篇文章:https://blog.youkuaiyun.com/weixin_46389390/article/details/124439358?spm=1001.2014.3001.5502回调函数回调函数就是一个被作为参数传递的函数。function fun(callback) { setTimeout(() => { let a = 1; callback(a); }, 2000
2022-04-29 20:20:36
122
原创 JS中字符串常用方法总结
1.charAt()方法charAt() 方法可返回字符串中指定位置的字符。let str = "Hello";let s = str.charAt(1);console.log(s);//e语法:string.charAt(index)index 必需值。表示字符串中某个位置的数字,即字符在字符串中的位置。2.concat() 方法concat() 方法用于连接两个或多个字符串。该方法没有改变原有字符串,但是会返回连接两个或多个字符串新字符串let str = "Hello";le
2022-04-28 22:13:19
27429
1
原创 JS数组常用的方法总结
1.数组的push和pop方法数组的push方法用于在数组的末尾添加新元素,可以添加单个或多个。返回值为添加后新数组的长度。let arr = [1, 2, 3];let result = arr.push(4, 5, 6);console.log(arr); //[ 1, 2, 3, 4, 5, 6 ]console.log(result); // 6pop方法用于删除数组的最后一个元素,不需要参数,返回值为数组的最后一个元素let arr = [1, 2, 3];let result
2022-04-27 21:36:29
354
原创 js回调执行顺序,同步任务与异步任务,宏任务与微任务
JS执行顺序JS是单线程的,即一段时间只能执行一个任务。执行一段代码,js总是按照顺序执行的,只不过在执行的过程中不会等待异步任务。同步任务与异步任务同步任务:立即执行的任务,直接被主线程读取并执行。异步任务:异步执行的任务,会交给任务队列去处理。异步任务又分为宏任务与微任务。宏任务与微任务宏任务:异步 Ajax 请求、setTimeout、setInterval、文件操作,其它宏任务。微任务:Promise.then、.catch 和 .finally,process.nextTick,其它
2022-04-26 23:22:44
1104
1
原创 使用原生js实现图片放大器效果
今天在练习一个vue电商项目是,遇到一个图片放大区觉得很难理解,于是就动手使用原生js做了一个。HTML,JS部分代码 <div class="zoomContainer"> <!-- 图片最上方的蒙板,用来给放大区域做定位 --> <div class="panel"></div> <!-- 显示正常大小图片的地方 --> <div class="imageArea"><
2022-04-26 13:35:27
2027
原创 JavaScript中或运算符 “||“ 和与运算符 “&&“ 的运算规则
//state的数据是用axios请求的goodsList(state) { //state.searchList.goodList如果服务器数据回来了,是一个数组 //假如网络不给力|没有网state.searchList.goodList应该返回的是undefined //计算新的属性的属性值至少给人家来一个数组 return state.searchList.goodsList || []; },在vue中使用vuex开发中经常可以见到这样的代码,retur
2022-04-24 22:41:34
3115
原创 Swiper轮播图在vue中的使用
使用Swiper插件实现轮播图1.安装Swiper插件使用npm i swiper 或者 yarn add swiper 安装依赖包在入口文件引入swiper样式import “swiper/css/swiper.css”;2.使用swiper在需要使用swiper的组件引入swiper包import Swiper from “swiper”;然后在该组件中需要展示轮播图的地方插入以下代码 <div class="swiper"> <div class="sw
2022-04-23 14:21:14
1480
原创 Vue生命周期以及父子组件生命周期函数的执行顺序
Vue的八个生命周期函数beforecreate(创造前)在这一阶段开始处理组价实例的data,计算属性,方法,watch监听属性等配置。created(创造后)这一阶段实例的计算属性,方法,watch监听属性等已经配置完成,但是组件还没有被挂载。beforeMount(挂载前)组件开始挂载到页面上。mouted(挂载后)组件挂载已经完成,可以在此进行ajax请求,浏览器中已经含有组件的dom结构,这也是最早可以操作dom的阶段。beforeUpdate(更新前)当组件中进行数据更新时触发,此时
2022-04-20 13:51:23
3131
1
原创 JavaScript中基本数据类型,引用数据类型的区别以及深拷贝和浅拷贝概念
1.基本数据类型1.1基本数据类型的种类在js中一共有六中基本数据类型,分别是String 字符串Number 数值Boolean 布尔值Null 空值Undefined 未定义Object 对象其中String Number Boolean Null Number属于基本数据类型。1.2基本数据类型的特点基本数据类型在赋值时是将值本身传递给变量let num1 = 1;let num2 = num1; num2 = 2; //改变num2时不会改变num1conso
2022-04-18 19:57:24
794
原创 对防抖与节流的理解,以及借助闭包实现函数的防抖与节流
1.相关概念防抖:前面的所有触发都被取消,最后一次执行,在规定的时间之后才会触发,也就是说如果连续快速的触发,只会执行一次。节流:在规定的时间范围内不会重复触发回调,只有大于这个时间间隔才会触发回调,把频繁触发变为少量触发。闭包:闭包就是能够读取其它函数内部变量的函数。js中两种变量作用域:全局变量和局部变量。如果需要从外部读取一个函数内部的局部变量,就需要在函数内部在定义一个函数,这个被写在一个函数内部的函数就叫闭包。2.防抖与节流的实现防抖原理当第一次触发函数时,开启一个延迟器,如果再次
2022-04-18 17:13:50
238
原创 编程式路由导航连续跳转出现NavigationDuplicated报错的问题
1.错误示例如在多次点击搜索按钮进行编程式路由跳转时控制台会出现报错NavigationDuplicated2.分析错误产生原因原因是在vue-router3.1.0之后, 引入了promise的语法。如果路由跳转时里面的参数没有改变,会返回一个失败的promise,如果不去处理这个失败的promise,就会抛出这个错误。而声明式路由导航不会出现这种错误,因为Vue在底层已经处理好了。3.解决办法方法一我们可以在使用push和replace进行跳转时,手动的传入成功与失败的回调。this.
2022-04-16 13:16:02
1155
原创 Vue路由的params传参,query传参,以及传递props的写法
params传参路由的params传参需要设置占位符,如给search组件通过params传递keyword值路由配置信息{ name: "search", path: "/search/:keyword", component: Search, },传递的方法有三种第一种:直接传递字符串使用编程式路由导航的写法methods:{ goSearch() { this.$router.push("/search/" + this.k
2022-04-14 23:11:36
4032
原创 js中call(),apply(),bind()三种改变this指向方法的区别
apply方法apply方法接收两个参数,第一个参数是this的指向,第二个参数是函数接收的参数,以数组的形式传入,切当第一个参数为null或undefined时,函数的this会默认指向window,使用apply方法改变this指向后原函数会立即执行,且此方法只是临时改变this指向一次。//定义一个Person类class Person { constructor(name, age) { this.name = name; this.age = a
2022-04-13 21:44:30
363
原创 在js中if语句的判断语句的特点
if()括号里只能是Boolean类型的值,如果其中不是Boolean类型,if语句在做判断时会先将其转化为boolean值。在js中,只有0,NaN,Undefined,null会转化为false。所以有时执行if
2022-04-12 23:21:35
285
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人