- 博客(74)
- 收藏
- 关注
RSS订阅原创 安装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关注的人