- 博客(74)
- 收藏
- 关注
原创 安装vue脚手架,创建vue项目,vue2+vue3,vite创建项目
/ vue_test_2 是自定义的项目名 vue create vue_test_2选择空格键进行选择,我们可以选vuex和router:选vue2:选路由模式:输入y就行,项目里面是可以改的,所以没关系语法规范默认第一个:什么时候校验语法,可以选择第一个:是否采用最基本的校验更新到package文件,选择第一个:是否保存作为项目预设,我们可以不保存,输入 N然后等着就行了,创建成功了就。然后cd到你创建的项目里,npm run serve 运行项目。
2023-03-21 12:18:56
1186
原创 Vue自定义指令
首先我们知道vue中有很多内置指令,比如说 v-text,v-bind, v-if,v-for等等,但是怎样定义一个自定义的指令呢?什么是自定义指令,我们知道 v-if 指令是用于条件性地渲染一块内容,那此时我想定义一个指令,让某个数变大10倍,我把这个指令叫叫做v-big,v-big=“n”, 当n等于1的时候页面显示10,当n等于2的时候页面显示20,我们怎么用指令做到呢?注意: 自定义指令是要我们对普通 DOM 元素进行底层操作的。
2022-08-25 16:05:24
587
原创 Vue脚手架 VueCli的安装使用
CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目。
2022-08-22 11:29:06
280
原创 前端websocket打造实时聊天室
前端运用websocket打造的实时消息通知的聊天室,语言采用了JavaScript,可以进行登录系统,多用户实时聊天,后端服务器采用nodejs编写(我会把代码直接贴上)代码是用最原生的js写的,如果利用框架例如vue,angular等,代码会变的更少更简洁。...
2022-08-02 11:22:14
3194
2
原创 js之多维数组扁平化
目录1、flat()2、reduce()1、flat()Array的prototype上有个flat方法,flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。不会改变原数组可以指定要提取嵌套数组的结构深度,默认值为 1(使用 Infinity,可展开任意深度的嵌套数组)flat() 方法会移除数组中的空项示例:var arr = [1, 2, 3, [4, 5], [6, 7]];arr.flat(); // [1, 2, 3
2022-05-25 16:49:43
441
原创 nvm, nrm的安装与使用
1、nvm:node版本管理工具node version management,是一个nodejs的版本管理工具。使用场景:同时开发几个项目,但是这些项目依赖的node版本不同,这种情况下,我们就可以通过nvm来切换node的版本,而不需要频繁地下载或卸载不同版本的node来满足当前项目的要求。下面这两位博主的安装和使用教程都是非常详细的(我就是按照第一个进行安装的),我就不多说了,大家参考一下:https://www.jianshu.com/p/13c0b3ca7c71http://nvm.ui
2022-05-03 20:49:16
815
原创 什么是node.js
目录1、回顾浏览器中的JavaScript2、为什么JavaScript可以在浏览器中被执行3、为什么JavaScript可以操作DOM和BOM4、浏览器中的JavaScript运行环境5、JavaScript做后端开发之nodejs6、什么是node.js6.1、node.js中的JavaScript运行环境6.2、node.js的优势1、回顾浏览器中的JavaScript2、为什么JavaScript可以在浏览器中被执行因为有JavaScript引擎的存在所以js代码才会被执行3、为什么Ja
2022-05-03 18:26:03
1878
原创 Vue2响应式原理(二)数据代理
目录1、什么是数据代理2、vue中的数据代理总结1、什么是数据代理数据代理就是 通过一个对象代理对另一个对象中属性的操作(读 / 写)举例说明: 有一个对象 obj ,obj上有一个属性x,以后我想访问这个x,直接obj.x访问即可,想修改obj.x也是非常容易。但是此时我还有一个对象 obj2,我希望这个obj2 也可以访问和修改 obj 身上的 x。那么这就是通过一个对象 obj2 代理对另一个对象 obj 中属性的操作。接下来我们来实现上述的需求:let obj = { x: 100 };
2022-03-18 19:17:02
1399
1
原创 Vue2响应式原理(一)Object.defineProperty
目录前言 为什么要学原理1、Object.defineProperty1.1、可枚举的1.2、可修改的1.3可删除的2、模拟“响应式”前言 为什么要学原理我们知道vue中的数据可以做到响应式,那么响应式的原理是什么大家知道吗?有同学可能会说,我管他原理是什么,我会用就行。但是其实不然,我们开发中经常会遇到,明明修改了一个数组或对象中的值,但是页面上却没有发生变化,一时半会也不知道解决办法,非常伤脑筋。但是如果大家知道了响应式的原理,这个问题就是手到擒来,分分钟解决掉,接下来我们就开始学习吧~说到原
2022-03-18 16:34:24
2137
原创 css之clear属性,both left right详解,解决父元素高度塌陷
目录现象1、 clear 属性2、both left right 区别举例示例2.1 left2.2 right2.3 both3、借助父元素的::after清除浮动现象我们常说用clear: both来清除浮动,那么原理是什么呢?首先我们来看一个例子:<style> .fa { width: 200px; border: 1px solid red; } .son { width: 100px; height: 100px; floa
2022-03-14 15:49:27
2615
1
原创 css之 vertical-align用法详解
vertical-align 属性设置元素的垂直对齐方式。css中的vertical-align 属性只能用于 行内元素 和 置换元素(例如 图像和表单输入框) ,此属性不继承。接下来我们用例子去分析这些值的意思及产生的效果:首先我们先看一张图,文字的顶线、中线、基线,基线是字母x的下边缘默认例子<style> * { margin: 0; padding: 0; } div { width: 200px; line-height: 60
2022-03-11 18:29:26
28449
6
原创 js var a = {n:1} var b = a a.x = a = {n:2} console.log(a.x) console.log(b.x)
js中很经典的一道题,特此记录一下var a = {n:1}var b = aa.x = a = {n:2}console.log(a.x)console.log(b.x)输出结果为: undefined, {n: 2}为什么呢?接下来我们来分析一下。1、首先我们要知道,b = a 是浅拷贝,所以在堆栈中引用的是一个对象地址,b和a指向同一个对象:2、赋值操作是从右向左进行 var a = 1, b = 2, c = 3; a = b = c;最后的a,b,c都是3。那么 a
2022-03-07 16:06:47
1389
原创 css之 删除input标签type为number时末尾的箭头
当input输入框的类型为number时,输入框的最右边会有小箭头:去掉小箭头:<input type="number" class="my-input" />.my-input::-webkit-outer-spin-button,.my-input::-webkit-inner-spin-button { -webkit-appearance: none; }加上上述样式后的输入框没有了右侧的小箭头:...
2022-03-04 15:37:24
911
2
原创 css之 修改光标颜色
属性:caret-colorinput { width: 200px; height: 30px; font-size: 20px; outline: none; /* 修改光标颜色 */ caret-color: #ffd476;}结果:
2022-03-04 15:22:21
657
1
原创 css之 img 图片底部有间距原因及解决方法
目录前言现象原因解决方法1、给img(图片)设置display: block;2、给img(图片)设置vertical-align: bottom;3、修改line-height值(div的line-height)4、div的font-size=0前言在开发中,我们经常会遇到图片底部多出几个px间距的问题 ,这是什么原因,我们又该如何解决呢?现象我们可以看到,图片和div之间会有空隙,并不是紧贴着div底部。原因 因为图片是行内元素,默认的图片对齐方式为vertical-align:bas
2022-03-04 14:32:31
6642
1
原创 CSS 之 line-height 实现单行文字垂直居中的原理
基础知识line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。我们暂且称之为顶部距离和底部距离,就是上图中的蓝色区域。也就是说: line-height = 顶部距离 + 内容高度(顶线和底线之间的距离) + 底部距离;顶部距离 = 底部距离;示例一: 当line-height 等于 height 时,文字垂直居中文本默认大小16px。结果:文字垂直居中。顶部距离 = 底部距离 = (line-heig
2022-03-04 11:32:06
1797
2
原创 js之数组和字符串去重的几种方法
1、数组去重1.1 reduce方法const arr = [1, 2, 3, 4, 3, 2, 1];const newArr = arr.reduce((pre, cur) => { !pre.includes(cur) && pre.push(cur); return pre;}, [])console.log(newArr); // [1, 2, 3, 4]1.2 Set方法1const arr = [1, 2, 3, 4, 3, 2, 1];const
2022-01-04 11:55:36
917
原创 前端下载图片(文件)以及打包下载图片(文件)
下面的下载都是以图片为例,其他文件 如视频文件也是适用于下列方法的.目录1、单张图片下载:1.1 原生js网络请求方式1.2 http请求方式1.3 axios请求方式2、打包下载1、单张图片下载:1.1 原生js网络请求方式<button (click)="downSingleImg()">下载单张图片</button>downSingleImg() { const url = 'https://tse1-mm.cn.bing.net/th/id/OET.625d8
2021-12-08 19:17:43
1281
2
原创 js之for...of...循环遍历可迭代对象
不会吧不会吧,我不会是最后一个知道for of不能遍历普通对象的叭接下来咱们就好好扒一扒这个 for of循环:for…of 语句在可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句。(来自MDN解释)。我们最常见的就是用for of 去遍历数组:let arr = ['tom', 'jerry']for(item of arr) { console.log(
2021-12-08 15:31:11
1387
原创 js 格式化日期 yyyy-MM-dd等其他多种格式
前端开发的时候,我们总会对日期进行格式化,变成我们所需要的格式,下面封装了一个方法,直接拿来用就行,不管你想要什么样的格式,都是适合的。具体看示例/** * 格式化函数 , 给日期格式化 * date为 new Date()对象, fmt为 'yyyy-MM-dd hh:mm:ss'的格式 */function formatDate(date, fmt) { //获取年份 if (/(y+)/.test(fmt)) { // 把数字变成字符串 let dateY = dat
2021-12-08 13:42:09
12607
2
原创 input输入框自动填充后默认样式修改
最近在做登录页时发现,当我们的账号名和密码被浏览器记住,自动填充以后,原本我们写好的input输入框的样式变了,特此记录:这是设计的样子:当账号密码自动填充以后:字体颜色变了,背景色也变了,这时候我们就得修改:input { background-color: #595959; }input:-webkit-autofill { -webkit-text-fill-color: #fff; transition: background-color 50000s ea.
2021-12-07 18:02:58
2893
1
原创 前端遍历文件对象
我们发现,打印的file是个对象,但是调用Object的三个方法,keys,getOwnPropertyNames,getOwnPropertySymbols发现结果都是空数组,原因是:我们再看用for...in...来遍历 file:而for…in…:所以我们可以得知,上述中我们所看到的对象file中的属性并不是他本身所有的属性,而是从原型上继承而来的。所以调用Object的方法结果会返回空数组。 如果调用for...of...方法:结果: 报错,说明file不是一...
2021-12-07 10:51:52
565
原创 js多个网络请求都完成后再对数据进行处理
目录前言1、变量判断2、Promise.all()前言在开发中,我们可能碰到这样的需求,必须等多个网络请求都请求完毕以后,再对他们的返回数据进行处理,这个时候我们应该怎么做呢?1、变量判断let isResult1 = false;let isResult1 = false;// 请求一$ajax({ url: '', success() { isResult1 = true; handleResult(); }})// 请求二$ajax({ url: '',
2021-12-04 21:44:54
3998
原创 ES6 Promise
目录1、Promise介绍1.1 什么情况下会用到Promise2、resolve是成功时调用,reject是失败时调用2.1 另一种方式(写法)3、Promise简写方式4、Promise.all()1、Promise介绍Promise 是异步编程的一种解决方案,接下来我会用延迟函数来模拟网络请求(异步操作)。Promise是个对象,我们用他的时候是要new的,在new这个Promise的时候是要求传入参数的:new Promise(参数)而这个参数本身又是一个函数。也就是说,这个Promi
2021-12-04 21:44:28
666
原创 input类型为file时,accept为表格xlsl
<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">这样选择文件的时候只能看到xlsl表格文件
2021-11-30 16:51:13
1284
原创 git 常用命令
前言:之前做项目git提交用的是图形化工具sourceTree,没用命令行,但是后来还是觉得命令行更强大一些,所以特此记录。文章目录一、配置git用户信息1、配置全局的git1.1、桌面(也可以在任意文件夹下)右键 选择Git Bash Here,会弹出弹窗1.2、依次输入以下两行命令1.3、配置成功,查看2、配置某个项目的git信息2.1、在当前项目下右键点击选择 Git Bash Here2.2、创建本地仓库2.3、依次输入以下两行命令进行配置2.4、配置成功,查看二、提交代码1、git add2、
2021-10-13 16:08:54
496
1
原创 js之new一个函数时发生了什么
new一个函数时发生了什么var myNew = function (fn) { // 1、新建一个空对象 let obj = {}; // 2、实例对象的__proto__等于构造函数的prototype obj.__proto__ = fn.prototype; // 3、改变this指向,指向obj let arg = Array.from(arguments).slice(1); // result是fn的返回值 let result = fn.apply(ob
2021-09-27 19:11:24
380
原创 js之立即执行函数
首先我们知道,函数定义有两种常见的方式,函数声明和函数表达式。// 函数声明function fun() { console.log(123);}// 函数表达式var f = function() { console.log(456);}函数声明可以进行函数提升,函数表达式不可以。接下来说一下立即调用的事。看以下代码:// 代码一:function fun() { console.log(123);}fun();// 代码二:var a = function() {
2021-09-27 17:11:51
220
原创 JS判断数据类型的几种方法
目录typeofQ:为什么typeof null 值为 object?instanceofinstanceof 原理constructorObject.prototype.toString.call()typeof缺点: 无法区分 null 还是 object,因为 typeof null 的值为 objecttypeof undefined // 'undefined'typeof '10' // 'string'typeof 10 // 'number'typeof false // 'bo
2021-09-23 15:55:03
145
原创 js中call方法的原理
内部实现:Function.prototype.myCall = function(param) { // 这个this就是调用myCall函数的,在这里是fun函数 if(typeof this !== 'function'){ return new TypeError('Not a Function'); } param = param || window; param.fn = this; // arguments是类数组,用Array.from()转一下 let arg
2021-09-14 19:31:59
225
原创 BFC块格式化上下文
BFC是什么根据W3C的标准,在页面元素都有一个隐含的属性叫Block Formatting Context。简称BFC(Block Formatting Context,块格式化上下文),该属性可以设置打开或关闭,默认关闭。详情定义查看:MDN解释定义看起来有点晦涩难懂,那么到底什么是BFC呢?具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。怎样触发 BFC只要元素满足下面任一条件即可触发 BFC 特
2021-09-13 19:10:01
127
原创 es6 类
constructor 关键字用于在类定义块内部创建类的构造函数。方法名constructor 会告诉解释器在使用new 操作符创建类的新实例时,应该调用这个函数。构造函数的定义不是必需的,不定义构造函数相当于将构造函数定义为空函数。使用new 调用类的构造函数会执行如下操作。(1) 在内存中创建一个新对象。(2) 这个新对象内部的[[Prototype]]指针被赋值为构造函数的prototype 属性。(3) 构造函数内部的this 被赋值为这个新对象(即this 指向新对象)。(4) 执行
2021-08-17 17:57:16
171
原创 js判断一个字符串在另一个字符串中出现的次数
字符串 str = ‘aaadtbbbdtcccdt’,字符串 str2 = ‘dt’判断字符串 str2在字符串 str中出现的次数1、分割 splitlet str = 'aaadtbbbdtcccdt';let str2 = 'dt';str.split(str2).length -1; // 32、利用正则表达式 matchlet str = 'aaadtbbbdtcccdt';str.match(/dt/g).length; // 3...
2021-07-22 12:00:49
1259
原创 Angular之<router-outlet>
angular默认了index.html 是整个APP的页面入口。是在angular.json文件中配置的:index.html代码如下:代码中有一段是 <app-root></app-root>这段会被app.component.html页面所替换掉<router-outlet> 是一个占位符,Angular 会根据当前的路由器状态动态填充它。<!-- app.component.html --><ul> <li&
2021-07-22 11:25:11
6140
转载 js闭包应用之防抖与节流
前言防抖和节流严格算起来应该属于性能优化的知识,但实际上遇到的频率相当高,处理不当或者放任不管就容易引起浏览器卡死。所以还是很有必要早点掌握的。(信我,你看完肯定就懂了)从滚动条监听的例子说起先说一个常见的功能,很多网站会提供这么一个按钮:用于返回顶部。这个按钮只会在滚动到距离顶部一定位置之后才出现,那么我们现在抽象出这个功能需求-- 监听浏览器滚动事件,返回当前滚条与顶部的距离这个需求很简单,直接写:function showTop () { var scrollTop = do
2021-07-01 11:59:44
327
原创 js之作用域与作用域链,闭包
作用域与作用域链概念1、域2、作用域链概念1、域在js中,作用域分为全局作用域与局部作用域全局作用域:由<script>标签产生的区域,从计算机的角度可以理解为window对象局部作用域:有函数产生的区域,从计算机的角度可以理解为该函数的AO对象注意:在ES6之前,只有函数可以产生作用域,是没有块级作用域这一说的2、作用域链在js中,函数存在一个内部隐式属性[[scopes]],这个属性用来保存当前函数在执行时的环境(上下文),由于在数据结构上是链式的,也被称为作用域链,
2021-07-01 11:25:43
507
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人