自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(34)
  • 收藏
  • 关注

原创 列表项按需加载 v-infinite-scroll 滚动条触底无效 解决方案

后台返回的分页数据需要实现滚动条触底加载下一页, 用了element-ui 的指令来实现。但是发现在某一分辨率下, 滚动条触底时未触发加载方法。

2023-04-28 15:31:38 2813 1

原创 登录移动端页面, 跳转到pc端页面的问题解决

问题所在: 了解后得知, 该项目为SSO单点登录, 在环境文件中单点ID被注释掉了, 125则进入移动端系统, 否则默认进入 124 PC端页面。问题描述: 新拉取的项目, 登录移动端页面, 会跳转到pc端页面.补充: 单点处理方法见项目代码。

2022-11-17 16:23:11 459

原创 less-loader安装报错 | Invalid tag name “@7.2.1“ of package “@7.2.1“: Tags may not have any characters

报错显示: 原因: less-loader与版本号之间写了空格, 删掉即可正确安装

2022-07-07 16:52:47 1153

原创 Ajax(1)

理解浏览器和服务器通信过程掌握axios的使用理解接口的概念 1. FeHelper 谷歌浏览器插件安装 在浏览器访问的地址返回的不是网页(标签+样式), 而是JSON的字符串内容, 会帮助美化它的展示格式 2. postman安装并汉化了解浏览器和服务器的作用浏览器概念: 安装并运行在电脑上的一个软件, 常见浏览器软件如下 浏览器作用: 输入网址, 即可浏览相关内容 (数据)思考: 浏览器自己有这些内容吗? 肯定是没有的! 那浏览的这些网页文件在哪里

2022-06-21 09:14:30 298

原创 JavaScript 高阶(3) | 编程思想 构造函数 原型

目录1 编程思想1.1 面向过程编程1.2 面向对象编程(oop)2 构造函数(回顾)3 原型3.2 constructor 属性3.3 对象原型 ​3.4 原型继承3.4.1 继承3.4.2 问题3.4.3 解决3.5 原型链3.5.2 原型链-查找规则4 案例 消息提示对象封装(-3)面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次 调用就可以了。面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。在面向对象程序开发思想中,每一个对象都是功能

2022-06-19 16:05:35 198

原创 JavaScript 高阶(2) | 构造函数&数据常用函数

目录1 深入对象1.1创建对象三种方式1.1.1 利用对象字面量创建对象[推荐]1.1.2 利用 new Object 创建对象1.1.3. 利用构造函数创建对象1.2 构造函数1.3 实例成员&静态成员2 内置构造函数2.1 Object2.1.1 Object.keys 静态方法获取对象中所有属性(键)2.2.2 Object.values 静态方法获取对象中所有属性值2.2.3 Object. assign 静态方法常用于对象拷贝2.2 Array2.2.1 数组常见实例方法-核心方法2.2.2 数组

2022-06-18 19:45:37 328

原创 JavaScript 高阶 | 作用域&解构&箭头函数

目录1 作用域1.1 局部作用域1.2 全局作用域1.3 作用域链1.4 JS垃圾回收机制1.4.1 什么是垃圾回收机制?1.4.2 内存的生命周期1.2.3 垃圾回收算法说明1.5 闭包​编辑 1.6 变量提升2 函数进阶2.1 函数提升2.2 函数参数2.2.1 动态参数2.2.2 剩余参数补充:展开运算符2.3 箭头函数(重要)2.3.1 语法2.3.2 箭头函数参数2.2.3 箭头函数 this3 解构赋值3.1 数组解构 作用域(scope)规定了变量能够被访问的“范围”,离开了这个“范围”变

2022-06-13 22:16:03 635

原创 Web APIs day6 | 正则&阶段案例

目录1 正则表达式1.1 什么是正则表达式1.2 语法1.3 元字符1.3.1 定义1.3.2 参考文档1.3.3 边界符1.3.4 量词1.3.5 字符类1.4 修饰符1.4.1 替换 replace1.4.2 g&i2 综合案例案例1 用户名验证案例案例2 昵称案例正则表达式(Regular Expression)是用于匹配字符串中字符组合的模式。在 JavaScript中,正则表达式也是对象通常用来查找、替换那些符合正则表达式的文本,许多语言都支持正则表达式。◇ 正则表达式在 JavaScript中

2022-06-13 08:59:16 190

原创 Web APIs day5 | Bom操作 【Window对象(延时函数)&本地储存】

