- 博客(26)
- 收藏
- 关注
原创 前端---【移动端开发的屏幕适配】
dpr = 物理像素 / 设备独立像素,适配场景:实际开发中上线后的移动端项目需要在不同的手机上供用户使用访问,不同的手机屏幕尺寸大小不一样。关键点:等比。pc端视口的默认宽度和浏览器窗口的宽度一致;在 css 标准文档中,视口也被称为:初始包含块;它是所有 css 百分比宽度推算的根源;方法:拿到设计稿之后,设置布局视口宽度为设计稿宽度,然后直接按照设计稿给宽高进行布局即可。优点:不用复杂的计算,直接使用图稿上标注的px值缺点:有些不希望被适配的东西,例如边框,也被适配了,导致比设计稿大的设
2023-07-14 19:57:35
2832
原创 前端---【工程化常见的操作指令大全】
npm命令cnpm命令,yarm命令,管理发布包命令,nvm命令,Webpack包管理工具命令,前端打包数据库后端命令Mongodb,集合命令,文档命令,项目阶段指令其他命令git常用指令,.打包工具vite和webpack,下载路由包npm install -S vue-router,引入less预编译器下载依赖包npm install -D less less-loader,axios 和 nprogress,npm remove
2023-07-14 13:16:28
1155
原创 前端---【Vue2基础props子传父】
问题是如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话,它是没有办法使用的。这里表示运行成功,把地址复制到浏览器上 ,我这边是Local: http://localhost:8083/,你需要按照你终端提示的本地端口号地址打开。子组件收到函数后,在合适的时候调用函数,并传递参数,从而实现子组件和父组件之间的通信。数据在哪里,修改数据的方法就在哪里,或者说:只有数据的拥有者,才能修改数据。子收到函数后,在合适的时候调用函数,并传递参数,从而实现:子传父。父先给子传递一个函数。
2023-06-02 19:53:17
683
原创 前端---【Vue基础更新:计算属性;监听属性;条件渲染;列表渲染;数据代理;数据劫持】
Vue基础更新----计算属性computed.监听属性watch,条件渲染v-show,v-if,列表渲染v-for,数据劫持是什么意思,数据代理是什么意思,数据代码和数据劫持的区别.何为数据劫持概念:捕获对象属性变化的一种手段,前端的响应式框架通常都会对数据进行劫持,这样当数据发生变化时,可以自动更新相关的视图或执行其他逻辑。5.2Vue中的数据劫持具体实现方式:Vue收集到数据后,会将所有层级的属性,全都改为getter、setter的形式,随后放在_data中。
2023-06-01 17:29:20
397
原创 前端---【Vue2基础更新:一文看懂生命周期】
Vue里面的生命周期是什么,生命周期是什么意思,图解生命周期。生命周期分为三个阶段:挂载 、更新、销毁。beforeCreate 、created、beforeMount、mounted、beforeUpdate、beforeDestory、destroyed.这些调用钩子的地方。生命周期过程,首先是创建的一个new vue实例,然后对事件或者生命周期进行初始化。然后给VM注入数据或者,完成响应式的数据代理或者数据劫持是什么,图解生命周期。Vue里面的生命周期是什么,不会吧,还有人不知道生命周期
2023-05-30 20:08:32
252
原创 前端---【Vue2基础更新:介绍事件绑定、传参、修饰符,计算属性】
1. 事件处理1.1 事件绑定事件绑定是 Vue 中实现视图和业务逻辑交互的一种方式。将 DOM 元素上的原生事件绑定到 Vue 实例中的方法。当原生事件触发时,Vue 自动调用对应的实例方法。使用v-on:xxx或@xxx绑定事件。Vue基础更新----介绍事件绑定、事件传参、事件修饰符,计算属性,使用插值语法 {{hello}} 将 data 中的 hello 值渲染在 h2 标题中。2. 使用 v-model 双向绑定 input 和 data 中的 firstName 和 lastName。 i
2023-05-29 21:25:26
1446
1
原创 前端---【Vue基础介绍】
想让Vue工作,就要创建一个Vue实例,且要传入一个配置对象。demo容器中的代码被称为模板,它依然符合HTML规范,只是混入了一些特殊的Vue语法。el 配置:用于指定当前Vuecss选择器字符串。data 配置:用于配置数据,数据可以直接在模板中使用,值暂时写成一个对象(以后还会写成函数)。2.3 分析Hello效果Vue实例和容器是一一对应的,真实开发中只有一个Vue实例,而且还会配合组件一起使用。data中的数据只要发生改变,模板中用到该数据的地方就会自动更新。{{xxx}}
2023-05-26 18:41:10
72
原创 前端---【一文看懂webpack打包文件CSS文件,WebPack打包CSS详细操作流程】
一. Webpake打包CSS完整流程1.1第一步编写HTML和CSS结构的代码1.1.1创建一个html的文件结构1.1.2创建一个CSS文件结果的样式1.1.3创建main.js结构文件1.2第二步:在 webpack 配置文件中添加如下规则:1.3第三步:安装 less 和 less-loader:1.3.1npm i less less-loader -D 解释1.4第四步 运行打包命令二.打包文件报错2.1解决报错三.打包成功终端详细解释 一文看懂webpack
2023-04-26 21:14:52
3734
原创 前端---【webpack打包工具的介绍和基本使用】
一.webpack介绍1.1什么是webpack 1.2webpack五个核心概念1.2.1Entry 入口1.2.2Output1.2.1Entry 入口入口起点(entry point) 指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点依赖的 1.2.2Output npm i webpack webpack-cli -D 安装 npm init -y 创建入口JS模块: src/
2023-04-26 19:17:37
1464
原创 前端---【Node.JS的fs(文件系统)操作模块】
概念解释:fs 全称为 `file system`,称之为`文件系统`,是 Node.js 中的`内置模块`,可以对计算机中的磁盘进行操作。1. 文件写入2. 文件读取3. 文件移动与重命名4. 一. nodeJS fs模块介绍二. fs文件系统的操作2.1文件写入2.2文件写入方法 2.2.1 writeFile 异步写入 writeFileSync 同步写入 appendFile / appendFileSy文件删除5. 文件
2023-04-14 18:48:29
4037
原创 前端---【家人们,ES6新语法工作中比较常用哦】
7箭头函数不能被new命令调用,因为箭头函数没有自己的this,无法调用call、apply方法来改变this的指向。3箭头函数不能作为构造函数使用,不能使用new关键字来创建对象。8.箭头函数没有prototype属性,不能作为构造函数使用。9.箭头函数的arguments对象是继承外层作用域的。ES6 允许使用「箭头」(=>)定义函数。10.箭头函数不能使用yield关键字。2.1let的用法和特点2.2扩展运算符应用2.2.1数组合并2.2.2children 伪数组2.3三种方法求参
2023-04-13 16:33:29
113
原创 前端---【express框架中间件函数的原理与不同写法】
中间件函数的原理是通过将请求和响应对象传递给下一个中间件函数或路由回调函数来实现的,每个中间件函数都可以在请求和响应之间执行一些操作,例如记录请求日志、验证用户身份、设置响应头等。中间件函数是 Express 框架的一个重要特性,它是在路由回调函数之前执行的一个函数,用于在请求和响应之间执行一些公共的操作,例如记录请求日志、验证用户身份、设置响应头等。函数,请求就会继续向下传递,执行下一个中间件函数或路由回调函数,如果没有更多的中间件函数或路由回调函数,请求就会结束并返回响应给客户端。
2023-04-12 10:16:26
265
原创 前端---【nodejs的介绍与Buffer缓冲器的介绍】
Node.js是一个基于谷歌搜索引擎的javaScript的运行环境,是一个应用程序.1.2node.js的作用node.js可以解析并运行一些javaScript代码,开发一些新的应用开发工具类应用开发服务类应用开发桌面端应用buffer是类似一个数组,用于表示固定长度的字节序列buffer本质是一段内存空间,专门用来处理二进制数据。第二种是集成中端打开 node+空格+文件名称三 buffer(缓冲器)3.1 buffer介绍buffer是类似一个数组,用于表示固定长度的字节序列buffe
2023-04-07 14:04:22
561
原创 三万长文看懂bootsrap是什么,bootsrap有啥用
一个前端 UI 框架,由 twitter 公司开发,2013 年 7 月发布 1.0 版本官方网址中文站Bootstrap中文网。1介绍bootstrap1.1如何进去bootsrap1.2bootstrap作用2.bootstrap全局的CSS样式2.1 bootstrap模板2.2容器2.3栅格系统2.3.1栅格系统作用2.3.2代码示范2.3.3补充栅格系统参数补充2.4排版2.4.1内联文本标签2.4.2对齐方式2.4.3代码示范
2023-04-04 20:41:26
704
原创 前端---【js阶段:ES5的使用】
ES5 除了正常运行模式(又称为混杂模式),还添加了第二种运行模式:"严格模式"(strict mode)。严格模式顾名思义,就是使 JavaScript 在更严格的语法条件下运行。1.1作用消除代码运行的一些不安全之处,保证代码运行的安全为未来新版本的 JavaScript 做好铺垫1.2严格模式声明1.2.1全局开启"user strict";1.2.2函数内部function fn() {"user strict"}只会在函数的内部开启严格模式(1) 不允许使用未声明的变量(2)函数内部的
2023-04-03 13:16:40
771
原创 前端---【JS阶段:原型对象】
在函数重复出现的时候,或者重复出现的属性,占用过多的内存,这个时候需要一个原型对象。原型对象(prototype)分为两类,一种是显式原型,一种是隐式原型。隐式原型: 通过函数对象(构造函数),new出来的对象都有个属性,这个属性叫做_prato_任何的函数对象都有一个属性,我们叫做prototype,也叫显示原型。(下划线prato下划线)我们称之为隐士原型。
2023-03-31 21:23:51
79
原创 原生JS轮播图详细源码分析
首先对轮播图进行需求分析,要完成的功能涉及这些JS知识点。代码优化-对重复的代码进行封装,降低耦合性。这是轮播的详细效果,展示如下。图片联动小圆点-数组下标。自动轮播-定时器知识点。详细轮播图分析,源码分析。自动轮播,定时器的使用
2023-03-23 11:38:17
494
原创 JS基础阶段问题
(通过构造器的名字判断构造器) toString是此方法可以相对较全的判断js的数据类型。--通过id属性获取dom对象-->parseFloat()也是一个全局方法,它可以把值转换成浮点数,即它能够识别第一个出现的小数点,而第二个小数点视为非法。--通过选择器获取dom对象-->--通过选择器获取dom对象-->--通过标签名字获取dom对象-->标识符指的是变量、函数、属性的名字,或者函数的参数。NaN(不是一个数字),是一个特殊的数值,特点:无论和谁比较都是fasle 无论和谁计算都是NaN。
2023-03-14 13:36:36
241
原创 JS基础阶段知识点缩略版
文档对象模型(Document Object Model,DOM):网页文档操作标准。浏览器对象模型(BOM):客户端和浏览器窗口操作基础。核心(ECMAScript):语言核心部分。这里主要是基础阶段 知识点的大概合集。1.JavaScript 构成。
2023-03-14 13:21:46
56
原创 JS字符串18个方法,JS字符串的内建方法
indexOf : 从原串当中找指定的子串,求出子串下标位置。// 功能:找到对应索引位置的字符的Unicode码。//返回值:返回找到的对应字符的Unicode码。fromCharCode :把unicode码转化为对应的字符。slice 从原串当中截取指定位置(索引)的字符串,形成新串。split功能:以指定字符为间隔(切割点)将字符串转化为数组。substring : 从原串当中截取的字符串,形成新串。substr : 从原串当中截取的字符串,形成新串。toUpperCase 小写转大写。
2023-03-10 18:56:04
131
原创 适合小白的HTML的思维导图
然后学习编程,有良好的逻辑架构非常的重要,下面分享一下我自己做的思维导图。HTML作为前端的入门第一课,是很多小白接触前端的第一课。
2023-02-10 20:50:18
2006
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人