Web前端
文章平均质量分 69
是草莓味的啊
这个作者很懒,什么都没留下…
展开
-
react组件中设置多个className
react组件中设置多个className原创 2022-12-25 11:39:48 · 1445 阅读 · 1 评论 -
iframe通信
iframe通信原创 2022-12-21 21:10:42 · 338 阅读 · 0 评论 -
js数组、对象、字符串常用方法
js数组、对象、字符串常用方法原创 2022-12-04 16:45:10 · 356 阅读 · 0 评论 -
vue和react的生命周期
vue和react(类组件、函数组件)生命周期对比原创 2022-12-04 00:55:21 · 456 阅读 · 0 评论 -
防抖和节流
防抖和节流原创 2022-12-03 22:11:30 · 83 阅读 · 0 评论 -
session,token,cookie,sessionstorage,localstorage的区别
每天一个前端小知识原创 2022-12-01 23:25:05 · 411 阅读 · 0 评论 -
高性能HTTP和反向代理Web服务器 - Nginx
nginx - 高性能http和反向代理web服务器原创 2022-11-28 19:38:26 · 1015 阅读 · 1 评论 -
手写redux
手写redux三、前端展示原创 2022-06-06 20:43:57 · 161 阅读 · 2 评论 -
React
一、状态提升共享状态是通过将其移动到需要它的组件的最接近的共同祖先组件来实现用户对子组件操作,子组件不改变自己的状态,通过自己的props把这个操作改变的数据传递给父组件,改变父组件的状态,从而改变受父组件控制的所有子组件的状态,这也是React单项数据流的特性决定的。二、Hook系统自带Hook与自定义Hook都只能在1.其他Hook中运行 2.组件中运行2.1.系统自带Hook2.1.1.useState2.1.2.useEffect2.2.自定义HookCustomer H原创 2022-05-15 17:33:18 · 277 阅读 · 2 评论 -
react+UmiJS+Antd Pro简介
react+UmiJS+Antd Pro简介原创 2022-03-10 17:13:32 · 3044 阅读 · 0 评论 -
react学习笔记
实习工作使用的技术栈是React+React DVA+React Umi+React AntDesign+React AntDesignPro一、React基础1.1.初始reactnpm i react react-dom:打开项目所在终端安装react<body> <div id="root"></div> <!-- 1.引入js文件 --> <script src="./node_modules/react/.原创 2022-02-27 15:58:05 · 227 阅读 · 0 评论 -
React基础
红色:精通,且要有对应的实战经验蓝色:熟练,达到基础练习量灰色:了解,课程听完即可黑色:视频学习地址开源地址:http://gitee.com/jishupang/web_tlas// 安装node// 判断node与npm有没有安装成功和版本号node -vnpm -v// 安装react脚手架npm install -g create-react-app// 创建react项目// 方法一:使用cmd,先使用mkdir创建文件夹,在里面运行下面这条命令// 方法二:使用vs.原创 2022-02-26 12:52:01 · 680 阅读 · 0 评论 -
js判断用户用什么终端打开的页面并实现跳转
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2022-01-06 18:26:45 · 475 阅读 · 0 评论 -
js跳转到其他页面并获取参数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2022-01-06 17:51:00 · 981 阅读 · 0 评论 -
js小案例 - - 点击按钮5s后跳转到百度
<button>点击</button><div></div><script> var btn = document.querySelector('button') var div = document.querySelector('div') var resttime = 5 btn.addEventListener('click',function(){ setInterval(function原创 2022-01-06 14:36:15 · 1673 阅读 · 0 评论 -
js中同步和异步的问题
1.js是单线程:同一时间只能做一件事由于js是为了处理页面用户交互和操作dom诞生的,对某个元素的添加删除不能同时进行2.单线程意味着所有任务都需要排队前一个任务结束,后一个任务才能开始执行如果一个任务执行时间过长,会造成页面渲染不连贯,导致页面渲染加载阻塞3.允许JS脚本创建多线程(出现了同步和异步)利用CPU的计算能力,HTML5提出Web Worker标准4.同步和异步同步:同一段时间只能做一件事情,程序执行顺序与任务排列顺序是一致的异步:同一段时间可以做多件事情,.原创 2022-01-06 13:38:11 · 480 阅读 · 0 评论 -
js中this指向问题
一般情况下this指向那个调用它的对象1.全局作用域 或 普通函数 中this指向window(定时器里面的this也指向window)<script> console.log(this) // this 指向 window function fn(){ console.log(this) // this 指向 window } fn() setTimeout(function(){ console.原创 2022-01-06 12:04:46 · 175 阅读 · 0 评论 -
jsの再体验 - - BOM(Web APIs 浏览器对象模型)
window,onload,onresize,setTimeOut,clearTimeout,setInterval,clearInterval原创 2022-01-05 20:08:06 · 182 阅读 · 0 评论 -
秒杀倒计时小案例
setInterval:开启定时器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">.原创 2022-01-05 19:43:51 · 211 阅读 · 0 评论 -
jsの再体验 - - DOM事件高级
jsのDOM页面交互一、注册事件1.1.传统注册方式1.2.方法监听注册方式1.3.IE9以前的方法监听注册方式1.4.兼容性封装注册函数一、注册事件1.1.传统注册方式特点:注册事件的唯一性同一个元素的同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖最前面注册的处理函数<button>1</button><button>2</button><script> var btns=document.querySe原创 2022-01-05 12:39:49 · 305 阅读 · 0 评论 -
css实现小气泡样式和模拟京东快递单号放大效果
css实现小气泡样式:border-color: #fff transparent transparent;transparent表示透明,第一个代表上三角,第二个代表左右三角,第三个代表下三角<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">..原创 2022-01-05 12:37:21 · 360 阅读 · 0 评论 -
模拟京东按键输入内容案例
当键盘 s 键 弹起时,让搜索框获取焦点原创 2022-01-05 11:55:28 · 254 阅读 · 0 评论 -
DOM重点核心
dom操作元素,增、删、改、查、属性操作、事件操作原创 2021-12-22 17:52:08 · 76 阅读 · 0 评论 -
jsの再体验 - - DOM(Web APIs 页面文档对象模型)
jsのDOM页面交互一、API与WebAPI1.1.API解读二、DOM2.1.DOM树2.2.获取文档对象2.3.事件三要素2.4.操作元素内容及属性2.5.操作表单元素的属性2.5.1.显示隐藏密码明文小案例2.6.操作元素样式属性(style)2.6.1.盒子的显示与隐藏案例2.6.2.显示隐藏文本框中的内容案例2.6.3.注册验证案例:判断密码是否在6-16位2.7.小案例2.7.1.按钮排他2.7.2.换页面皮肤效果2.7.3.隔行变色、全选和取消全选小案例2.8.操作自定义元素属性2.8.1.获原创 2021-12-19 20:16:41 · 451 阅读 · 0 评论 -
jsの再体验 - - ECMAScript(js基础语法)
一、初识js二、js的流程控制原创 2021-12-14 21:21:48 · 1152 阅读 · 0 评论 -
flex弹性盒布局
文章目录一、传统布局与flex弹性布局的对比二、flex布局初体验三、flex布局原理四、flex布局父项常见属性1.flex-direction 主轴的方向2.justify-content 主轴上子元素排列方式3.flex-wrap 子元素是否换行4.align-item 侧轴上子元素的排列方式(单行)5.align-content 侧轴上的子元素排列方式(多行)6.flex-flow 复合属性五、flex布局子项常见属性1.flex子项目占的份数2.align-self 子项目自己在侧轴的排列方式3原创 2021-10-19 15:10:59 · 382 阅读 · 0 评论 -
背景图属性 - - 精灵图的使用
什么是精灵图精灵图(雪碧图,CSS Sprites):图片整合技术,将若干小图标整合到一张大图片上,减少服务器接受和发送请求的次数,提高页面加载速度制作精灵图充分了解项目大概包含哪些图标,怎么分类才能拼出有利于后期维护的图像如何制作精灵图精灵图的应用1.设置容器元素合适的宽度2.设置容器元素的背景图为精灵图3.设置容器元素的背景图位置x,y轴(x轴正数是往右移,负数是往左移,y轴正数往下移,负数往上移 )...原创 2021-10-19 09:54:18 · 269 阅读 · 0 评论 -
element-ui的树形数据与懒加载
树形数据使用hasChildren属性查找孩子节点项目中树结构数据量较大,树节点必须懒加载,通过lazy属性,什么时候需要查什么时候才进行加载<template><div> <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all :tree-props="{chi原创 2021-10-09 21:37:06 · 783 阅读 · 0 评论 -
前端模块化开发--ES6模块化规范及babel转码器
文章目录一、ES6模块化规范二、babel转码器把es6转换成es5规范一、ES6模块化规范程序无法运行:因为ES6的模块化无法在Node.js中执行,需要用Babel编辑成ES5后再执行// 在01.js中定义两个方法,在02.js中进行调用// 由于方法要被调用,所以前面要加 export 关键字export default { fun1(){ console.log("fun1.....") }, save(){ console.原创 2021-09-30 15:00:05 · 117 阅读 · 0 评论 -
Node.js的基本语法
文章目录一、javascript引擎二、Node.js简介1.Node.js是什么2.Node.js的作用3.下载安装node.js三、BFF层 服务于前端的后端1.什么是BFF3.BFF解决什么问题四、Node.js的基本演示1.javascript运行环境(使用cmd运行)2.模拟服务端效果(使用cmd运行)3.使用vscode提供的terminal运行一、javascript引擎浏览器的内核包含两个部分:DOM渲染引擎 、 Javascript解析引擎Chrome浏览器内置V8引擎,V8引擎执原创 2021-09-30 12:50:25 · 728 阅读 · 1 评论 -
element-ui的基本使用
1.基本介绍element-ui是基于vue.js的后台组件库,方便进行页面的快速布局和构建element-ui网站element-ui组件库element-ui、bootstrap和ant design的关系都是成熟的第三方组件库区别在于组件库,element-ui和ant design是Vue写的原生组件库,而Bootstrap的组件库是用jQuery开发2.安装npm i element-ui -S3.基本使用<!DOCTYPE html><html原创 2021-09-30 10:08:03 · 1131 阅读 · 0 评论 -
axios的基本使用
一、ajax,jQuery和axios的关系ajax技术实现了网页的局部数据刷新,是原生的javascriptjQuery和axios都对ajax进行了封装ajax是针对MVC(model,view,controller)进行编程axios是针对MVVM(model,view,view model)进行编程二、axios的简单实现<body> <div id="app"> <table> <thead&g原创 2021-09-30 09:38:55 · 114 阅读 · 0 评论 -
前端知识点 | ES6基础语法
文章目录一、什么是ECMAScript61.ECMAScript与JavaScript的关系二、ES6的基本语法1.声明变量 let2.声明常量 const3.声明对象4. 解构赋值5. 模板字符串6. 对象拓展运算符7.箭头函数一、什么是ECMAScript6ECMAScript6.0(简称ES6)是JavaScript语言的下一代标准/规范,2015年6月正式发布目标:使JavaScript能编写复杂的大型应用,成为企业级开发语言。1.ECMAScript与JavaScript的关系ES原创 2021-09-29 14:32:48 · 263 阅读 · 0 评论 -
Bootstrap响应式布局案例- -阿里百秀
文章目录1.搭建结构2.show.html3.index.css4.所需图片1.搭建结构2.show.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 --> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-09-23 10:04:27 · 405 阅读 · 0 评论 -
响应式开发
1.响应式开发的原理使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同的设备2.响应式布局容器需要一个父级布局容器,来配合子级元素来实现变化效果。在不同屏幕下,通过媒体查询改变布局容器的大小,再改变子元素的排列方式和大小。...原创 2021-09-22 13:50:16 · 74 阅读 · 0 评论 -
Bootstrap响应式布局容器和栅格系统
一、Bootstrap简介来自Twitter(推特),是基于html,css,javascript简单灵活的框架,有利于web的快捷开发原创 2021-09-22 13:48:57 · 428 阅读 · 0 评论 -
Vue基础入门和常用指令
目录一、vue简介1.什么是vue2.vue的两大特性3.vue的底层原理MVVM4.vue的版本二、vue的基本使用1.基本使用步骤2.基本代码与MVVM的对应关系三、vue的调试工具1.在chrome浏览器中安装Vue.js devtools调试工具2.使用调试工具四、vue的指令五、vue的过滤器六、品牌列表案例一、vue简介1.什么是vue1.构建用户界面,使用vue往页面中填充数据2.框架,vue是一套现成的解决方案,程序员编写业务功能时需要遵守框架的规范vue指令、组件(对UI样式结原创 2021-09-19 19:22:09 · 406 阅读 · 0 评论 -
前端工程化与webpack
目录一、前端工程化二、webpack的基本使用实际的前端开发模块化:(js的模块化,css的模块化,资源的模块化)组件化:(复用现有的UI结构、样式、行为)(Layui)规范化:(目录结构的划分、编码规范化、文档规范化、Git分支管理)自动化:(自动化构建、自动部署、自动化测试)一、前端工程化把前端开发所需的工具、技术、流程、经验进行规范化、标准化早起前端工程化解决方案:grunt、gulp目前主流的前端工程化解决方案:webpack、parcel二、webpack的基本使用原创 2021-09-16 23:34:42 · 137 阅读 · 0 评论 -
NPM包管理器的简单使用
目录一、什么是NPM二、安装NPM一、什么是NPMnpm官网,全称Node Package Manager,node包管理器,帮助管理包的对应依赖关系和版本静态资源托管库二、安装NPMnpm的Node.js默认的软件包管理系统,安装完node,会默认安装好npm,npm本身npm init -y # 初始化包管理配置文件package.jsonnpm i jquery -S # 安装jquery...原创 2021-09-16 22:11:37 · 427 阅读 · 0 评论 -
Jquery入门
第五章5-1.jQuery简介1.jQuery封装js,成为一个js类库2.可以兼容各种浏览器,方便处理html,事件,动画效果,且方便为网站提供AJAX交互,写法简单,使用简单3.使用jQuary需要引入jquery的js文件,可以从jquery.com下载//直接将一个版本的jquery复制到一个以.js为后缀的文件夹中5-2jquery对象和DOM对象1.DOM对象:使用js...原创 2021-04-06 21:36:10 · 324 阅读 · 0 评论