BOM(Browser Object Model ) 是浏览器对象模型window对象是一个全局对象,也可以说是JavaScript中的顶级对象像document、alert()、console.log()这些都是window的属性,基本BOM的属性和方法都是window的。所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法 window对象下的属性和方法调用的时候可以省略window⚫ JavaScript 内置的一个用来让代码延迟执行的函数,叫 setTimeout⚫ 语法

2022-06-13 08:57:55 177

原创 Web APIs day4 | Dom节点&移动端滑动 (日期\节点\M端\swiper)

目录1 日期对象1.1 实例化2.2 日期对象方法2.3 时间戳2 节点操作2.1 DOM节点2.2 查找节点2.2.1 父节点 2.2.2 子节点查找2.2.3 兄弟关系查找2.3 增加节点2.3.1 创建节点2.3.2.追加节点2.3.3 克隆节点2.3.4 删除节点3 M端事件4 JS插件-swiper5 综合案例案例1 游乐园轮播图案例2 学生信息表案例创建时间使用场景:因为日期对象返回的数据我们不能直接使用,所以需要转换为实际开发中常用的格式案例-页面显示时间需求:将当前时间以:YYYY-

2022-06-10 09:07:22 290

原创 Web APIs day3 | Dom事件进阶(事件流、事件委托、加载 &滚动事件)

