- 博客(57)
- 收藏
- 关注
RSS订阅原创 Vue3已成为默认版本，与Vue3的这些交集都在这了
目录Vue3的相关常用知识点一. 与Composition组合式API的邂逅1.1 与setup的初次交集1.2 ref函数1.3 reactive函数1.4 setup的注意点1.5 计算属性1.6 watch监视1.7 watchEffect函数1.8 Vue3的生命周期函数1.9 自定义hooks函数，体会组合式API的优势1.10 toRef与toRefs的使用二、其他不常用CompositionAPI2.1 shallowReactive 与 shallowRef2.2 readonly与shal
2022-02-06 21:04:00
1342
1
原创 JavaScript实现链式调用
JavaScript链式调用最近一直在学习JavaScript链式调用这块的东西，所谓的链式调用，简单粗暴的讲，就是在一个实例对象调用完一个方法后，在后边可以一直去调用其他方法，例如，Promise.then()的方法就是一个很好的例子，他可以在后边一直的.then下去。以下是个人的一些浅理解！！！不是很透彻！！！那么，链式调用究竟是如何实现的，个人理解：对于同步的链式调用，主要是与对应方法的返回值有关。接下来我们直接上代码/* 简单的链式调用 */class Person { constr
2021-10-28 18:42:36
4719
5
原创 一篇文章，彻底搞懂JavaScript浏览器的事件循环机制
关于浏览器的事件循环机制，在之前的话总是感觉模模糊糊，今天特意回顾了一下，彻底搞懂它！卷！浏览器的事件循环机制(JavaScript Event Loop)首先，JavaScript是一门单线程的语言，异步和多线程的实现需要借助JavaScript Event Loop事件循环机制来实现的，大体包括（调用栈、任务队列，任务队列又分为宏任务和微任务）JavaScript的代码在执行过程中，除了依靠函数调用栈来搞定函数的执行顺序外话需要靠任务队列来搞定另外一些代码的执行。整个执行过程，我们称为事件循环的过
2021-10-11 19:22:03
490
原创 深度学习React相关技术栈
React全家桶一、初识React首先需要引入React库，react.development.js需要在react-dom.development.js之前引入，因为react.development.js是核心库。二、jsx的语法编写规则定义虚拟DOM时，不要写引号标签中混入JS表达式要用{}包起来标签内样式的类名指定不能使用class，得用className在标签内写内联样式，要用style={{color:'red',fontSize:'12px'}}形式去写虚拟DOM只有一个根
2021-10-08 14:42:35
1795
原创 2021前端常见面试题及答案-HTML、CSS、JavaScript汇总，基础很重要！
2021前端面试题汇总，巩固基础目录2021前端面试题汇总，巩固基础HTML相关面试题1.网络中使用最多的图片格式有哪些2. 音、视频标签的使用3. HTML5新增的内容4.HTML5新增语义化标签有哪些，以及语义化标签的优点5.行内元素和块元素6.iframe是什么？有什么缺点？7.Doctype作用？严格模式和混杂模式如何区分，有何意义？CSS相关面试题1. CSS3新增的特性**边框：****背景：****渐变****文本效果****转换****过渡****动画**2.简述一下盒子模型3.清除浮动的
2021-08-30 14:05:39
1910
4
原创 node+express设置cookie后，服务端和客户端都获取不到
node与express搭建的服务，设置cookie后，服务端和客户端都无法获取翻车现场最近在做一个node+react的全栈项目，中途需要设置cookie来保存用户的id，但是在后台设置之后，发现路由总是跳不过去，将cookie打印后，无论前端还是后端，竟然都是undefined情况分析：在后台设置了cookie,但是在浏览器的cookie栏里并没有任何的cookie，前后台获取cookie都是undefined。一、与浏览器设置有关如果是谷歌浏览器：在地址栏输入：chrome://fla
2021-06-24 14:52:24
943
原创 nodejs设置session属性时报错Cannot set property ‘xxx‘ of undefined
nodejs设置session属性时报错Cannot set property ‘xxx’ of undefined这几天在学习node的过程中，想设置session和cookie，从而保存用户的登录状态，但是中途发现老报错。翻车现场原因：session写的位置不对TypeError: Cannot set property 'age' of undefined at D:\fore-end\node\10-project\routes\index.js:8:22 at Layer
2021-06-02 13:17:12
864
原创 nodejs连接mysql报错：throw err； // Rethrow non-MySQL errors
Nodejs连接mysql报错：throw err; // Rethrow non-MySQL errors报错环境：mysql8.0以上，windows10，64位翻车现场D:\fore-end\node\08-使用mysql获取数据\node_modules\mysql\lib\protocol\Parser.js:437 throw err; // Rethrow non-MySQL errors ^TypeError: Cannot read property '
2021-05-31 17:14:08
10067
5
原创 关于Vue的一次自我面试
关于Vue的一次自我面试关于Vue的一次自我面试一、介绍一下Vue的响应式系统二、computed与watch的区别三、介绍一下Vue的生命周期函数四、为什么组建的data必须是一个函数五、组件之间是如何通信的六、Vue事件绑定的原理七、slot是什么？有什么作用？原理是什么？八、Vue模板渲染的原理是什么？九、template预编译是什么？十、template与jsx有什么区别？十一、说一下什么是Virtual DOM？十二、介绍一下Vue中的Diff算法十三、key属性的作用是什么？十四、Vue2.0与
2021-05-22 18:01:51
229
原创 vue v-for循环遍历列表，点击每一项，根据服务器返回的id值，将不同的数据分别渲染在同一个页面
vue v-for循环列表，点击每一项，根据服务器传的id值，在同一页面渲染不同的数据问题起源：这几天在练习vue项目，其中vue-router的作用，在整个项目中起着至关重要的作用，其中包括一级路由的跳转、二级路由的跳转，这几天我遇到的这个问题是根据遍历服务器所给的数据，从而给这些数据都添加一个点击事件，点击不同的数据列表，让其渲染不同的内容，但是渲染的这些内容都是在这同一个页面组件中。这就用到了路由的动态匹配，但是由于是自己第一次练习，所以有些细节的东西没有掌握好，因此花费了一些时间去理解，所以今天
2021-04-26 09:02:14
2146
原创 Vue使用mockjs来生成模拟数据
Mockjs生成模拟数据在前端进行开发的时候，我们需要拿到后端的接口，然后调用进而拿到后端所提供的数据；但在实际情况当中，有可能后端的接口还没有设计好，但是你想要拿到数据进行测试，这个时候该怎么办呢？这个时候，就该体现mockjs的作用了，它可以为我们提供模拟的数据，让我们在开发中便于测试，当后端接口设计好后，我们只需要将对应的接口请求函数的路径换掉，其他的地方不变，这样就大大提高了我们的开发效率。最近我也在写项目，然后遇到类似的问题，所以今天就特意总结了一下mockjs的基本使用！一、首先，需要安装
2021-04-24 14:44:34
1795
原创 Vue+vant使用uploader上传图片
Vue使用vant上传图片给后台服务器这几天在写项目时，遇到了基本的业务需求，上传图片给后台，我是使用vant来开发的，由于是第一次亲身体验这种情况，所以当时我也是一头雾水，不知道该如何去下手，所以就从网上找到了相关的资源，然后发现，上传图片需要用到FromData对象。而且也需要设置相应的响应头。具体代码如下：这是vant所提供上传图片的组件<van-uploader v-model="fileList" multiple :max-count="1" :after-read=
2021-04-21 16:57:33
8927
2
原创 Vue使用localStorage保存登录状态
前端Vue项目使用localStorage来保存用户登陆状态在使用Vue写app项目时，最基本的功能那肯定就是登陆注册非它莫属了，但是最近我在写项目的时候遇到了一个问题，那就是在调用后端接口的同时，却无法进行正常的调用，原因其实很简单，那就是用户登录的状态无法保持！！！于是我在网上疯狂的查找其中相关的方法，但是看着各个博主的各种方式都可以实现，自己却怎么也搞不出来。所以今天特意总结了一下我的项目是用到vant来开发的，所以会有对应的组件首先应该在登录的过程中，调用后端所提供的接口，然后拿到后端传给的
2021-04-20 14:16:57
3961
1
原创 2021前端JavaScript面试题及答案
准备面试的你，必看这8道JavaScript面试题，摸透JavaScript的基础一、执行以下代码，测试浏览器会输出什么<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d
2021-03-22 17:06:13
5781
2
原创 计算机进制之间的相互转化---大学生的自我救赎
计算机基础之进制之间的相互转换今天上午上python课程时，老师偶然的提了一下计算机基础的相关知识—进制问题。步入计算机专业快两年的我却被基础知识摁在地上狠狠的摩擦，怎么还好意思说自己是计算机专业的学生？实力打脸！！！所以今天就特意查找相关资料，将计算机相关的进制转换问题总结了一下。什么是进制？进制也就是进位制，是一种常用的进位方法。对于计算机中的几进制所指的就是：表示在某一位置上的数运算时逢几进一位。 十进制就是逢十进一，十六进制就是逢十六进一，二进制就是逢二进一，以此类推，逢几进制就是逢几进位
2021-03-09 21:20:14
1342
原创 JS中数组的常用方法
JavaScript中数组的常用方法方法目录JavaScript中数组的常用方法1.`push()` 数组末尾添加元素2.`unshit()` 数组开始位置添加元素3.`shift()` 删除数组中的第一项4.`pop()` 删除数组中的最后一项5.`splice()` 数组的增删改6.`slice()` 查找两个索引中间的内容返回到新数组7.`concat()` 数组拼接8.`toString()` 数组转换为字符串9.`join()` 数组转换为字符串10.`indexOf()/lastindexOf
2021-02-18 17:27:33
626
原创 JavaScript字符串中常用方法
之前练习算法的时候，算法题都是用Java写的，但是我是一位前端人，应该用JS来写算法，但是对于JS的一些库和常用方法我好像都是在云里雾里，所以今天特意将JS字符串常用的方法总结如下：JavaScript字符串常用方法1.charAt（index）返回指定位置的字符index为参数，类型为Number，从0开始；如果使用该方法不带参数或者参数为NaN均返回字符串的第一个字符2.charCodeAt（index）返回在指定位置字符的Unicode编码index为参数，类型为Number3.c
2021-02-17 21:09:52
323
1
原创 ‘无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称‘ 或 ‘vue不是内部或外部命令‘
‘无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称’ 或 ‘vue不是内部或外部命令’ 解决方案如下：在用vue脚手架搭建项目时，报错该错误：‘无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称’ 或 ‘vue不是内部或外部命令’。报错原因：系统没有找到 vue.cmd 的地址，需要将地址加入到环境变量。解决方案：如果没有修改npm的全局模块的存放路径以及cache的路径及增加环境变量，那么就去c盘用户的AppData\Roaming\npm下找到vue
2021-02-05 09:45:55
5274
1
原创 npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。
npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。解决方案如下：问题原因：npm环境变量配置问题在cmd窗口输出node，回车后弹出信息node不是内部或外部命令，也不是可运行的程序，这时候就是环境变量配置的问题！步骤如下：1.打开此电脑==> 右键属性 ==>高级系统设置 ==>环境变量在用户变量新建，具体操作如下：2.npm的全局模块的存放路径以及cache的路径及增加环境
2021-02-05 09:45:31
5478
原创 vue : 无法加载文件 F:\nodejs\node_global\vue.ps1，因为在此系统上禁止运行脚本”
vue : 无法加载文件 F:\nodejs\node_global\vue.ps1，因为在此系统上禁止运行脚本” 解决方案如下：在使用VSCode终端使用PowerShell，用脚手架创建vue项目时，出现了一下报错信息：vue : 无法加载文件 F:\nodejs\node_global\vue.ps1原因分析：PowerShell执行时阻止了该操作，在终端输入Get-ExecutionPolicy指令后回车，发现返回Restricted，为受限制状态。解决办法：在终端输入Set-Execut
2021-02-04 21:29:24
1602
2
原创 深入理解Vue生命周期函数
对Vue生命周期函数的个人理解对于Vue已经学习了有一段时间了，但是有些东西还是似懂非懂，尤其是对于Vue生命周期函数，仅仅是有一些印象，但是在实际的运用过程中还是不会，有些东西实在是理解不了，所以今天就找了些资料，顺便自己也总结了一下。Vue生命周期函数图解将Vue生命周期函数抽成了下面几个周期9.1 组件创建期间9.1.1 beforeCreatebeforeCreate这个函数会在组件实例刚被创建，组件属性计算之前（如data属性），进行调用; el和data并未初始化9.1.2
2021-02-02 20:17:44
247
3
原创 二分查找法的实现及原理
二分搜索法原理：折半查找，直到查找到的元素与目标元素相等，查找终止二分搜索法的实现剖析：注：1.基于排序的代码才能使用该方法2.查找的终止条件：——> 中间的那个元素恰巧 等于 要查找的元素假定现有一个数组arr = [20,21,22,23,24,25,26,27,28,29]; 使用二分搜索法查找该数组中的某一个元素实现原理如下：（起始元素的下标 + 终止元素的下标）/ 2 --> 中间元素的下标判断位于该中间的元素是否小于要查找的元素，如果小于，则 起始元素的下
2021-01-21 17:46:10
1338
2
原创 选择排序算法的实现及原理---Java实现
选择排序选择排序的原理选择排序：每循环一次，从要比较的元素当中找出最小值，用这个最小值和所参加比较的最前面的元素交换位置选择排序的思路分析给定一个数组 arr [3,1,6,2,5]要比较的元素：3 1 6 2 5 （这一堆参加比较的元素中最左边的元素下标为0）第1次循环：找出最小的元素与所参加比较的最前面的元素交换位置交换位置后元素排列为：1 3 6 2 5要比较的元素：3 6 2 5 （这一堆参加比较的元素中最左边的元素下标为1）第2次循环：抛开在上次循环后的最小元素，在剩下的元素
2021-01-15 17:51:06
138
原创 冒泡排序算法的实现及原理---Java实现
冒泡排序冒泡排序的原则假设现在有一个数组 [a,b,c,d,e]拿到最左边的元素与自己相邻的右边的元素进行比较，如果a>b,则a与b进行交换位置，紧接着，a与c进行比较，如果a>c，则a与c再次交换位置，以此类推，每次循环后将最大的元素冒出。现在有一个数组 [3,1,6,2,5]，用代码实现冒泡排序，思路如下：第一次要比较的元素：3,1,6,2,5外层第一次循环：3与1比较，3和1交换位置，交换后的元素排列为：1,3,6,2,53与6比较，3和6不交换位置，但是会进行比较，元素
2020-12-30 13:20:50
171
1
原创 Webpack基本配置--打包资源
webpack打包资源笔记一、Webpack简介1.1webpack是什么Webpack是一种前端资源构建工具，一个静态资源打包器，在Webpack看来，所有的资源文件都会作为模块处理，根据模块的依赖M关系进行静态分析，打包生成对应的静态资源（bundle）。1.2webpack的五个核心概念Entry入口(Entry)指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。Output输出(Output)指示webpack打包后的资源bundles输出到哪里去，以及如何
2020-12-27 13:41:24
232
原创 Web前端Vue基础
Vue笔记目录Vue 笔记一、Vue的基本模板语法1.1插值操作1.2插值操作中有关其他指令的使用1.3动态绑定的指令1.4计算属性1.5事件监听1.6条件判断1.7循环遍历1.8表单绑定v-model（双向绑定）二、组件化开发2.1注册组件的基本步骤2.2组件模板的分离写法2.3组件数据的保存2.4父子组件的通信2.5父子组件的访问方式3.6插槽slotVue 笔记一、Vue的基本模板语法1.1插值操作<script src="https://cdn.jsdelivr.net/npm/vue
2020-12-24 13:14:21
356
1
原创 webpack打包报错：Invalid configuration object. Webpack has been initialized using a configuration object
翻车现场，惨不忍睹这块的modules写错了，应该是module！！！
2020-12-22 10:56:13
12272
2
原创 Module build failed (from ../../node_modules/babel-loader/lib/index.js): Error: Cannot find module ‘
webpack 命令 Module build failed (from ./node_modules/babel-loader/lib/index.js) 错误问题解决方案解决方案控制台输入 npm install @babel/core @babel/preset-env 命令成功解决
2020-12-21 21:45:39
1411
原创 webpack报错： if (!scriptUrl) throw new Error(“Automatic publicPath is not supported in this
报错 /******/ if (!scriptUrl) throw new Error(“Automatic publicPath is not supported in this browser”);Error: Automatic publicPath is not supported in this browserindex.html:95D:/fore-end/webpack/04-打包图片资源/src/index.html:95:33index.html:98D:/fore-e
2020-12-20 14:34:35
488
原创 webpack报错：ERROR in TypeError: The ‘compilation‘ argument must be an instance of Compilation
一、Webpack5报错：JavascriptModulesPlugin.js:119 getCompilationHooks[fore-end]/[webpack]/lib/javascript/JavascriptModulesPlugin.js:119:10CommonJsChunkFormatPlugin.js:30[fore-end]/[webpack]/lib/javascript/CommonJsChunkFormatPlugin.js:30:19Hook.js:14 Hook
2020-12-19 18:36:34
3007
2
原创 MongoDB报错：connecting to: mongodb://127.0.0.1:27017/?compressors=disabled&gssapiServiceName=mongodb
MongoDB安装完成，但是在输入启动命令时，报出以下错误解决方案1.在其他磁盘下新建一个data目录,里边新建一个db文件夹2.在MongoDB的bin目录下输入mongod.exe --dbpath D:\data\db其中 D:\data\db 代表的是你需要存放的位置，所以需要事先进行创建该文件夹3.之后这个DOS窗口不要关闭，重新打开一个DOS窗口，也是在MongoDB的bin目录下，输入mongo启动...
2020-12-06 15:24:36
13210
8
原创 ES6详细知识点汇总
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2020-11-27 16:39:13
485
原创 querySelector和getElementById方法的区别
querySelector、querySelectorAll和getElementById、getElementsByTagName()等的区别在做开发时，getElementById() 返回带有指定 ID 的元素。getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。这三类我们都熟知是获取元素的基本方式，但是在学习的过程中，也发现了querySel
2020-10-31 11:26:09
6729
原创 bootstrap响应开发原理与栅格系统
Bootstrap相关知识1.响应式开发的原理前端的响应式开发原理利用到了媒体查询，通常情况下，大多数开发适用于以下四个适配：超小屏幕 小于768px 布局容器宽度为100%@media screen and （max-width:767px）{ .container{ width:100%; }}小屏幕 大于768px 布局宽度为750px@media screen and (min-width:768px){ .container{ width:750px; }
2020-10-31 10:56:26
314
原创 CSS3常用基本知识总结
CSS3核心知识总结一、渐变1.1线性渐变渐变是基于background-image来完成的，线性渐变需要设置一个起始点和方向（指定为一个角度），换需要定义终止色。1.linear-gradient() 默认从上到下发生渐变2.linear-gradient() 改变渐变的方向...
2020-10-26 14:47:16
558
1
原创 HTML5核心知识总结
HTML5核心常用知识总结一、canvas（画布）绘制详细说明1.1canvas的基本用法1.什么是canvas？canvas是HTML5新增的元素，可通过JavaScript中的脚本来绘制图形，创建动画。使用canvas标签时，要成对出现；canvas元素默认具有高和宽，width：300px，height：150px。2.替换内容canvas在ie9之前的ie浏览器中不支持，要在该浏览器上给用户展示替代内容，我们只需要在canvas标签中提供替换内容就可以了。支持canvas的浏览器会忽略在
2020-10-07 18:56:38
615
原创 jQuery相关的基础知识
jQuery相关的知识总结一、关于jQuery1.jQuey是什么？jQuery是一个js的函数库，写得少，功能实现的多。2.jQuery的优点选择器强大：方便快捷查找到DOM元素。隐式遍历：一次可以操作多个元素。读写合一：读写数据用的是一个函数。链式调用：可以通过 “.” 不断地去调用jQuery对象的方法。二、jQuery核心函数jQuery向外暴露的就是jQuery函数，可以直接使用。当成一般函数：$()，括号里可传参数：1.可以是function，相当于window.onloa
2020-10-05 19:07:08
194
原创 AJAX的知识点详细总结
AJAX相关知识要点一、原生AJAX1.1 AJAX简介AJAX全称为Asynchronous JavaScript And XML，就是异步的JS 和 XML。通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。1.2 XML简介XML可扩展标记语言，XML被设计用来传输和存储数据。XML和HTML类似，不同的HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。例如：比如说有一个学生数据name="张三";age="14";sex=
2020-09-22 20:33:30
960
原创 nodemon运行 提示错误：无法加载文件 C:\Users\gxf\AppData\Roaming\npm\nodemon.ps1。
nodemon运行 提示错误：无法加载文件 C:\Users\gxf\AppData\Roaming\npm\nodemon.ps1。是因为你的笔记本电脑禁止运行脚本，解决办法如下：1.在搜索区域中找到windows PowerShell,按以下步骤进行。2.输入set-ExecutionPolicy RemoteSigned然后就可以了！...
2020-09-20 16:22:30
343
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人