lxs19930928的博客

什么是BFC BFC全称: (Block-Formatting-Context),也就是块级格式化上下文，它是一个独立的渲染区域，它规定了在该区域中，常规流块盒的布局，不同的BFC区域，他们进行渲染时互不干扰BFC的特点： 1：内部的box盒子，会在顶部开始一个结一个的放置 2: BFC内部的盒子不会与浮动元素发生重叠 3: 创建BFC的元素，不会和它的子元素的外边距合并 4: 创建BFC的元素,它的自动高度计算浮动元素的高度 5: BFC是一个独立的容器，容器里边的子

1 双层for循环let arr = [1,1,2,3,3,4,5,6];function uniqueArr(arr) { for(let i = 0; i < arr.length; i++ ) { for(let j = i+1; j < arr.length; j++) { if(arr[i] == arr[j]) { arr.splice(j,1); j--; } } } return arr}

1：弹性布局父类设置 display: flex justify-content: center; align-items: center; <div id="app"> <div class="parent"> <div class="child">子元素</div> </div> </div> .parent { display: flex; jus

1: 浮动加上BFC(overflow: hidden) <style> #app { height: 500px; width: 100%; line-height: 500px; text-align: center; color: #ffffff; overflow: hidden; } .left { width: 200px; float: left;

1 圣杯布局为什么圣杯布局把主要内容放在第一位先加载呢 这样做并不是说为了让主内容先渲染出来，而是说在样式加载慢或无样式的时候先向用户呈现主要内容。最主要的还是因为SEO和无障碍方面做出的考虑。 #app { min-width: 600px; } .header,.footer { height: 100px; width: 100%; line-height: 100px; text-align: center;

前端解决跨域问题新建server.js yarn add express const express = require("express")const app = new express();app.get('/user', function(request, response) { response.send('hello World')})app.listen(5000, function() { console.log("Server is running ....")}

##我们知道vue组件通信有很多种，这里我把自己所知道12种vue组件通信总结出来1：父子组件通信 ，（v-bind和props实现父子传值）parent.vue <template> <div class="parent"> <Child name="张三"/> </div> </template> child.vue <template> <div .

一：路由组件和普通组件的区别如果说组件是通过路由跳转过来的，我们可以直接获取到history,location,match对象如果说组件是一个普通的组件，那么是不可以直接获取到history，location,match对象的可以看到我们不可以获取到history和location,match对象接下来我们使用高阶组件 withRouterimport React, { Component } from 'react'import { BrowserRouter as Router, R

编程式导航跳转v5import { useHistory } from 'react-router-dom';function MathTeacher() { // 编程式导航跳转 let history = useHistory(); const jumpHandler = ()=>{ history.push("/teacher") } return ( <div> <h1>数学老师</h1>

嵌套路由使用 import React, { Component } from 'react'import { HashRouter as Router, Route, Link, Routes } from 'react-router-dom'function Teacher() { return ( <div> <h1>老师</h1> </div> )}function MathTeacher() {

import React, { Component,lazy,Suspense } from 'react'import { BrowserRouter, NavLink, Route, Routes } from 'react-router-dom';// import Home from './pages/Home'// import About from './pages/About'// import Login from './pages/Login'// react路由懒加载引入

<ul> <li><NavLink to="/" exact="true" activeclassname="active">首页</NavLink></li> <li><NavLink to="/about" activeclassname="active">关于我们</NavLink></li> <li>&...

Switch作用就是防止重复匹配，只匹配匹配到的对应的路由，防止性能浪费v5版本的写法 import { BrowserRouter, Link, Route, Switch } from 'react-router-dom'; <BrowserRouter> <ul> <li><Link to="/">首页</Link></li> <li><L

一：父子传值 (props传值)Child.js import React from 'react'export default function Child({userInfo}) { return ( <div> <h1>Child组件</h1> <div> 姓名 ---- {userInfo.name} 年龄 ---- {userInfo.age} 性别 ---

什么是redux redux是一种状态管理工具，类似于vue中的vuexredux的三大原则 1: 单一数据源 2: state是只读的，修改state唯一方法就是触发action 3: 使用纯函数 reducer来修改state,返回一个新的state给storeredux的工作流程const redux = require('redux')// redux三大块 store action reducerconst initState = { count: 0,}//

react事件绑定this的几种写法正常我们不绑定this，this是nullimport React, { Component } from 'react'export default class App extends Component { constructor() { super() this.state = { } } clickHandler() { console.log("this",this); } render() { ret

初始化父子组件的生命执行顺序 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted父子组件更新的顺序 父beforeUpdate->子beforeUpdate->子updated->父updated父子组件的销毁顺序 父beforeDestory->子beforeDestory-&gt

一 下载SVN Server，进行配置(1):创建仓库名称(2): 新建用户和密码(3): 检出地址(4): 输入用户名和密码二 如何解决冲突（1）第一种：一般在vscode中解决，当前传入（我的） 远程传入（线上的）进行对比，解决冲突即可（2）第二种：三 如何回退版本(1): 右键。点击更新至版本即可(2):点击HEAD ，出来提示框，进行操作即可四 如何设置忽略的文件五 如何设置成员的权限设置成员是否是只读的还是可写的或者是可读可写的记住删除每个人的Ev

分布式版本控制系统git的常用指令git clone 克隆代码git pull origin git add -A 提交本地代码到暂存区git commit -m ‘feat:description’ 将本地暂存区的代码提交到本地版本库git push -u origin 将本地版本库的代码提交到远程代码仓库git checkout 切换分支git checkout -b 创建分支 切换分支git log 查看提交的日志和commitHash值

新建vue3项目 npx vue create project 手动选择vue3项目即可 运行 yarn serve进入antd-design-vue官网,选择v2或者v3即可下载antd-design-vueyarn add ant-design-vue@nextmain.js引入 import { createApp } from 'vue'import App from './App.vue'import router from './router'import stor

axios.CancelToken主要是解决重复请求造成的一系列问题新建service.jsyarn add express -D const express = require("express")const app = new express();app.get('/user', function(request, response) { response.send('hello World')})app.listen(5000, function() { console.log(

什么是npm npm是node.js 的软件包管理器，目标是实现自动化的依赖性和软件包管理。什么是npx npx是npm5.2新增的软件包管理工具，与npm绑在一起使用npx好处,使用 npx 去执行包时，会保证使用的是最新的构建工具，无需担心包版本升级的问题 # 比如创建vue应用时 vue create project # 没有该包的话会有报错提示 zsh: command not found: @vue/cli# 使用npx，先去判断有没有@vue/cli，会走npx作

下载 hard-source-webpack-pluginyarn add hard-source-webpack-plugin -Dconst hardPlugin = require("hard-source-webpack-plugin")const { resolve } = require("path")module.exports = { configureWebpack: { plugins: [ new hardPlugin({ // 缓存启动的文件，提升

1：下载echarts最新版本yarn add echarts -D 默认最新版本 5.2.2版本在assets文件夹下新建data.json,中国地图需要用到 {"type":"FeatureCollection","features":[{"type":"Feature","id":"xin_jiang","properties":{"name":"新疆","cp":[84.9023,41.748],"childNum":18},"geometry":{"type":"Polygon","co

（一):普通组件缓存三种写法 <!-- 组件缓存的第一种写法: 字符串逗号分隔符--> <!-- <keep-alive include="ComA"> <componnet :is="status"></componnet> </keep-alive> --> <!-- 组件缓存的第二种写法:正则表达式的写法 // --> <!-- <keep-alive

vue中五种方式实现页面“刷新”1: 使用window.location.reload() 强制刷新 都会使页面有短暂的空白，体验效果不是特别好home.vue <button @click="refreshPageHandler">刷新页面</button> methods: { refreshPageHandler() { console.log("点击刷新页面") window.location.reload() // 第一种

什么是防抖和节流防抖: 触发高频事件后n秒后，函数只会执行依次，如果n秒内再次触发，则重新计时节流: 高频事件触发，但是在n秒内只会执行一次，在这n秒内，无论触发多少次，只会执行一次，节流会稀释函数的执行频率防抖的应用场景:1 resize窗口缩放2 输入框中不停输入节流应用场景1 scroll滚动事件,上拉加载2 按钮不停点击debounce.js function debounce(fn,delay=500) { let timer = null;

Math常用的属性和方法Math.abs() 返回绝对值Math.ceil() 向上取整Math.floor() 向下取整Math.max() 返回最大值Math.min() 返回最小值Math.random() 返回随机值Math.round() 四舍五入Math.sprt() 返回数的平方根Math.sqrt(16); 4Math.pow() 返回x的y次幂Math.PI() 返回PIMath.sin() 返回正弦Math.cos() 返回余弦Math.acos(x) 返回反

什么是日期对象Date对象是处理日期和时间的日期对象是new Date()实例化对象创建的日期的属性constructorprototype日期常用的方法getDate() 返回月中的第几天（从 1 到 31）。getDay() 返回的星期(0-6)getFullYear() 返回年份getMonth() 返回月份(0-11)getHours() 返回小时(0-23)getMinutes() 返回分钟(0-59)getMillSeconds() 返回毫秒(0-999)ge

对象常用的方法Object.assign() 对象合并Object.freeze() 对象冷冻Object.defineProperty() 对象劫持Object.prototype.toString.call() 判断数据类型Object.keys() 转换为键名数组Object.values() 转换为键值数组Object.entries() 转换为键值对的二维数组object.hasOwnPorperty() 返回布尔值，指示对象自身属性中是否具有指定的值isPrototypeOf

正则常用的方法修饰符i 执行对大小写不敏感的匹配g 执行全局匹配(查找所有的匹配，并非是在找到第一个匹配后停止)m 执行多行匹配常用的元字符\w 查找单词字符\W 查找非单词字符\d 查找数字\D 查找非数字\s 查找空白字符 (包括空格、制表符、换页符)\S 查找非空白字符\b 匹配单词边界\B 匹配非单词边界\n 换行符\f 换页符\r 回车符\t 制表符方括号[0-9] 查找任何从 0 至 9 的数字[a-z] 查找任何从小写 a 到小写 z 的字符。

number常用的方法toString() 转换为字符串toLocaleString 把数字转换为字符串，使用本地数字格式顺序。valueof 返回数值的原始值var a = 6666;a.toLocaleString();// "6,666"a.toString();//"6666"var dt = new Date();console.log(dt.toLocaleString());//2019/9/11 下午4:46:04console.log(dt.toString(

字符串的属性String.length字符串常用的方法indexOf() 返回指定字符串首次出现的位置,有返回1,没有返回-1lastIndexOf() 未指定，返回指定字符串在尾部首次出现的位置,有返回1,没有返回-1includes() 返回符合条件的字符串，有返回为true,没有返回falsesearch() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。返回值是指定位置的下标，没有找到返回为-1match() 找到一个或多个正则表达式的匹配。返回值是一个数

原型继承function Father(name="李四",age=20) { this.name = name; this.age = age}Father.prototype.gender = "男" function Child() { this.name = "张三"}Child.prototype = new Father()var child = new Child()child.gender="女"child.age = 18console.log("chil

数组中常用的属性length数组中常用的方法concat 数组合并 (es6的扩展运算符)reverse() 数组反转sort() 数组排序splice() 数组截取和添加替换(两个参数代表的是删除，三个删除代表的是替换或者添加，当第二个参数为0事，表示添加)- 第二个参数代表删除的个数或者替换的个数(替换的个数大于原数组的部分长度，只取原数组的最大长度)，第三个参数代表的是替换的元素slice() 截取数组(开始索引和结束索引之间，包括开始索引不包括结束索引)pop 数组删除，返回被删除

瀑布流

1：第一种方案下载插件yarn add postcss-px2rem@5 -Dyarn add amfe-flexible -D新建postcssrc.jspostcssrc.jsmodule.exports = { plugins: { // 'postcss-import': {}, // 'postcss-url': {}, // to edit target browsers: use "browserslist" field in package.j

新建vue.config.jsvue.config.jsnpm i uglifyjs-webpack-plugin -Dcnpm i uglifyjs-webpack-plugin -Dyarn add uglifyjs-webpack-plugin -D(推荐使用yarn)const path = require("path");const CompressionPlugin = require("compression-webpack-plugin"); // 开启gzip压缩， 按

什么是插槽 插槽顾名思义就是一个占位符的意思，可以进行传参，可以设置其它的元素布局,我就简单说下插槽的几种写法vue中有三种插槽默认插槽具名插槽作用域插槽插槽在vue中的具体应用slotA.vue<template> <div class="demo1"> <slot>默认插槽</slot> <slot name="header"></slot> <slot name="co

第一种新建 utils文件夹，在utils文件夹下新建 globalComponent.js文件import Demo1 from '../components/demo1.vue'import Demo2 from '../components/demo2.vue'import Demo3 from '../components/demo3.vue'import Demo4 from '../components/demo4.vue'export default { install