- 博客(34)
- 收藏
- 关注
RSS订阅
原创 前端面试题-端面试题-面试题-试题-题（持续更新）
一、原生js1、数组方法：push：将元素添加到数组的末尾，返回数组长度unshift：将元素添加到数组的开头，返回数组的长度pop：删除数组的最后一个元素，返回被删除的元素shift：删除数组的第一个元素，返回被删除的元素splic：删除指定数量的元素，替换指定的元素，在指定位置添加元素 ，返回被删除元素组成的数组slice：截取两个下标参数之间的元素 slice（index1，index2）不包括index2sort：按某种规定的方法排序数组 常见： sor...
2021-12-14 11:50:13
1578
原创 React 项目 打包优化
一、打包体积分析通过分析打包体积，才能知道项目中的哪部分内容体积过大，才能知道如何来优化 安装分析打包体积的包：npm i source-map-explorer 在 package.json 中的 scripts 标签中，添加分析打包体积的命令 "scripts": { "analyze": "source-map-explorer 'build/static/js/*.js'",} 对项目打包：npm run build（如果已经打过包，可省略这一步）
2021-12-26 18:14:44
1523
1
原创 在CRA创建的项目中使用@并让其识别@路径并给出路径提示
1.vscode识别@路径并给出路径提示在项目根目录创建jsconfig.json配置文件 在配置文件中添加以下配置jsconfig.json 中：{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] } }}经过以上操作，VSCode 会自动读取jsconfig.json中的配置，让 vscode 知道 @ 就是 src 目录2.配置@路径别...
2021-12-22 14:25:05
590
1
原创 React 路由 === 小记
1.下包yarn add react-router-dom@5.3.02.react-router-dom这个包提供了三个核心的组件。import { HashRouter as Router, Route, Link } from 'react-router-dom'可以使用as进行重命名常用两种Router HashRouter：使用 URL 的哈希值实现（http://localhost:3000/#/first），是通过监听 window 的hashchange..
2021-12-22 14:10:30
1073
1
原创 React解决类组件 this 指向问题
需求：点击+1按钮，计数器+1import React, { Component } from 'react'export default class App extends Component { state = { count: 0, } handleClick() { //报错： Cannot read properties of undefined (reading 'state') console.log(this.state.count) }
2021-12-09 20:58:23
841
原创 后台管理系统 权限设置大致流程
用户管理：帐号的增删改查，为该帐号分配角色角色管理：角色的增删改查，为该角色分配权限数据权限管理：需要进行权限管理的页面进行增删改查权限管理分三部分 api 主要后端处理， 前端：响应拦截统一错误处理 路由 将路由分为二大块 静态路由：不需要访问权限的路由 动态路由：需要权限访问的路由 默认只有静态路由 在获取到用户信息后 用户信息中包含当前用
2021-11-28 08:00:00
1603
原创 $attrs与$listeners组件传值
组件传值 非props属性：父组件传入子组件属性，但子组件没有接收称为非props属性，非props属性默认会加到子组件标签最外层（inheritAttrs：true,如果是false就不放到标签最外层显示） 所有的非props属性都可以通过$attrs收到 应用： v-bind="$attrs" 将所有的非props属性绑定到相应标签，也可以用于组件 所有组件上的方法绑定子组件都可以通过$listeners接收 应用： v-on="$listeners"
2021-11-27 20:47:26
352
原创 vue-print-nb 打印插件的使用
（一）首先安装插件npm install vue-print-nb --save（二）在main.js 中引入并注册import Print from 'vue-print-nb'Vue.use(Print)（三）使用方法<div id="printTest"> 打印测试</div><el-button v-print="'#printTest'">打印</el-button>...
2021-11-25 16:45:00
290
原创 在vue中使用qrcode生成二维码
作用：QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。本文主要 描述 toCanvas 方法使用 ： 安装 yarn add qrcode 导入 import qrcode from 'qrcode' 定义一个canvas标签放二维码 <canvas ref="canvas" /> 生成 ..
2021-11-24 20:25:09
1368
1
原创 腾讯云上传使用
腾讯云上传使用1：安装插件 cos-js-sdk-v5 yarn add cos-js-sdk-v5 2:导入 import Cos from 'cos-js-sdk-v5' 3:实例化 let cos = new Cos({ SecretId: 'COS_SECRETID', // 身份识别 ID SecretKey: 'COS_SECRETKEY', // 身份密钥}); 4:使用 cos...
2021-11-24 19:47:45
287
1
原创 理解$nextTick()
一、实例介绍有一个div，默认用了v-if隐藏，点击按钮之后，改变v-if的值让他显示出来，并且取到div中的值:<div id=app> <div id="div" v-if="showDiv">我是显示文本</div> <button @click="showAndGetText">获取内容</button ></div><script>var app = new Vue({ el: '#ap.
2021-11-18 11:30:00
206
1
原创 路由基本使用
1：安装 npm i vue-router2:src/router/index.js 导入 import VueRouter from 'vue-router'3:注册 import Vue from 'vue' Vue.use(VueRouter)4:实例化 const router=new VueRouter({ routes:[ { path, name, ...
2021-11-18 10:55:29
669
1
原创 路由钩子 （导航守卫）
vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察$route对象来应对这些变化，或使用beforeRouteUpdate的组件内守卫。一、全局导航钩子全局导航钩子一共有3种，前置守卫，后置钩子，解析守卫1.全局前置守卫你可以使用router.beforeEach注册一个全局前置守卫：const...
2021-11-18 10:50:28
564
原创 Vue路由传参
废话不多说，上干货！1.基本路由传参传值：写法一：this.$router.push('/path地址?参数1=值1&参数2=值2')写法二：this.$router.push({ path:'/path地址', query:{ 参数1:值1, 参数2:值2 } })接收：this.$route.query.参数名注意区分router 和 routerouter:路由的实例化对象，.
2021-11-17 21:12:05
662
2
原创 Vue自定义指令
简介除了核心功能默认内置的指令 (v-model和v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，当页面加载时，元素将获得焦点 (注意：autofocus在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：// 注册一个...
2021-11-16 20:49:25
159
1
原创 js-cookie 和 nprogress插件的使用
js-cookie使用步骤： 下载 npm i js-cookie 导入 import Cookiejs from 'js-cookie' 获取： Cookiejs.get(key) 设置：Cookiejs.set(key,value) 删除：Cookiejs.remove(key) json相关 js-cookie允许你向cookie中存储json信息。如果你通过set方法，传入Array或类似对象，而不是简单的string，那..
2021-11-14 20:32:31
232
2
原创 Sass 详解
Sass 是一种 CSS 的预编译语言。它提供了变量（variables）、嵌套（nested rules）、混合（mixins）、函数（functions）等功能，并且完全兼容 CSS 语法。Sass 能够帮助复杂的样式表更有条理， 并且易于在项目内部或跨项目共享设计。1、变量变量是存储信息并在将来重复利用的一种方式，在整个样式表中都可访问。你可以在变量中存储颜色、字体 或任何CSS值，并在将来重复利用。Sass 使用$符号 作为变量的标志。例如：SCSS：$fon...
2021-11-13 21:09:44
4891
2
原创 解决跨域方法 1.跨域浏览器 2. proxy配置代理
1.跨域浏览器 创建一个文件夹， C:\aaa （自命名） 创建一个谷歌浏览器的快捷方式 在快捷方式点右键 =>属性=>目标，移动到最后，加入空格，粘贴 --disable-web-security --user-data-dir=C:\aaa 点击确定，打开后就是跨域浏览器 ====>2. proxy配置代理 修改.env.development内的基地址为 : VUE_APP_BASE_API = '/ab...
2021-11-13 20:22:53
1683
2
原创 vue中如何使用ESlint开发
一、在vscode中安装以下扩展二、配置setting.json编辑以下代码到settings.json中（覆盖）{ "workbench.colorTheme": "Default Dark+", "editor.fontSize": 14, "workbench.editor.enablePreview": true, //预览模式关闭 "editor.formatOnSave": true, // #每次保存的时候自动格式化 // 自动...
2021-11-06 14:37:32
464
2
原创 JavaScript 数组方法
（详情点击对应方法名跳转W3C） Array 方法总结 方法 描述 concat() 连接两个或多个数组，并返回已连接数组的副本。 copyWithin() 将数组中的数组元素复制到指定位置或从指定位置复制。 entries() 返回键/值对数组迭代对象。 every() 检查数组中的每个元素是否通过测试。 fill() 用静态值填充数组中的元素。 fil..
2021-10-27 19:24:25
143
2
原创 JavaScript 字符串方法
一、字符串分割1、slice语法：slice（start，end） (不改变原字符串) 适用于字符串和数组。（1）截取字符串时不包括下标为end的元素。（2）end是可选参数，没有时，默认从start到结束的所有字符串。（3）当slice方法的参数为负数时，则其先加上字符串/数组的长度若第一个参数（表start位置）或者第二个参数（表end位置）为负数，则其对应的索引是这个参 数加上字符串的长度 ，如果此时还为负数，开始索引为0。（4）返回空字符串 ' ...
2021-10-26 21:30:35
638
2
原创 EventLoop
JavaScript是一门单线程执行的编程语言。也就是说，同一时间只能做一件事。单线程执行任务队列的问题： 如果前一个任务非常耗时，则后续的任务就不得不一直等待，从而导致程序假死的问题。1.同步任务和异步任务 为了防止某个耗时任务导致程序假死的问题，JavaScript 把待执行的任务分为了两类： 1.同步任务（synchronous） 又叫做非耗时任务，指的是在主线程上排队执行的那些任务，只有前一个任务执行完毕，才能执行后一个任务。2.异步任务（asynchrono...
2021-10-21 21:15:34
576
3
原创 vue基础指令
1.插值表达式目的: 在dom标签中, 直接插入内容又叫: 声明式渲染/文本插值语法: {{ 表达式 }}<template> <div> <h1>{{ msg }}</h1> <h2>{{ obj.name }}</h2> <h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3> </div></templa
2021-10-20 18:44:38
1584
3
原创 常用鼠标 、键盘事件及事件对象
常用鼠标事件：鼠标事件 触发条件 onclilk 鼠标点击左键触发 onmouseover 鼠标经过触发 onmouseout 鼠标离开触发 onfocus 获取鼠标焦点触发 onblur 失去鼠标焦点触发 onmousemove 鼠标移动触发 onmouseup 鼠标弹起触发 onmousedowm 鼠标按下触发 鼠标事件对象：鼠标事件对象 说明 e.clientX 返回鼠标相当于浏览器窗口可
2021-10-14 21:59:03
829
4
原创 DOM操作 （创建、增、删、改、查、属性操作、事件操作）
关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。1.创建1.document.write2.innerHTML3.createElement2.增加1.appendChild2.insertBefore3.删除1.removeChild4.改主要修改dom的元素属性，dom元素的内容、属性、表单的值等1.修改元素属性：src、herf、title等2.修改普通元素内容：innerHTML、innerTe
2021-10-14 21:41:58
5182
3
原创 创建元素的三种方法document.write() element.innerHTML document.createElement()及对比
document.write() element.innerHTML document.createElement() <script> // 三种创建元素方式区别 // 1. document.write() 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘 var btn = document.querySelector('button'); btn.onclick = function() {
2021-10-13 20:37:08
1027
2
原创 MySQL详解
MySql中的数据类型1.数值类型 大小 范围 范围 用途 TINYINT 1字节 -27~ 27-1 0~28-1 小整数 SMALLINT 2字节 -215~ 215-1 0~216-1 大整数 MEDIUMINT 3字节 -223~ 223-1 0~224-1 大整数 INT 4字节 -231~ 231-1 0~ 232-1 大整数 BI...
2021-10-13 18:09:42
678
2
原创 JS中改变this指向的方法
1.call方法call()方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的 this 指向 应用场景: 经常做继承var o = { name: 'andy' }；function fn(a, b) { console.log(this); console.log(a+b)；};fn(1,2)；// 此时的this指向的是window 运行结果为3 fn.call；(o,1,2)//此时的this指向的是对象o,参数使用逗号隔开,运行结果
2021-10-11 21:59:15
359
2
原创 js中this的指向问题
this是js中的一个关键字，函数运行时自动生成的一个内部对象，只能在函数内部使用。我们要讨论的是 this 的指向。总结就是一句话：谁调用就指向谁1.普通函数调用，此时 this 指向 window function fn() { console.log(this); // window } fn(); // window.fn（),此处默认省略window2.构造函数调用， 此时 this 指向 实例对象 fun.
2021-10-10 20:34:32
253
3
原创 git分支
1.分支的概念分支就是科幻电影里面的平行宇宙，当你正在电脑前努力学习Git的时候，另一个你正在另一个平行宇宙里努力学习SVN。如果两个平行宇宙互不干扰，那对现在的你也没啥影响。不过，在某个时间点，两个平行宇宙合并了，结果，你既学会了Git又学会了SVN！2.为什么需要分支 在实际开发中在进行多人协作开发的时候，为了防止互相干扰，提高协同开发的体验，建议每个开发者都基于分支进行项目功能的开发，例如： 3.master主分支在初始化本地 Git 仓库的时候，Git 默认已经帮...
2021-10-08 14:27:54
270
1
原创 Git基础
1.Git简介Git 是一个开源的分布式版本控制系统，是目前世界上最先进、最流行的版本控制系统。可以快速高效地处理从很小到非常大的项目版本管理。特点：项目越大越复杂，协同开发者越多，越能体现出 Git 的高性能和高可用性！Git 之所以快速和高效，主要依赖于它的如下两个特性：① 直接记录快照，而非差异比较② 近乎所有操作都是本地执行2.Git 中的三个区域使用 Git 管理的项目，拥有三个区域，分别是工作区（处理工作的区域）、暂存区（已完成的工作的临时存放区域，等待被提交..
2021-10-08 10:52:59
152
1
原创 光速上手，教你上传自己的npm包
npm(Node Package Manager)，一个Node的包管理器，平时我们常用的公共模块（插件）或者叫做包大多都放在上面，所以接下来要封装的插件，我们就简单称它为npm包，本文从就从这个简单的例子开始，逐步对它进行封装-发布-更新-扩展-使用，进而到得一个相对完整的npm包，下面开始。npm发布包步骤：1.注册npm账号，记好账户名、密码和邮箱（邮箱收到邮件后一定要进行验证，否则会报错）2.npm添加用户或登陆：npm login# 注意 Password...
2021-10-07 20:34:41
1183
2
原创 前端nodejs模块化
模块化的概念相对于其他静态语言，JS最大缺陷就是天生不具有模块化，没有语言层面的命名空间的概念。问题如下：编写通用模块很容易将其暴露给全局作用域，造成命名冲突。 浏览器按照从上到下解析HTML文档，多个<script>标签按照次序解析加载。这种机制导致存在依赖关系的JS模块，必须被依赖者先执行，依赖者后执行。比如使用jquery时，必须先导入jquery：<script src='jquery.js'></script><script src='jq
2021-10-06 19:54:49
440
5
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人