- 博客(83)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 web前端面试题
得分点 : 数据、、、写入方式、数据共享、发送请求时是否携带、标准回答 : Cookie、SessionStorage、 LocalStorage都是浏览器的本地存储。 它们的共同点：都是存储在浏览器本地的 它们的区别：cookie是由服务器端写入的，而SessionStorage、 LocalStorage都是由前端写入的，cookie的生命周期是由服务器端在写入的时候就设置好的，LocalStorage是写入就一直存在，除非手动清除，SessionStorage是页面关闭的时候就会自动清除。cooki
2022-11-11 15:30:55
1019
原创 Vue组件间的通信【子传父，父传子，同级传递，爷孙传递】
vue一个重要的思想就是组件化开发，说到组件化开发，提高结构样式行为的复用性，组件写好了，但组件间之间数据如何传递，就成了一个问题…vue 组件之间是可以相互嵌套的，就像一个盒子，里面放了两个小盒子，这样就可以形成父子三个，兄弟两个的情况那么我用一个自己写的小 demo 来说一下数据如何通信，在这里我设置一个场景，父亲和儿子以及未来儿媳妇的故事~
2022-11-02 10:23:25
669
原创 微信小程序父子组件之间传值
组件之间传值有两种，一种是，另外一种是区别：首先我们在我们的小程序中创建一个 文件夹 用来存放我们的子组件。创建以后我们就可以在 文件夹下创建我们的子组件 , 当然创建成任何名字都可以，我在这里创建成 ，如下图：创建好以后就是引入了，把这个 引入到我们的 首页中去。 这里说明一下，我在这里就创建了，一个是 节点下的 路由页面，以及 节点下的 组件。（原则在父组件的 json 文件中的 usingComponents节点下 引入）如下：引入以后怎么把的内容上呢？… ：也很简单
2022-06-23 15:09:49
8844
2
原创 npm install安装包报ERESOLVE unable to resolve dependency tree等错误
npm install 安装我们需要的包的时候报错我现在使用的是vue.2 ，需要安装低版本的swiper报错信息： 过程：查阅网站起初我以为是： npm 版本太高了，一度装了6.x 的npm ，重新装包，但是并没有什么卵用…后来… 我以为是我的node_modules 这个包给我装坏了，我就给它删了，我emmmm…大无语事件，npm i,当我想重新安装的时候，又再次报错！解决方法：复制它的名字，安装一下： npm i eslint-plugin-vue@"^8.0.3" 安装以后，我的
2022-05-13 23:04:32
958
原创 vuex报错TypeError: sub is not a function
vuex报错调试报错报错信息： TypeError: sub is not a function解决过程： 刚开始实现某个功能的时候，测试没有任何问题，再全部完成以后，我打开vue 插件调试工具，此时问题出现了，点击某个事件，报错了，看自己写的 代码，没有任何问题，但是确实报错了，于是我重启了项目，再点击事件，就不报错了解决方法： 写 vuex 的时候，不打开 vue 的调试工具...
2022-05-10 03:20:39
4463
6
原创 使用Vant 报错(0 , vue__WEBPACK_IMPORTED_MODULE_10__.ref) is not a function）
安装完 vant 以后 报错报错信息： app.js:127 Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_10__.ref) is not a function解决思路 ： 查看我们的 package.json 文件中 我们使用的 vant 和 vue 的版本是不是一致的 ，如果不一致 ，把 Vant 卸载掉 重新安装解决方案：卸载 vant yarn remove vant重新安装vant ： yarn add vant@
2022-05-08 14:19:32
4753
5
原创 Es6循环 五种方式
Es6循环 五种方式使用 foreach 点击显示数组目标项索引<button @click="show1">使用 foreach 点击显示数组目标项索引</button> <!-- 缺点： 即使找到了 我们想要的数据 ，也会强行把循环走完 ，且无法终止 --> var vm = new Vue({ el: '#app', data: { // 用于 foreach 以及 some
2022-04-30 00:50:55
4529
4
原创 webpack(自动打包)页面报错Cannot GET /
webpack(自动打包)页面报错Cannot GET /安装 webpack 自动打包工具以后 ，也配置完毕 ，但是打开页面以后显示的是 ：解决办法：在webpack.config.js文件中 module.exports 对象下 添加以下代码即可:module.exports = { // 设置打包模式 mode: 'development', // 修改默认打包路径 entry: path.join(__dirname, './src/index.js'
2022-04-19 12:07:17
2567
9
原创 webpack 运行时报 jQuery的错
webpack 运行时报 jQuery的错报错信息：ERROR in ./node_modules/jQuery/lib/node-jquery.js 5:13-35Module not found: Error: Can't resolve 'jsdom' in 'C:\Users\Dell\Desktop\dmeo\node_modules\jQuery\lib' @ ./src/index.js 1:0-22 3:0-1 4:4-5 5:4-5ERROR in ./node_modules
2022-04-18 17:57:44
1065
2
原创 快速开发一个头像上传【模块】
基本使用步骤在 head 标签中 导入 cropper.css 样式表：<link rel="stylesheet" href="/assets/lib/cropper/cropper.css" />在 的结束标签之前，按顺序导入如下的 js 脚本：<script src="layui.all.js"></script><script src="jquery.js"></script><script src="Cropper.
2022-03-14 12:08:16
488
原创 跨域 & Jsonp【详细】
跨域在了解什么是跨域之前，我们先聊聊为什么会用到跨域，那就不得不说浏览器的同源策略了那么什么是同源呢:同源是指两个网页的协议，域名，端口都相同，那么这个两个网页就有相同的源，也就可以相互请求，不会受到浏览器同源策略的影响（同源策略就是：浏览器的保护机制：对于不同源的网页进行数据请求的时候，浏览器会阻止数据返回我们电脑的页面中）；那么什么是跨域呢：很简单，与同源相反就是跨域，也就是说，当我们在不同源的网页中进行数据请求的时候，就会用到跨域。出现跨域的根本原因就是： 浏览器的同源策略不允许非同源的U
2022-03-07 17:24:22
828
原创 axios发起数据请求【详细】
axios发起数据请求axios类似于jQuery都是一个库，axios是专注于数据请求方面的库，轻量级，非常好用使用前需要先调用axios.js的包// 使用前先调用<script src="./js/axios.js"></script>直接上才艺，先分开说如何使用axios发起get请求以及post请求，再使用axios类似于jQuery中的$.ajax({})的方式发起get以及post请求使用axios发起get请求 <button id="btn1"
2022-03-06 22:17:49
1842
原创 Node 模块化【详细】
Node模块化为什么要模块化开发呢？ 聊聊它的好处：提高了代码的复用性提高了代码的可维护性可以实现按需加载那么什么是模块化开发呢：编程领域中的模块化指的就是，遵守固定的原则，把一个大文件拆分成独立并互相依赖的小模块。Node中的模块分类：Node中根据来源不同，可以把模块分为三大类：内置模块也就是我们之前说到的：（Node模块是由Node官方提供的，例如：fs，path，http）自定义模块（就是我们自己创建的.js文件）第三方模块（也就是不是官方提供的模块，这类模块我们想使用就
2022-02-10 14:55:26
1070
原创 Node 三大模块【详细】
什么是 fs 文件系统模块fs是node.js提供的读取和写入的方法来操纵文件的模块。接下来我们聊聊三点内容，如何读取文件，写入文件以及一个动态路径的解决问题。在使用fs的方法之前，首先要导入fs，代码很简单，也很固定：const fs = require('fs');然后就可以执行一下读取和写入方法了：fs.readFile() 方法，用来读取指定文件中的内容fs.writeFile() 方法，用来向指定的文件中写入内容读取指定文件中的内容fs.readFile() 的语法格式：
2022-02-09 11:44:52
1006
原创 Node.js的环境配置【详细】
Node.js的环境配置在环境配置之前，我们先回顾一下浏览器中JavaScript的组成部分： 可以分为两部分核心语法 (循环，函数...)和web API (DOM BOM).如下图所示：回顾一下为什么JavaScript代码能够在浏览器中被执行：因为不同的浏览器都含有不同的JavaScript解析引擎：举个栗子： Chrome使我们开发最常用的浏览器，为什么他能成为最常用的浏览器，它的对我们哪里友好呢？ 其实，谷歌浏览器的V8解析引擎是现在众多浏览器中对JavaScript代码解析最好的引擎
2022-02-08 09:17:01
1834
原创 GitHub 详细使用【 详细 】
GitHub前面我们聊了Git操作 【详细】【一篇就够】，接下来我们聊聊GitHub和Git分支。先说说GitHub…GitHub是全球最牛的开源项目托管平台，我们可以在里面下载代码，提出需求，以及发表自己的建议。对我们的学习无疑是最好的选择之一…在了解GitHub之前我们先了解一下比较常见的两种开源许可协议，我们都知道GitHub是开源的，那么接下来说的两种协议也是开源的。GPL 这个协议具有传染性，也就是说： 使用这个协议写出来的代码项目，也必须是开源的。也就少了隐私性。 使用 GPL 的最著
2022-01-30 20:46:26
21174
2
原创 Git操作 【详细】【详细】
什么是 GitGit 是一个开源的分布式版本控制系统，是目前世界上最先进、最流行的版本控制系统。可以快速高效地处理从很小到非常大的项目版本管理。特点： 项目越大越复杂，协同开发者越多，越能体现出 Git 的高性能和高可用性Git 的特性Git 之所以快速和高效，主要依赖于它的如下两个特性：直接记录快照，而非差异比较近乎所有操作都是本地执行与SVN的差异比较传统的版本控制系统（例如 SVN）是基于差异的版本控制，它们存储的是一组基本文件和每个文件随时间逐步累积的差异。好处： 节省磁盘空间
2022-01-28 16:28:18
2763
原创 HTTP协议【加强】【详细】
HTTP协议加强我们聊聊什么是http协议，http请求消息的组成部分，以及相应消息的组成部分；最后了解常见的请求方法，以及常见的响应状态码。什么是互联网中的通信就是服务器把通讯的内容通过响应的方式发给客户端浏览器；其中：通信的主体是： 服务器 和 客户端浏览器通信的内容是： 就是传递的数据通信的方式是： 响应互联网中的通信协议是什么客户端与服务器之间实现网页内容的传输，那么双方都要遵守网页内容的传输协议。网页内容又叫做超文本，所以网页内容的传输协议又叫做超文本传输协议，也叫HTTP
2022-01-26 21:49:02
1823
原创 ES6 let var const 【详解】【区别】
为什么使用 ES6 ?每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。变量提升特性增加了程序运行时的不可预测性语法过于松散，实现相同的功能，不同的人可能会写出不同的代码ES6新增变量声明：let ：ES6中新增了用于声明变量的关键字；作用域：let声明的变量只在所处于的块级有效； if (true) { let a = 10; }console.log(a) // 此时会报错 a is not defined （作用域
2022-01-12 13:08:44
277
原创 正则表达式 【一篇就够】【函数封装案例直接拿来用】
什么是正则表达式我们平时打游戏需要先注册账号，注册不是随意的，而是按照一定的规则，否则就无法注册成功。那么这个规则的判断就是通过正则表达式来判断的。其他语言也会使用正则表达式，我们现在主要是利用JavaScript 正则表达式完成表单验证。知道了什么是正则表达式，那么聊聊如何使用：正则表达式在js中的使用正则表达式的创建（两种方式）：方式一：通过调用RegExp对象的构造函数创建var regexp = new RegExp(/123/);方式二：利用字面量创建 正则表达式【重点记忆，常用
2022-01-11 16:12:22
611
原创 JS 递归 【微重点】【案例】【浅拷贝&&深拷贝】
什么是递归递归： 定义：如果一个函数在内部可以调用其本身，那么这个函数就是递归函数。简单理解的话就是:函数内部自己调用自己；tips： 递归函数的作用和循环效果一样，由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件return。案例： （写几个案例熟练一下递归）：利用递归求1~n的阶乘：//利用递归函数求1~n的阶乘 1 * 2 * 3 * 4 * ..n function fn(n) { if (n == 1) { //结束条件
2022-01-10 13:57:47
537
原创 【解决】谷歌在console面板点击刷新进入sources面板问题
【解决】谷歌在console面板点击刷新进入sources面板问题不知道大伙有没有遇到这个问题，在一次谷歌console控制台调试代码以后，关闭浏览器，修改代码，重新打开页面，再进入控制台刷新页面的时候，点击刷新，此时不是刷新了控制台打印的数据，而是进入了sources调试面板，这是为什么呢？产生错误原因分析：由于上一次我们在调试代码的时候，在sources面板，先设置断点，然后点击刷新,此时可以点击下一步进行调试。那么我们如果细心发现，只有先设置了断点，刷新才会进入调试。那么我们把断点取消掉不就可以
2022-01-10 11:41:53
1945
原创 JS 严格模式【this指向问题与函数的变化】
严格模式什么是严格模式：我们了解了前面的JS 函数与函数【this指向问题】 以及 改变函数内部的this指向【三种方法】后，我们来聊聊什么是彦戈模式，严格模式下this指向问题与函数问题有哪些变化。查阅文档我们知道： JavaScript 除了提供正常模式外，还提供了严格模式（strict mode）。ES5 的严格模式是采用具有限制性 JavaScript变体的一种方式，即在严格的条件下运行 JS 代码。严格模式在 IE10 以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略。严格模式对正常
2022-01-09 12:58:31
240
原创 改变函数内部的this指向【三种方法】
改变函数内部 this 指向前面我们讲到函数的this指向问题:JS 函数与函数【this指向问题】；那么接下来我们聊聊改变函数内this指向如何实现， js提供了三种方法 call() apply() bind(),下面细聊他们的使用方法。call方法call()方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的 this 指向。应用场景: 经常做继承.var o = { name: 'andy'} function fn(a, b) { console.lo
2022-01-09 11:34:56
907
1
原创 JS 函数与函数【this指向问题】
函数与相关的this指向迄今为止我们经常见到的函数，在这里有六大类：普通函数构造函数对象方法函数事件绑定函数定时器函数立即执行函数六大类函数都是我们经常用到的，那么他们的函数样子还记得是什么样么？他的this指向忘记了没？下面分别对这六大函数形式总结：普通函数定义方式： function fn() { console.log('我被调用了'); } fn();window.fn(); // 此时可以看出普通函数的 this指向为 window对象函
2022-01-08 10:21:55
279
原创 JS商品查询案例 【利用数组新增方法操作数据】
JS商品查询案例我们在学习了ES5新增的操作数组的新方法以后，利用这些新的方法，forEach,filter,some；来动态实现一个商品查询的案例。案例需求：定义数据数组，数组中放数据对象把数据动态添加到页面当中给页面添加一个通过价格区间查询商品的功能再给页面添加一个通过名称查询商品的功能tips: 查询商品是用fliter还是some呢？ 通过价格区间查询商品功能，很显然价格区间的商品是不止一个的，也就是不唯一，那么就用filter来查询；相反通过名称查询商品就比较精确了，一般都是一个
2022-01-06 15:51:03
574
原创 ES5 新增方法 【数组方面】
ES5新增数组方法（常用）新增了数组的快速遍历值，索引，数组：forEach,快速查找数组中符合条件的所有值，索引,数组：filter查询数组中有没有某个值，索引，数组：somefilter 与 some的异同点：相同点：都是查询数组中符合条件的值不同点：filter查询数组中满足条件的所有值，会把数组中所有满足条件的值都返回出来。返回值为一个新的数组，可以声明一个变量保存起来这个数组，方便进行其他的操作；some 返回值是布尔类型，作用主要是查找某个元素是否存在，不存在返回fa
2022-01-06 08:06:14
529
原创 Echarts 数据可视化 5分钟【带你玩转】
数据可视化【Echarts】想实现炫酷的动态数据效果嘛？想制作属于自己的数据可视化页面嘛？跟着魔鬼的步伐，5分钟，带你快速写出自己想要的可视化数据。在聊如何实现之前，必须要提的就是Echarts官网了，里面有大量的数据可视化库，供我们学习与使用。网站我放这里了Apache ECharts一个基于 JavaScript 的开源可视化图表库。其他不多说，直接上才艺，想实现任意一个可视化数据模块，大致可以分为五个步骤：引入Echarts.min.js / Echarts.js给数据模块创建一个DOM
2022-01-03 16:21:11
1167
原创 JS 本地储存 【详细】
本地储存为什么需要本地存储呢：数据存储在用户浏览器中，在控制台中Application模块中查看。设置、读取方便、甚至页面刷新不丢失数据容量较大，sessionStorage约5M、localStorage约20M只能存储字符串，可以将对象JSON.stringify() 编码后存储Application模块：本地储存分两种，一种是sessionStorage,以及localStorage.那么有什么异同点呢？分别来说：window.sessionStorage生命周期为关闭浏
2022-01-02 18:45:14
9927
原创 JS动态效果之 【侧边栏滚动固定效果】
侧边栏滚动固定效果滚动与scroll有关，我们使用 scroll 系列的相关属性可以动态的得到自己的大小scrollWidth; scrollHight（不含边框）、滚动距离scrollTop;scrollLeft等。tips: 上面四个方法返回的值都是数值类型，不含单位的px的；滚动是页面的滚动，我们知道当浏览器界面显示内容不全的时候就会出现滚动条，滚动条向下拉就能看到下方被隐藏的内容，同时我们当时页面的最上方也就被遮盖住了，想看到上方被遮盖住的部分，就需要滚动条向上拉。 在这里说一个方法能够获上
2021-12-27 09:25:20
3051
原创 JS动态效果 之【模态框拖拽效果】
模态框拖拽效果在实现这个案例效果首先我们了解几个属性，offsetLeft.offsetTop,e.pageX,e.pageY;这几个量都掌握以后就可以操作了…分别解释一下：offsetLeft：指的是返回一个带有定位父元素左边偏移量的值，当然如果需要操作的元素的父元素没有定位，那么它返回的就是距离浏览器最左侧页面的距离。offsetTop：指的是返回一个带有定位父元素顶部偏移量的值，当然如果需要操作的元素的父元素没有定位，那么它返回的就是距离浏览器最顶部页面的距离。e.pageX是指鼠标距离浏
2021-12-25 10:07:35
1356
原创 BOM部分 总结【详细】
BOMBOM是浏览器对象模型，也是网页开发中最大的对象，它的核心对象时windowBOM常见的事件对象（onlode,resize,setTimeout定时器）1.onlode事件对象如何使用？我们知道js代码摆放的位置是不固定的，但是大多为外链式，并且js代码如果摆放在页面元素加载前面就会报错，由于获取不到相应的元素对象，如下代码：实现点击123所在的盒子，弹出aa的效果，此时的结果显然是实现不了的，因为按照js的执行机制是从上往下依次执行，因此js代码中是获取不到该元素的。因此报错：TypeE
2021-12-24 11:41:11
885
原创 设计一个发送验证码的案例【DOM】
设计发送验证码案例DOM部分学习以后，设计一个发送验证码，老样子，先分析，再写代码…案例分析：首先搭建好结构，一个输入框一个按钮，按钮上给个值为点击发送验证码点击以后禁用按钮点击按钮，按钮上的内容变成，倒计时锁多少秒设置一个定时器，每隔一秒执行一次，让倒计时减一判断验证当前倒计时是否已经小于0，如果小于0，那么清除定时器，并且给定时器设置初始内容以及倒计时的初始时间，并且把禁用的按钮给调回来,用：btn.disabled = flase;来实现如果当前倒计时大于0，那么让时间不断减一即可
2021-12-04 00:02:18
649
原创 DOM 总结【重点核心】【增删改查】
DOMDOM部分我先现在就学完了，总结一下，不外乎对我们标签元素的增删改查，我做了一个下面的Xmind图，我们直接看图了解…利用我们上面的增删查改再加上之前学的ECMAscript就可以对我们的结构进行一系列操作前面的知识遗忘，请看这两篇的文章：DOM 详细 一篇就够【重点】和DOM 节点操作 【微重点】【案例】tips: 想场景喏…不断复盘，不断优秀，让自己成为镜子里想成为的那个人.关注三连，持续更新~~~...
2021-11-30 09:07:06
147
原创 DOM 节点操作 【微重点】【案例】
节点（node）前面我们聊到，一篇DOM就够了章节，我们掌握了常用的操纵元素方法…接下里我们聊聊节点是如何高效操作的…那么什么是节点呢？(都有哪些类型，以及如何判断)其实页面上的所有看得到的，看不到的：都叫节点，看不到的这里举个栗子（换行,元素的属性等）。这么多节点，那一定有分类了，那你猜对了;确实有：并且分为1号标签节点，2号属性节点，3号文本节点；为什么有1.2.3号呢？这个是程序之初设置好的，我们可以这么理解，1就代表标签节点，2就代表… 3就代表文本节点…如果我们获取的节点，不知道是什么
2021-11-29 12:23:38
786
原创 【DOM】 Tab栏切换效果
Tab栏切换上一篇文章我们聊了DOM部分，我们掌握了一些操纵网页元素的方法，各种的"增删改查",那么之后我们就练习一些例子对DOM部分知识进行一下巩固…tab栏切换在我们实际开发中，非常常见，几乎每个网站都有他的影子，那么他是如何实现的呢？Tab栏切换效果制作：在制作以前我们先给一个场景：样式结构代码如下：样式： <style> * { margin: 0; padding: 0;
2021-11-27 17:13:14
431
原创 DOM 详细 一篇就够【重点】
DOM相关操作JavaScript分为三个部分，我们在之前说道，JS分为三个部分，ECMAscript，DOM,和BOM;详细的在这里…JavaScript历史;至此我们ECMAscript部分已经学完，加下来就是DOM部分,DOM是文档对象模型，顾名思义也就是操纵我们我们之前写的html部分的标签的。之前有一个大佬曾经说过，万物皆对象…DOM都有哪些操作呢？我们先看图示：明显看出DOM分为四个重要部分（都是操作）操作元素内容操作元素属性操作表单属性操作元素类名操作元素内容：我们
2021-11-27 10:43:15
5979
5
原创 数据类型【堆栈】【传参区别】【微重点】
数据类型我们都知道，数据类型分为简单数据类型（string,number,boolean,以及两种空【undefined,null】)，和复杂数据类型(object，array等)简单数据类型（值类型）细说简单数据类型的话，我们要记住一个特殊的情况，那就是null，这个值类型，如果使用typeof()检测一下的话，他的类型是对象object，这个是一个bug，并且没有去修复。那么你可能要问了，那他的使用场景呢？eg:如果我们要创建一个对象，但是又没想好，给他写哪些属性值的时候，那就直接让一个对象名等于
2021-11-25 19:29:04
373
原创 Js 定时器【浏览器时刻记录你来到这个世界的时间】
让浏览器时刻显示你来到这个世界上的时间利用浏览器显示电脑来到世界上多久了…数字是不断增加的，那么怎么实现呢？思路：先定义好五个变量存储，年份，天，小时，分钟，秒…获取当前的时间（这个时间是距离1970年的1月1日 0:0:0），并且给他转换成秒数把获取的时间除以相对性进制转换后的，年，月，日，时… 如果不晓得怎么算的话，eg: 年now_time /(606024360); 天：(now_time / (6060*24))%360;那么要问了，为什么取%360？因为咱们为了获取多出来的那些
2021-11-23 16:54:03
1098
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人