目录1 事件流1.1 事件流与两个阶段说明1.2 事件捕获1.3 事件冒泡1.4 阻止冒泡1.5 解绑事件1.6 补充1.6.1 鼠标经过事件的区别1.6.2 两种注册事件的区别2 事件委托3 其他事件3.1 页面加载事件3.1.1 资源加载3.1.2 页面dom加载3.2 元素滚动事件3.2.2 页面滚动事件-获取位置3.2.3 页面滚动事件-滚动到指定的坐标 3.2.4 案例3.3 页面尺寸事件 3.3.2 页面尺寸事件-获取元素宽高 4 元素尺寸于位置事件流: 指的是事件完整执行过程中的流动路径(

2022-06-05 18:50:19 332

原创 Web APIs day2 | Dom事件基础 (事件监听、事件对象、环境对象、回调函数)

学习目标: 掌握事件绑定处理和事件对象,完成常见网页交互目录1 事件监听(绑定)1.1 事件监听1.2 拓展阅读-事件监听版本2 事件类型3 事件对象3.1 获取事件对象3.2 事件对象常用属性4 环境对象5 回调函数综合案例目标:能够给 DOM元素添加事件监听什么是事件? 什么是事件监听?- 语法:- 事件监听三要素:如:注意: 1. 事件类型要加引号 2. 函数是点击之后再去执行,每次 点击都会执行一次案例 京东点击关闭顶部广告需求:点击关闭之后,顶部关闭分析:①:点击的是关闭按钮②:关闭的是父盒子核

2022-06-04 19:02:55 384

原创 Web APIs day1 | Dom获取&属性操作 间歇函数

变量声明有三个 var let 和 const, 我们应该用那个呢?- 首先var 先排除,老派写法,问题很多,可以淘汰掉…- let or const ?建议: const 优先,尽量使用const,原因是: const 语义化更好 -很多变量我们声明的时候就知道他不会被更改了,那为什么不用 const呢?实际开发中也是,比如react框架,基本都用const建议:有了变量先给const,如果发现它后面是要被修改的,再改为let- const 声明的值不能更改,而且const声明变量的时候

2022-06-02 09:50:37 328

原创 面试宝典 | JavaScript 基础

1、 JavaScript 的基本类型有哪些?引用类型有哪些?null 和 undefined 的区别?(必会)1数据类型 基本数据类型:Number、String、Boolean、null、undefined引用数据类型:Object、Function、Array?2 区别undefined:表示变量已声明但未初始化时的值。(未赋值) null:表示准备用来保存对象,还没有真正保存对象的值。(赋空值,占个位) 从逻辑角度看,null 值表示一个空对象指针 ECMA 标准要求 .

2022-05-31 19:47:37 490

原创 JS基础 day5 | 对象( 对象\Math)

1 对象1.1 什么是对象思考:1. 保存网站用户信息,比如姓名,年龄,电话号码… 用以前学的数据类型方便吗?  不方便,很难区分 2. 我们是不是需要学习一种新的数据类型,可以详细的描述某个事物?  姓名  年龄  电话  …...............

2022-05-29 21:21:22 427

原创 JS基础 day4 | 函数

1 函数1.1 为什么需要函数函数: function,是被设计为执行特定任务的代码块说明: 函数可以把具有相同或相似逻辑的代码“包裹”起来,通过函数调用执行这些被“包裹”的代码逻辑,这么做的优势是有利于 精简代码方便复用。比如我们前面使用的 alert() 、 prompt() 和 console.log() 都是一些 js 函数,只不过已经封装好了,我们直接使用的。1.2 函数使用1 函数的声明语法eg:函数名命名规范 和变量命名基本一致 尽量小驼峰式命名法

2022-05-28 10:47:24 1329

原创 JS基础 day3 | for循环+数组

1 循环-for1.1 for 循环-基本使用1.1.1for循环语法 作用:重复执行代码 好处:把声明起始值、循环条件、变化值写到一起,让人一目了然,它是最常使用的循环形式

2022-05-27 18:25:17 5275

原创 JS基础 day1 | JS介绍、变量常量、数据类型及转换

1 JavaScript 介绍1.1 JavaScript 是什么1.1.1JavaScript (是什么?)是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。 除此之外编程语言还有c,c++,python等.1.1.2作用(做什么?)– 网页特效 (监听用户的一些行为让网页作出对应的反馈)– 表单验证 (针对表单数据的合法性进行判断)– 数据交互 (获取后台的数据, 渲染到前端)......

2022-05-26 11:20:17 658

原创 移动web day3 | 移动端特点、百分比/flex布局

01 移动端特点1.1 移动端和PC端网页不同点PC端网页和移动端网页的有什么不同?Ø PC屏幕大,网页固定版心Ø 手机屏幕小, 网页宽度多数为100%如何在电脑里面边写代码边调试移动端网页效果?使用谷歌模拟器1.3 视口1.4 二倍图UI作图往往适配设备物理分辨率,而前端作图需要考虑逻辑分辨率,因此常将原图称为二(三)倍图.2 百分比布局 百分比布局, 也叫流式布局 效果: 宽度自适应,高度固定。 ...

2022-05-25 16:56:27 136

原创 移动web day5 | 响应式 媒体查询、BootStrap框架

1 媒体查询 简写:1.1 根据设备宽度的变化,设置差异化样式媒体特性常用写法max-width:--px(当屏幕小于--时) min-width:--px(当屏幕大于--时)如下案例: body { background-color: green; } /* 媒体查询 不是选择器 会被层叠,如果body 放最后,会变全绿 */ @media (max-width:1200px) { bod...

2022-05-25 16:55:04 134

原创 VScode 使用 | 常用插件、快捷键、

一、常用插件英语救星:二、常用快捷键1、选定多个相同单词快捷键:ctrl+d

2022-05-25 16:53:42 116

原创 JS基础 day2 | 流程控制 运算符、语句(分支+循环)

1 运算符1.1 赋值运算符目标: 能够使用赋值运算符简化代码◇赋值运算符:对变量进行赋值的运算符已经学过的赋值运算符:= 将等号右边的值赋予给左边, 要求左边必须是一个容器 其他赋值运算符: += 【+= 出现是为了简化代码, 比如让 let num = 10 ,num 加5 → num += 5】 -= *= /= %= ◇使用这些运算符可以在对变量赋值时进行快速操作1.2 一元运算符目标: 能够使用一元运算符做自增运算众多的 JavaS..

2022-05-24 22:40:35 871

原创 移动web day4 | 移动适配

移动适配目的: 屏幕宽度不同,网页元素尺寸不同(等比缩放).1 长度单位1.1 rem1em=1当前盒子文字大小 1rem=1html文字大小(16px)1.1.2 媒体查询1 目标:能够使用媒体查询设置差异化CSS样式 ( 随不同视口大小调整html字号 )媒体查询能够检测视口的宽度,然后编写差异化的 CSS 样式 当某个条件成立, 执行对应的CSS样式2 写法:目前rem布局方案中,将网页等分成10份, HTML标签的字号为视口宽度的 1/10.

2022-05-21 08:51:01 109

原创 移动web day2 | 3D转换、动画

1 空间转换(3D)目标:使用transform属性实现元素在空间内的位移、旋转、缩放等效果空间:是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同。空间转换也叫3D转换 属性:transform(同2D)1.1 空间位移语法: transform: translate3d(x, y, z); transform: translateX(值); transform: translateY(值); transform: transl.

2022-05-14 19:46:22 162

原创 移动web day1 | 平面转换、渐变

1 平面转换目标:使用transform属性实现元素的位移、旋转、缩放等效果平面转换Ø 改变盒子在平面内的形态(位移、旋转、缩放)Ø 2D转换平面转换属性Ø transform1.1 位移目标:使用translate实现元素位移效果语法选择器 { /* 记住小括号里多个值是用英文,分割的 */ transform: translate(水平移动距离, 垂直移动距离);}取值(正负均可)Ø 像素单位数值Ø 百分比(参照物为盒子自身尺寸)

2022-05-12 21:40:30 78

原创 CSS(6) | CSS高级技巧

1 精灵图1.1 为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送 请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了 CSS 精灵技术(也称 CSS Sprites、CSS 雪碧)。核心原理:将网页中的一些小背景图像整合到一张大图中 ,这样服务器只需要一次请求就可以了。 1.2 精灵图(sprites)的使用◇场....

2022-05-12 09:30:53 117

原创 CSS(5) | 定位、元素隐藏

1 定位1.1 为什么需要定位1. 浮动可以让多个块级盒子一行没有缝隙排列显示, 经常用于横向排列盒子。2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。1.2 定位组成定位:将盒子定在某一个位置,所以定位也是在摆放盒子, 按照定位的方式移动盒子。定位 = 定位模式 + 边偏移 。 1.2.1 定位模式定位模式决定元素的定位方式 ,它通过 CSS 的 position 属性来设置,其值可以分为四个:值 语义 stat

2022-05-03 16:55:29 222

原创 CSS(4) | 伪元素&浮动&PS切图

1 浮动(float)1.1 传统页面布局的三种方式页面布局的本质——用css来摆放盒子。css提供了三种传统布局方式(盒子如何进行排列顺序):普通流 浮动 定位实际开发中,往往一个页面会同时用到这三种布局方式。(移动端会学习到新的布局方式)1.2 普通流(标准流、文档流)普通流:标签按规定好默认方式排列。是最基本的布局方式。1、块级元素独占一行、从上到下顺序排列常用元素:div、hr、p、h1-h6、ul、ol、dl、form、table2、行内元素从左到右顺序排列

2022-04-13 23:02:25 470

原创 CSS (3) | 盒子

1 css三大特性css有非常重要的三大特性:层叠性、继承性、优先级。1.1 层叠性相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠);另一个冲突样式。层叠性主要解决样式冲突问题。......

2022-04-09 16:04:44 745

原创 CSS (2) | Emmet语法、复合选择器、元素显示、背景、CSS特性

1 Emmet语法Emmet语法的前身是Zen coding,它使用缩写,来提高HTML / CSS的编写速度,Vscode内部已经集成该语法。快速生成HTML结构语法 快速生成CSS样式语法1.1 快速生成HTML结构语法生成标签直接输入标签名按tab键即可,然后tab键,就可以生成<div></div>。 如果想要生成多个相同标签,加上*就可以了。比如 div*3,就可以快速生成3个div。【不要加空格,不然不起效果】 如果有父子级关系的标签,可以用>。

2022-03-25 11:21:47 1049

原创 CSS day1 |选择器&字体&文本&引入方式

1 css简介1.1 html局限性HTML只关注内容语义(丑、臃肿繁琐)→骨架1.2 CSS-网页的美容师css是层叠样式表(cascading style sheets)的简称。有时称之为CSS样式表或级联样式表。css也是一种标记语言。css主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式(美化)。总结1、HTML主要做结构,显示元素内容2、css美化HTML,布局页面3、css

2022-03-15 09:23:04 447

原创 前端学习--day3 HTML标签 | 表格、列表、表单

1 表格标签1.1 表格主要作用表格主要用于清晰整洁地展示数据。1.2 表格基本语法1、<table></table>适用于定义表格的标签。2、<tr></tr>用于定义行,必须嵌套在table标签中。3、<td></td>用于定义单元格,必须嵌套在tr标签中。 [ td → table data ]eg:图①<table> <tr><td>姓名&

2022-03-12 10:14:17 1624

原创 前端学习--Day2 | HTML标签(上)

1、HTML语法规范1.1 基本语法概述1、HTML标签是由尖括号包围的关键词,例如<html>。2、HTML标签通常成对出现,例如<html></html>,我们称为双标签。标签对中第一个标签是开始标签,第二个标签是结束标签。3、有些特殊标签必须是单个标签(极少情况),例如<br />,我们称为单标签。1.2 标签关系双标签可以分为两类:包含关系(嵌套)和并列关系(并行)。包含关系<head> <

2022-02-11 18:40:50 882

原创 前端学习--day1 HTML初识

1、网页1.1 定义 网站-- HTML格式的网页集合 网页-- 网站中的一页,用浏览器来阅读网页是网站的元素,其构成元素==图片、链接、文字、音视频。其后缀常为.htm/ .html。因此其俗称HTML文件。1.2 HTML 指超文本标记/标签语言(Hyper Text MarkupLanguage),是用来描述网页的一种标记语言,而非编程语言。标记语言是一套标记标签(markup ...

2022-02-11 14:09:26 142

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除