- 博客(35)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 flex实现Sticky Footer布局
flex实现Sticky Footer布局<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } .container { min-height: 100vh; display: flex; fl
2022-01-10 22:50:36
363
原创 webpack5常用配置
webpack5常用配置电脑中需要安装node环境，可以输入node -v指令查看node版本npm install init -y，node项目初始化，生成的默认的package.jsonnpm install webpack webpack-cli --save-dev根目录下创建webpack.config.js配置文件最新版本及详细配置见官网webpack文件目录1. webpack五大核心概念entry：以哪个文件为入口起点开始打包output：指示打包后的资源输出
2021-10-07 11:00:15
441
原创 sesstionStorage简单封装
sesstionStorage存取函数封装由于项目中常需用到本地storage存储，复杂的数组、对象等，每次都需要JSON.stringify()和JSON.parse()进行序列化、反序列化操作。sessionStorage只是简单的key/value形式 不断地罗列，当存入的数据变多时显得杂乱无章，可以给数据分不同模块进行存取。const saveSessionStorage = function(key,val){ let person = sessionStorage.getI
2021-09-28 14:27:44
237
原创 数组方法reduce的详解与使用场景
数组方法reduce的详解与使用场景语法：arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])参数：callback执行数组中每个值的函数(如果没有提供 initialValue,则从数组的第二个值开始)，函数包含四个参数：accumulator:累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或者是initialValuecurrentValue:数组中正在处理的元
2021-09-12 20:39:22
142
原创 创建Ajax并用Promise封装
创建Ajax并用Promise封装1. 创建Ajaxlet xhr = new XMLHttpRequest(); xhr.open('get','xxxx',true); //open(请求方法,URL,是否异步) xhr.onreadystatechange = () =>{ //监听readyState值的变化 if(xhr.readyState === 4){ if(xhr.status >= 200 &&
2021-09-09 21:27:07
59
原创 javascript内置对象Date详解
javascript内置对象Date详解1. Date()与new Date()的区别Date()返回一个字符串(string)，内容为当前时间，没有日期对象方法，不支持参数new Date()返回一个日期对象(object)，是JavaScript的内置对象，可以调用内置方法，支持传递参数Date() //Mon Sep 06 2021 16:22:33 GMT+0800 (中国标准时间)new Date() //Mon Sep 06 2021 16:22:33 GMT+0800
2021-09-06 23:45:17
146
原创 javascript事件流详解
javascript事件流一、事件的级别DOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。而DOM事件分为3个级别：DOM0级事件处理，DOM2级事件处理和DOM3级事件处理。因为1级DOM标准并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。1.DOM0 级处理事件将一个函数赋值给一个事件处理属性<body> <div></div></body><script type="text/
2021-09-05 13:21:35
224
原创 css中background常用属性详解
background常用属性详解background-color为元素设置背景颜色值描述color_name规定颜色值为颜色名称的背景颜色（比如 red）。hex_number规定颜色值为十六进制值的背景颜色（比如 #ff0000）。rgb_number规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。transparent默认。背景颜色为透明。inherit规定应该从父元素继承 background-color 属性的设
2021-09-04 13:39:27
505
原创 Number parseInt parseFloat之间的区别
Number 、parseInt 、parseFloat之间的区别1. NumberNumber()函数把对象的值转换为数字Number()看的是整体， 如果一个参数值不能转换为一个数字将返回 NaN (非数字值)Number('123') // 123Number('12.3') // 12.3Number('12.00') // 12Number('123e3') // 123000Number('') // 0Numbe
2021-09-01 11:09:46
102
原创 null与undefined的区别
null与undefined的区别undefined原始值的初始，即未定义（undefined表示 “缺少值”,就是此处应该有一个值,但是还没有定义）经常出现的场景//1.已声明未赋值的变量let str ;console.log(str)//undefined//2.获取对象不存在的属性let str = {};console.log(str.name)//undefined//3.函数没有返回值function func (){}console.log(func())//
2021-08-29 18:10:32
52
原创 深挖BFC(BFC是什么？怎么触发？如何解决常见问题？)
深挖BFC(BFC是什么？怎么触发？如何解决常见问题？)1.BFC是什么BFC（Block Formatting Context ）块级格式化上下文。可以把BFC看成一个被隔离的空间，BFC的子元素不会对外面的元素产生影响。2.BFC触发条件float:left|right;overflow: auto (常用)| scroll | hiddendisplay: inline-block | table-caption | table-cell |flex |gridpositio: a
2021-08-27 00:12:14
95
原创 vue中.sync的使用详解
vue中.sync的使用详解1. 父子组件传值在Vue中，子父组件最常用的通信方式就是通过props进行数据传递，props值只能在父组件中更新并传递给子组件，在子组件内部，是不允许改变传递进来的props值，这样做是为了保证数据单向流通。但有时候，我们需要在子组件内部改变props属性值并更新到父组件中，需要用到.$emit来传递属性值代码//===================================父组件<template> <div> &
2021-08-22 12:05:58
2807
原创 javascript实现防抖与节流
JS实现节流与防抖1. 防抖定义：在触发事件后，规定的事件内回调函数只能执行一次，如果在规定事件内又触发了该事件，则会重新开始计算规定事件1.1 非立即执行版事件触发 ->延时->执行回调函数。如果在延时中继续触发事件，则会重新进行延时。在延时结束后执行回调代码及思路function debounce(fn, delay) { let timer = null; return function() { // 清除已存在的定时器
2021-08-21 22:15:42
228
原创 vue项目配置代理解决跨域问题
Vue项目配置代理前端向服务器发送请求时，经常会遇到跨域问题，那么什么是前端跨域呢？在vue项目中如何利用代理解决呢？什么是跨域？JavaScript同源策略：当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。**同源策略限制：**表单提交、AJAX请求等。注意：跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。proxy代理
2021-08-19 09:37:07
586
原创 vue中mixin(混入)的使用方法
Vue中mixin（混入）的使用方法官方介绍概念：可以把多个组件共用的配置提取成一个混入对象官方文档位置定义一个混入对象(mixin/index.js)const myMixin = { data() { return { name: "xxxxx", age: 20 } }, created() { console.log('我是mixin'); },}exp
2021-08-16 15:55:39
157
原创 vue中插槽的使用方法
Vue中插槽的使用方法vue官网插槽介绍默认插槽使用方法：在子组件中使用slot标签进行占位，在父组件中给占位填充内容子组件<template> <div> <h1>我是标题：</h1> <slot></slot> </div></template><script>export default { name: "Son", data() {
2021-08-15 10:49:08
203
原创 vue项目配置路径别名
vue.config.js配置路径别名及具体使用方法配置代码module.exports = { configureWebpack: { resolve: { alias: { // '@': 'src' 内部已经配置了这个 'assets': '@/assets', 'components': '@/components', '
2021-08-13 08:50:21
164
原创 axios的基本使用方法
axios的基本使用方法与配置axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。axios特点基于promise的异步ajax请求库浏览器端/node端都可以使用支持请求/响应拦截器支持请求取消请求/响应数据转换批量发送多个请求客户端支持防御 XSRF网站地址官方网址中文文档安装方法html中引入：//Using jsDelivr CDN:<script src="https://cdn.jsdelivr.net/np
2021-08-11 21:31:00
978
原创 css实现二级菜单
css实现二级菜单代码<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style type=
2021-08-09 14:57:54
181
原创 纯css绘制三角形
纯css绘制三角形HTML<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style typ
2021-08-09 09:59:14
51
原创 css超出部分省略（单行、多行，多种方法实现）
css超出部分省略效果（单行、多行，多种方法实现）HTML<p class="text">这是一行测试数据,这是一行测试数据,这是二行测试数据,这是一行测试数据,这是三行测试数据,这是四行测试数据</p>1.单行.text{ width: 200px; border: 1px solid #000000; white-space: nowrap; /* 控制元素不换行 */ overflow: hidden; /* p标签超出部
2021-08-06 23:26:55
826
原创 css实现扩大选中范围 (三种方法)
css实现扩大选中范围HTML<style type="text/css"> <!-- 大盒子样式 --> .content{ position: relative; width: 60%; height: 400px; margin: 0 auto; border: 1px solid orange; } <!-- 关闭按钮样式 --> .clo
2021-08-06 11:22:17
1344
原创 vue实现轮播图
vue实现轮播图需求进入页面后开启轮播。左右按钮点击无缝衔接。右下角圆点与当前banner图对应展示,点击可控制图片展示。当前图片对应的圆点为黑色背景鼠标进入图片后轮播停止,移除图片后轮播启动。实现思路需要用到vue的生命周期函数mounted,在界面加载后启动定时轮播。要实现无缝衔接最重要的是做好点击最后一张图片向右和第一张图片向左的判断。currentIndex从0开始，当currentIndex++等于数组的长度时，说明当前在最后一张图片了，那么点击后就使currentI
2021-08-05 22:46:36
40699
30
Webpack5.zip
2021-10-08
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人