
笔记
文章平均质量分 67
前端吕小布
庸人方自扰,自在就好
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
如何创建一个Angular项目(超简单)
9、 如果你看到跟下图一样,说明你的Angular项目创建成功,在浏览器打开http://localhost:4200/便可看到创建好的Angular项目,至此,一个Angular项目创建完成!(用npm安装cnpm,将镜像源设置为国内镜像源,国内镜像源由taobao提供,有些软件可能在国外,有的时候可能需要翻墙,你就会下载比较慢,这个时候使用cnpm就比npm快)2、运行node -v和npm -v两条命令(检验是否下载成功Node.js)(查看安装的cnpm版本号,用于检查cnpm安装是否成功)原创 2024-05-30 18:38:28 · 780 阅读 · 0 评论 -
如何创建一个React项目(超简单)
1、安装Node.js(官网Node.js下载)2、运行和两条命令(检验是否下载成功Node.js)3、(用npm安装cnpm,将镜像源设置为国内镜像源,国内镜像源由taobao提供,有些软件可能在国外,有的时候可能需要翻墙,你就会下载比较慢,这个时候使用cnpm就比npm快)4、(查看安装的cnpm版本号,用于检查cnpm安装是否成功)5、(安装React的脚手架)6、(创建一个React项目,项目名为my-project。环境是先切换到项目所在目录再执行,如Desktop和F盘)7、8、(这两步跟着它提原创 2022-07-04 16:11:31 · 7951 阅读 · 0 评论 -
如何创建一个Vue项目(超简单)
1、安装Node.js(官网Node.js下载)2、运行node -v和npm -v两条命令(检验是否下载成功Node.js)3、npm install -g cnpm --registry=https://registry.npm.taobao.org(用npm安装cnpm,将镜像源设置为国内镜像源,国内镜像源由taobao提供,有些软件可能在国外,有的时候可能需要翻墙,你就会下载比较慢,这个时候使用cnpm就比npm快)4、cnpm -v(查看安装的cnpm版本号,用于检查cnpm安装是否成功)5、cn原创 2020-11-26 17:47:03 · 1320 阅读 · 1 评论 -
React项目支持Less
话不多说,直接分享。原创 2023-01-03 01:51:24 · 637 阅读 · 0 评论 -
Mac系统如何配置SSH
ssh的作用就是为了不用每次都输入账号和密码。原创 2022-08-25 01:42:20 · 3485 阅读 · 0 评论 -
Vue中keep-alive原理
keep-alive是用来缓存组件的,比如我们有个列表页,在点击详情页之后,如果返回之后不想刷新列表页,就可以用keep-alive组件进行缓存。除此以外,还有很多应用场景。用法1:我们想要缓存某个组件,只要用keep-alive组件将其包裹就行。用法2:包裹component组件缓存动态组件,或者包裹router-view缓存路由页面,也就是keep-alive配合路由守卫(元信息)实现缓存。比如常在router.js路由表里定义好哪些页面需要缓存,就可以通过下面这样实现了:属性include原创 2022-06-29 18:06:15 · 11609 阅读 · 0 评论 -
在浏览器输入url到页面展示出来
首先会对 URL 进行解析,分析所需要使用的传输协议和请求的资源的路径。如果输入的 URL 中的协议或者主机名不合法,将会把地址栏中输入的内容传递给搜索引擎。如果没有问题,浏览器会检查 URL 中是否出现了非法字符,如果存在非法字符,则对非法字符进行转义后再进行下一过程。浏览器会判断所请求的资源是否在缓存里,如果请求的资源在缓存里并且没有失效,那么就直接使用,否则向服务器发起新的请求。下一步首先需要获取的是输入的 URL 中的域名的 IP 地址。首先会判断本地是否有该域名的 IP 地址的缓存,如果有则使用,原创 2022-06-29 02:53:51 · 759 阅读 · 0 评论 -
JS中的this指向
this可以用在构造函数之中,表示实例对象。除此之外,this还可以用在别的场合。但不管是什么场合,this都有一个共同点:它总是返回一个对象。简单说,this就是属性或方法“当前”所在的对象。this.property中this就代表property属性当前所在的对象。上面代码中,this.name表示name属性所在的那个对象。由于this.name是在describe方法中调用,而describe方法所在的当前对象是person,因此this指向person,this.name就是person.n原创 2022-06-24 01:51:18 · 1921 阅读 · 0 评论 -
async await
背景在很长一段时间里面,前端工程师不得不依靠回调来处理异步代码。使用回调的结果是,代码变得很纠结,不便于理解与维护,值得庆幸的是Promise带来了.then(),让代码变得井然有序,便于管理。于是我们大量使用,代替了原来的回调方式。但是不存在一种方法可以让当前的执行流程阻塞直到promise完成。JS里面,我们无法直接原地等promise完成,唯一可以用于提前计划promise完成后的执行逻辑的方式就是通过then附加回调函数。 现在随着ES7中async await的增加,可以让接口按顺序异步获取数据原创 2022-05-25 10:39:44 · 516 阅读 · 0 评论 -
Promise
ECMAscript 6 原生提供了 Promise 对象。Promise 对象代表了未来将要发生的事件,用来传递异步操作的消息。Promise 对象有以下两个特点:1、对象的状态不受外界影响。Promise 对象代表一个异步操作,有三种状态:pending: 初始状态,不是成功或失败状态。fulfilled: 意味着操作成功完成。rejected: 意味着操作失败。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来,它的英原创 2022-05-23 18:18:01 · 989 阅读 · 0 评论 -
AJAX总结
简介AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。AJAX 不是编程语言,而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数原创 2022-05-19 17:46:36 · 458 阅读 · 0 评论 -
arguments、剩余参数和默认参数值
argumentsarguments 是一个对应于传递给函数的参数的类数组对象。小试牛刀function func1(a, b, c) { console.log(arguments) console.log(arguments[0]) // 1 console.log(arguments[1]) // 2 console.log(arguments[2]) // 3}func1(1, 2, 3)“类数组” 意味着 arguments 有 长度 属性 并且属性的索引是从零开原创 2022-05-16 16:17:57 · 946 阅读 · 0 评论 -
虚拟DOM原理
在Vue2渲染层做了根本性的改动,那就是引入了虚拟DOM。vue的虚拟dom是基于 snabbdom 改造过来的。了解 snabbdom的原理之后再回过头来看 vue的虚拟DOM结构的实现。就难度不大了!一、背景为什么需要 Virtual DOM在前端刀耕火种的时代,jquery 可谓是一家独大。然而慢慢地人们发现,在我们的代码中布满了一系列操作 DOM 的代码。这些代码难以维护,又容易出错,最重要的是,DOM操作非常耗费性能。而Vue和React是数据驱动视图,那么它们如何有效控制DOM操作呢?原创 2022-05-05 16:17:58 · 573 阅读 · 0 评论 -
JS的eval()方法
eval() 函数计算 JavaScript 字符串,并把它作为脚本代码来执行。如果参数是一个表达式,eval() 函数将执行表达式。如果参数是Javascript语句,eval()将执行 Javascript 语句(代码)。eval是JS中最强大的方法之一,它就像一个完整的ECMAScript解析器,它会根据ECMAScript语句对字符串进行解析和计算。原创 2022-05-01 19:17:37 · 21271 阅读 · 3 评论 -
设计模式之观察者模式(发布订阅模式)
特点:这种模式一般会定义一个主体和众多的个体,这里主体可以想象为一个消息中心,里面有各种各样的消息,众多的个体可以订阅不同的消息,当未来消息中心发布某条消息的时候,订阅过它的个体就会得到通知。1、定义消息中心首先,我们定义一个消息中心,里面包含存储消息的_msg对象,返回一个对象,里面有3个方法属性分别用于订阅一个消息,发布消息和取消订阅的消息。// 消息中心const msgCenter = (function() { let _msg = {} // 存储消息 return {原创 2022-04-29 02:03:56 · 618 阅读 · 0 评论 -
Vue双向绑定原理
大家都知道,关于Vue的双向绑定,核心是Object.defineProperty()方法,那接下来我们就简单介绍一下!Object.defineProperty()语法:Object.defineProperty(obj,prop,descriptor)obj——要在其上定义属性的对象。prop——要定义或修改的属性的名称。descriptor——将被定义或修改的属性描述符。其实,简单点来说,就是通过此方法来定义一个值。调用,使用到了get方法,赋值,使用到了set方法。例子:let原创 2022-04-27 23:22:32 · 5107 阅读 · 1 评论 -
JS的get方法和set方法
get 关键字将对象属性与函数进行绑定,当属性被访问时,对应函数被执行。set 关键字将对象属性与函数进行绑定,当属性被赋值时,对应函数被执行。基本用法:let obj = { a: '吕小布', get b() { console.log('一旦调用对象的b属性,就会触发b属性的get方法') }, set b(newVal) { b = newVal console.log('调用了b属性的set方法,方法的值是:' + newVal) }}obj.原创 2022-04-27 18:18:37 · 11379 阅读 · 0 评论 -
正则表达式
JavaScript 正则表达式正则表达式(英语:Regular Expression,在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换。什么是正则表达式?正则表达式是由一个字符序列形成的搜索模式。当你在文本中搜索数据时,你可以用搜索模式来描述你要查询的内容。正则表达式可以是一个简单的字符,或一个更复杂的模式。正则表达式可用于所有文本搜索和文本替换的操作。语法/正则表达式主体/修饰符(可选)原创 2022-04-11 23:33:10 · 252 阅读 · 0 评论 -
for in和for of
for in定义和用法for in 语句用于循环对象的属性。当遍历数组时,for in遍历的是数组的索引(即下标)。循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。JavaScript 支持不同类型的循环:for - 循环代码块一定的次数for/in - 循环遍历对象的属性while - 当指定的条件为 true 时循环指定的代码块do/while - 同样当指定的条件为 true 时循环指定的代码块注意: 不要使用 for/in 语句来循环数组的索引,你可以使用 fo原创 2022-04-11 18:16:05 · 1050 阅读 · 0 评论 -
git stash
应用场景:1 当正在dev分支上开发某个项目,这时项目中出现一个bug,需要紧急修复,但是正在开发的内容只是完成一半,还不想提交,这时可以用git stash命令将修改的内容保存至堆栈区,然后顺利切换到hotfix分支进行bug修复,修复完成后,再次切回到dev分支,从堆栈中恢复刚刚保存的内容。2 由于疏忽,本应该在dev分支开发的内容,却在master上进行了开发,需要重新切回到dev分支上进行开发,可以用git stash将内容保存至堆栈中,切回到dev分支后,再次恢复内容即可。总的来说,git原创 2022-03-16 18:13:04 · 629 阅读 · 0 评论 -
如何在码云上部署前端项目
1、生成编译完成后的dist文件夹2、修改.gitignore文件,让dist文件夹也参与命令管理3、再次运行“下班三部曲”git add . git commit -m 'complete' git push将dist文件夹上传到码云4、暂时失败,有空再搞了...原创 2021-03-24 21:55:17 · 525 阅读 · 2 评论 -
VS Code自定义HTML代码片段
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar原创 2021-12-02 16:14:26 · 3206 阅读 · 0 评论 -
VS Code如何运行HTML代码
1、打开“扩展”,搜索“open in browser”,安装,如下图:2、在HTML文件中单击右键,点击“Open In Default Browser”(通过默认浏览器打开)或者“Open In Other Browser”(通过其它浏览器打开),如下图:3、查看效果,如下图:大功告成!...原创 2021-12-02 16:30:20 · 4459 阅读 · 0 评论 -
JS类和继承
类JS中的class其实就是一个函数,class是关键字,后面是类名,一般以大写开头,然后是大括号1:构造函数是实例化时执行的逻辑。constructor就是构造函数,里面的this.name中的this指向new出来的实例(当前实例),如3中的xialuo就是new出来的一个实例,执行了3后,this就等于xialuo这个实例对象了。括号里的name,number就是形参,而3中括号里的'夏洛'和2017102就是实参,new一个实例的时候需要把实参传进去,这样这个xialuo就变成真原创 2021-04-05 19:21:06 · 523 阅读 · 0 评论 -
GET请求传数组
最终请求的url为:这样传的数组格式显然后端解析不了,后端希望的格式要么是list=1&list=2&list=3,要么是list=1,2,3。原创 2022-01-07 14:51:06 · 32788 阅读 · 12 评论 -
新建本地分支并关联远程分支
1、新建远程分支在网站新建或者本地新建都可以,一般在网站新建方便2、新建本地分支方法一:git branch -b newbranch //新建一个分支,并切换到此分支等同于下面两条命令的合体git branch newbranchgit checkout newbranch方法二:git checkout -b newbranch //新建一个分支,并切换到此分支等同于下面两条命令的合体git branch newbranchgit checkout newbranch是原创 2021-10-28 16:22:27 · 1642 阅读 · 0 评论 -
Object.assign()
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将***返回目标对象***。const target = { a: 1, b: 2 };const source = { b: 4, c: 5 };const returnedTarget = Object.assign(target, source);console.log(target);// expected output: Object { a: 1, b: 4, c: 5 }conso原创 2021-08-05 13:52:15 · 245 阅读 · 0 评论 -
ES6扩展运算符...
定义扩展运算符( spread )是三个点(…),它好比 rest 参数的逆运算,可以将一个数组转为用逗号分隔的参数序列。说白了,就是把数组脱掉衣服,打开它。console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5[...document.querySelectorAll('div')]// [<div>, <div>, <div>]应用1、用于函数调用f原创 2021-08-04 17:07:08 · 256 阅读 · 0 评论 -
如何上传项目到github
搭建环境、项目配置和项目部署这几方面,一直都是我最头痛的问题,自始至终,始终如一。这次上传我的毕设项目到github又困扰了我一点时间,而时间是很宝贵的,所以我决定记录下来最终做法,免得以后再把头痛浪费在这种地方。方法一:1、新建仓库,也就是你的项目2、填写项目名称以及项目简介,勾选“Add a README file”(.gitignore文件可要可不要,看你自己),然后点击下方的绿色按钮3、在cmd或者Git Bash切换到项目放置的目录(也即项目的父级目录,如Desktop),原创 2021-05-12 18:16:10 · 2559 阅读 · 1 评论 -
前端开发实习面试题(Vue篇)
1.介绍一下Vue的生命周期钩子函数,请详细说下你对Vue生命周期的理解?Vue实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。在vue组件中,组件的实例从创建前(beforeCreate)、创建后(created)、挂载前(beforeMount)、挂载后(mounted)、更新前(beforeUptate)、更新后(updated)、销毁前(beforeDestroy)、销毁后(destr.原创 2020-09-16 23:39:22 · 8736 阅读 · 0 评论 -
CSS3新特性
目录1、新增CSS选择器(以下全是伪类选择器)2、圆角border-radius3、阴影(box-shadow)4、文字特效5、旋转transform6、渐变新增各种CSS选择器 圆角border-radius 阴影和反射box-shadow 文字特效text-shadow 旋转transform 渐变 多列布局1、新增CSS选择器(以下全是伪类选择器)p:first-of-type选择属于其父元素的首个<p>元素的每个<p>元素。...原创 2021-04-21 16:59:33 · 330 阅读 · 0 评论 -
搭建Node.js开发环境
1、在项目文件夹目录下使用npm install node,空文件夹就变成了一个具备Node.js开发环境的文件夹了,安装完成后如下:2、在项目新建bin文件夹,在bin中新建www.js,并写入以下代码:const http = require('http')const PORT = 8000const serverHandle = require('../app')const server = http.createServer(serverHandle)server.list原创 2021-04-13 02:10:03 · 399 阅读 · 0 评论 -
如何使用postman
使用postman模拟浏览器发送请求给服务端,服务端处理并返回结果的过程1、服务端处理代码:const http = require('http')const server = http.createServer((req,res) => { if (req.method === 'POST') { // req 数据格式 console.log('req content-type: ', req.headers['content-type']) // 接收数原创 2021-04-11 19:54:38 · 381 阅读 · 0 评论 -
JS面向对象
类的声明//类的声明,声明了Animal的一个类,通过this表明这是一个构造函数function Animal1 () { this.name = 'name';} //ES6中的class的声明class Animal2 { constructor(name) { this.name = name; }}类的声明有2种方式,一种是传统的用构造函数来模拟一个类的方式,第二种就是ES6中对class的声明。ES6中有增加了对类的声明,就是class这个语法,..原创 2021-04-06 20:20:26 · 186 阅读 · 0 评论 -
原型和原型链(一)
创建对象有几种方法构造函数、实例、原型、原型链构造函数M,它的实例o3,这些都为true,M.prototype.constructor === M;o3.__proto__ === M.prototype;从一个实例对象往上找构造这个实例的相关联的对象,这个关联的对象再往上找,它又有创造它的上一级的原型对象,以此类推,一直到Object.prototype终止,这个链条就断了,也就是说Object.prototype属性是整个原型链的顶端,原型链是通过prototype这个原型和_..原创 2021-03-31 17:25:41 · 202 阅读 · 0 评论 -
原型和原型链(二)
接着上一条“类和继承”博客Object可以说是所有引用类型的变量的父类,所有class的父类每个class都有显式原型prototype 每个实例都有隐式原型__proto__ 实例的__proto__指向对应class的prototypeclass中的sayHi方法是放在它的原型里面的,new出来的xialuo实例中没有sayHi这个属性,就会往它的隐式原型xialuo.__proto__也就是Student的显式原型Student.prototype中寻找。...原创 2021-04-05 20:42:07 · 174 阅读 · 0 评论 -
CSS中的伪元素和伪类
CSS伪类什么叫伪类呢?伪类是基于元素的特征而不是他们的id、class、属性或者内容。一般来说,元素的特征是不可以从DOM树上推断得到的,而且其是动态的,当用户和DOM进行交互的时候,元素可以获得或者失去一个伪类。(这里有一个例外,就是:first-child和:lang是可以从DOM树中推断出来的。)CSS的现有标准中,伪类包括::first-child点我看手册,应用第一个子元素 :link点我看手册,应用未访问过的链接 :visited点我看手册,应用已访问过的链接 :h...原创 2021-03-12 00:47:13 · 246 阅读 · 0 评论 -
零碎的前端知识点
1、[]转换成boolean为true;[]转换成数字为0;2、setMonth(n),这里是0-11分别对应1-12月d.setDate(n);n表示一个月中的一天的一个数值(1 ~ 31):0 为上一个月的最后一天;-1 为上一个月最后一天之前的一天;如果当月有 31 天:32 为下个月的第一天;如果当月有 30 天:32 为下一个月的第二天;40为下一个月的第9天或第10天;3、var fun = obj.b;//相当于var fun = function().原创 2021-03-07 19:03:27 · 234 阅读 · 0 评论 -
CSS3中的transform、translate和transition
之前一直搞不清楚哪个是哪个,哪个有什么用,因为三个都有trans前缀,可以称为“trans一族”。1、transform属性定义及使用说明:transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。语法:transform: none|transform-functions;例如:transform: translate(-30px,-50%); transform:rotate(7deg);2、translatetranslate是t.原创 2021-03-02 12:32:01 · 7240 阅读 · 1 评论 -
水平垂直居中
(1)水平居中:元素为行内元素,设置父元素text-align:center 如果元素宽度固定,可以设置左右margin为auto 如果元素为绝对定位(或相对定位),可以设置父元素position为relative,宽度固定时设置left:0;right:0;margin:auto 如果元素为绝对定位(或相对定位),可以设置父元素position为relative,宽度固定时设置left:50%,margin-left值为宽度一半的负值 使用flex布局,设置父元素display:flex;同时原创 2021-02-04 14:07:02 · 344 阅读 · 0 评论