- 博客(54)
- 收藏
- 关注
RSS订阅
原创 前端笔记目录
这里写目录标题HTML&CSSJavaScriptVUEVUE项目相关VUE项目打包优化微信小程序网络安全工具编辑器HTML&CSS移动端meta设置大全主流浏览器及内核五大浏览器背景介绍CSS Hack前端常见浏览器兼容性问题解决方案src 和 href 的区别JavaScriptcall、apply、bind三者的异同（this指向问题）JS中var、let、const 的区别箭头函数与普通函数区别ES6中calss和继承ES6中解构赋值Promise
2021-03-12 12:45:55
309
原创 npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。
npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。
2023-03-07 00:15:53
3825
原创 moment 使用
moment使用方法moment官网转换时间戳获取当前时间的时间戳只能选择当前日期不能选择当前日期之前的日期计算上月的今天的日期加7分钟计算本月开始的日期计算今天减一天求今年一月份的今天获取本周开始的日期根据月份生成moment并转为字符串字符串转moment对象moment官网转换时间戳var date = moment(1448896064621).format('YYYY-MM-DD HH:mm:ss');console.log(date)获取当前时间的时间戳var date = mom
2021-08-24 18:42:19
826
原创 react项目中常用的插件
首先下载node.js，不然是使用不了npm的moment.js --时间格式转换下载包：npm i moment -Snumeral - - 处理数字的下载包： npm i numeral -Saxios --异步请求下载包：npm i axios -Sxlsx --导出excel表格下载包：npm i xlsx -Sredux --数据状态管理下载包：npm i redux -Sreact-redux --提供Provider和connect下载包：npm i react-re
2021-04-01 13:31:26
808
原创 SVN安装
在windows下安装 SVN下载地址：SVN下载完成后，在相应的盘符中会有一个Setup-Subversion-1.8.17.msi的文件，目前最新的版本是1.8.17， 这里就使用这个版本。然后双击安装文件进行安装。我们默认安装在C:\Program Files (x86)\Subversion目录里。（傻瓜式安装）在C:\Program Files (x86)\Subversion目录中打开如下图：回到桌面Windows+R输入cmd然后回车打开如下图：把svn安装目录里中的bin目
2021-03-24 22:57:33
2595
原创 vue转场动画
目录一、不同级页面下的转场动画二、同级页面转场动画为了使客户的体验感更强，我们的APP中应该加入适当的转场动画效果来提升舒适感一、不同级页面下的转场动画首先我们要监听路由然后判断其是前进还是后退，来实现不同的动画export default { name: 'app', data() { return { transitionName: 'slide-left', } }, watch: { $route(to, from) { c
2021-03-03 10:45:25
440
原创 vue结合keepAlive使用转场动画
由于keepAlive和transition都是vue自身组件不需要安装，直接使用：<template> <div id="app"> <transition :name="transitionName"> <keep-alive> <router-view class="child-view" v-if="$route.meta.keepAlive" /> </keep-alive&.
2021-03-03 10:16:10
267
原创 前端路由原理
目录一. 什么是前端路由二. 有几种模式三. `Hash` 模式3.1 相关API3.2 改变URL的方式有几种3.3 特点四. `History` 模式4.1 相关API4.2 路由经过的流程4.3 特点五. 两种模式的区别一. 什么是前端路由前端路由实现起来其实很简单，本质就是监听 URL 的变化，然后匹配路由规则，显示相应的页面，并且无须刷新页面。二. 有几种模式Hash 模式History 模式三. Hash 模式3.1 相关APIlocation.href：返回完整的 U
2021-03-01 11:45:35
140
原创 处理v-html的潜在XSS风险
没有进行防止xss攻击的时候<p v-html="test"></p> export default { data () { return { test: `<a οnclick='alert("xss攻击")'>链接</a>` }}结果：js事件被执行，弹出弹框预期效果：杜绝这种情况，保留a标签，拦截onclick事件解决办法：使用一个xss的npm包来过滤xss攻击代码，给指令的value包上一层xss
2021-03-01 10:48:28
516
原创 reduce()方法总结
reduce()：接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（上一次回调的返回值），当前元素值，当前索引，原数组书写格式：arr.reduce(callback,[initialValue])callback:函数中包含四个参数- previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））- currentValue （数组中当前被处理的元素）- index （当
2021-02-26 11:25:41
520
1
原创 src 和 href 的区别
src是指向外部资源的位置，指向的内容会嵌入到文档中当前标签的所在的位置，在请求src资源是会将其指向的资源下载并应用到文档内，如js脚本，img图片，和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕。所以一般js脚本会放在底部而不是头部href是指向网络资源所在位置，用来建立和当前元素或文档之间的连接，当浏览器识别到它指向的文件时，就会并行下载资源，不会停止对当前文档的处理...
2021-02-24 21:26:03
126
原创 数组方法总结（最全）
文章目录一、什么是数组二、数组中的方法1. join()2. push()和pop()3. shift() 和 unshift()4. sort()5. reverse()6. concat()7. slice()8. splice()9. indexOf()和 lastIndexOf() （ES5新增）10. forEach() （ES5新增）11. map() （ES5新增）12. filter() （ES5新增）13. every() （ES5新增）14. some() （ES5新增）总结一、
2021-01-21 17:24:01
2534
原创 作用域、自由变量、作用域链
一、作用域1.1 什么是作用域：就是一段代码起作用的范围。我们可以这样理解：作用域就是一个独立的地盘，让变量不会外泄、暴露出去。也就是说作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。1.2 作用域有几类：全局作用域：最外层的作用域就是全局作用域函数作用域：通过函数来创建一个独立作用域称为函数作用域。函数可以嵌套，所有作用域也可以块级作用域（ES6新增）：大括号，比如：if{},for(){},while(){}… 他只适用于const let二、自由变
2021-01-20 22:00:54
172
原创 DOM---怎样添加、移除、移动、复制、创建和查找节点？
1）创建新节点createDocumentFragment() //创建一个DOM片段createElement() //创建一个具体的元素createTextNode() //创建一个文本节点2）添加、移除、替换、插入appendChild() //添加removeChild() //移除replaceChild() //替换insertBefore() //插入insertAfter() //3）查找getElementsByTagName() //通过标签名称getE
2021-01-19 21:58:56
507
原创 前端常见浏览器兼容性问题解决方案
不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎所以浏览器兼容性问题一般指：css兼容、js兼容浏览器内核IE浏览器Trident内核，也称IE内核Chrome浏览器Webkit内核，现在是Blink内核Firefox浏览器Gecko内核，俗称Firefox内核Safari浏览器Webkit内核Opera浏览器最初是自己的Presto内核，后来加入谷歌大军，从Webkit又
2021-01-19 21:42:16
429
原创 CSS Hack
一、什么是CSS Hack？不同的浏览器对CSS的解析结果是不同的，因此会导致相同的CSS输出的页面效果不同，这就需要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程，就叫CSS Hack。二、CSS Hack常见的三种形式：CSS属性Hack、CSS选择符HackIE条件注释HackHack主要针对IE浏览器1、 条件HackIE条件注释（Conditional comments）是IE浏览器私有的代码，在其它浏览器中被视为注释。是微软从IE5
2021-01-19 20:16:08
263
原创 五大浏览器背景介绍
1、IE浏览器：IE是微软公司旗下浏览器，是目国内用户量最多的浏览器。IE诞生于1994年，当时微软为了对抗市场份额占据将近百分之九十的网景Netscape Navigator，于是在Windows中开发了自己的浏览器Internet Explorer，自此也引发了第一次浏览器大战。结果可想而知，微软大获全胜，网景不得不将自己卖给AOL公司。但实际上事情并没有结束，网景后来开发了风靡一时的Firefox火狐，至今Firefox也成为世界五大浏览器之一。1996年，微软从Spyglass手里拿到Spygl
2021-01-19 17:04:39
529
原创 主流浏览器及内核
一、 主流浏览器1、IE浏览器（Internet explorer）现在的新版本是（Microsoft Edge）2、火狐浏览器（Firefox）3、谷歌浏览器（Chrome）4、苹果浏览器（Safari）5、欧朋浏览器（Opera）二、浏览器内核浏览器内核可以分成两部分： 渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。2.1 渲染引擎它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显
2021-01-19 16:59:26
275
原创 防抖函数和节流函数
不要问我为什么要防抖节流。问就是为了性能优化。减少性能消耗简单了解一下是什么防抖：定义：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。实现原理：函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清楚上一次的定时器，并设置另一个定时器，知道函数请求停止并超过时间间隔才会执行。使用场景：文本框输入搜索（连续输入时避免多次请求接口）节流：定义：规定在一个单位时
2021-01-14 22:02:26
194
原创 路由守卫-最全没有之一（亲测）
什么是路由守卫？路由守卫就是路由跳转的一些验证，比如登录鉴权（没有登录不能进入个人中心页）等等等路由守卫分为三大类：1. 全局守卫：前置守卫：beforeEach 后置钩子：afterEach2. 单个路由守卫：独享守卫：beforeEnter3. 组件内部守卫：beforeRouteEnter beforeRouteUpdate beforeRouteLeave所有的路由守卫都是三个参数：to： 要进入的目标路由（去哪儿）from： 要离开的路由（从哪来）next： 是否进行下一步（
2021-01-14 17:07:45
16866
1
原创 vue-quill-editor（富文本编辑）
不做解释代码保存仅此而已<template> <div> <Header></Header> <section> <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @focus="onEditorFocus($event)"
2021-01-12 11:54:31
412
1
原创 完整分页器最骚的讲解（亲测）
咱也不敢问，咱也不敢说。先来个图瞅瞅分页器是个什么鬼叭就目前来讲，这应该算是功能最全的分页器啦吧下面我们一步一步研究一下这玩意怎么玩叭啥也不说了，先去element-ui嫖代码吧哈哈哈 <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[
2021-01-11 21:36:24
1096
原创 vue接口api封装
话不多说直接上代码用这个页面做演示（elm后台管理项目）src / utils / core.js// 核心代码模块// 引入axiosimport axios from "axios";// 导入请求方式import METHODS from "./methods";// 导入loadingimport { Loading } from "element-ui";// 定义loadingvar loadingInstance;// 定义基础路径const BASEURL =
2021-01-09 21:59:55
780
原创 VUE 项目中实现 element-ui 组件按需引入
我们在项目中会需要到 element-ui 组件来布局，提高我们的工作效率，虽然全局引入非常方便，但是为了减小我们项目的体积，这里就要用到按需引用了，那么问题来了。按需引用我该怎么搞呢？？？当然啦，不论你要全局还是按需引入，第一步都是下载element-uinpm i element-ui -S1. 先来一下全局引入吧main.js// element-ui全局引入import ElementUI from "element-ui";import "element-ui/lib/theme-
2021-01-09 15:31:27
1061
2
原创 vue项目打包优化（亲测）
1. 我们为什么要进行打包优化呢？1、打包优化的目的1、优化项目启动速度，和性能2、必要的清理数据3、减少打包后的体积第一点是核心，第二点呢其实主要是清理console2、性能优化的主要方向1、去重.map文件2、开启CDN加速3、代码压缩4、图片压缩 （下方跳过）5、公共代码抽离6、首屏骨架屏优化7、开启Gzip压缩（下方跳过）2. 打包步骤详解代码演示：1. 去除.map文件在vue.config.js中添加 // 生产环境是否生成 sourceMap 文件 p
2021-01-09 14:37:21
2575
原创 多环境变量配置
package.json 里的 scripts 配置 serve stage build，通过 --mode xxx 来执行不同环境通过 npm run serve 启动本地 , 执行 development通过 npm run stage 打包测试 , 执行 staging通过 npm run build 打包正式 , 执行 production"scripts": { "serve": "vue-cli-service serve --open", "stage": "vue-cl
2021-01-08 22:01:53
146
原创 vue cli4=＞vue cli2桥接
vue cli4=>vue cli2桥接第一步：先安装最新版npm install -g @vue/cli第二步：在安装···npm install -g @vue/cli-service-global第三步：安装桥接插件npm install -g @vue/cli-init然后客官就可以启动项目啦。vue cli4 / vue cli3 启动命令相同：npm run servevue cli2 启动命令：npm run dev创建项目命令：vue cli4 / vue
2021-01-08 19:52:08
268
原创 自定义指令（拖拽）
directives: { go: { inserted(el) { //给el设置绝对定位 el.style.position = 'absolute' //给el添加鼠标按下的事件 el.onmousedown = function (event) { //用视口的位置减去相对于父元素的位置得到一个距离差 var sx = event.clientX - el.offsetLe..
2021-01-08 18:33:22
338
1
原创 vue双向数据绑定（话术版+代码演示）
1. 概念：（精简版）vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。拓展Object.defineProperty()：语法：Object.defineProperty(obj, prop, descriptor)参数：obj： 必需。目标对象；prop： 必需。需定义或修改的属性的名字；descriptor： 必需。目标属性所拥
2021-01-08 13:54:40
223
原创 vue 中移动端项目 之 图片上传（代码分享+话术总结）
话不多说先上代码：点击显示弹框<van-cell title="头像" is-link @click="avatarShow=true"></van-cell>显示弹框，再点击从手机相册选择 <!-- 头像弹出层 --> <van-action-sheet v-model="avatarShow" cancel-text="取消"> <p class="p"> <van-upload
2021-01-06 11:45:57
537
原创 vuex总结（完整版）（亲测）
1. 什么是vuex？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态它有五大核心： state、 mutations、 actions、 getters、 modules、（是单向数据流）话不多说直接上图：2. 五大核心功能讲解：state：存储数据mutations：唯一可以修改state数据的场所actions：进行异步操作getters：类似于vue组件中的计算属性，对state数据进行计算（会被缓存）modules：
2021-01-05 20:26:56
258
原创 史上最全XXX项目介绍（话术版）
项目背景面试官您好,我给您介绍⼀下最近我所在公司里做的项目。这个项目的名字叫x x x,这是一个 X X 样的项目(商城、金融、旅游、教育等)。这个项目用到的技术栈有·vue-cli4+vue2.5+vuex+vue-router+axios+vant-ui+sass+rem等。这个项目开发周期x个月。我去这家公司的时候公司项目刚起步，我去了之后主要是负责项目的xxx页面以及xx功能的开发. 我当时的这个项⽬小组,前端 就我一个人,后端3个人,产品和测试各1⼈人。项目所使用的技术vue-cli4+vu
2021-01-04 15:46:36
2541
1
原创 vue 中 vm 适配 - 最完美方案（亲测）
1. 安装依赖npm install postcss-px-to-viewport -D2. 在根目录下新建 .postcssrc.js 文件.postcssrc.js 文件修改如下：module.exports = { plugins: { autoprefixer: { overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'] }
2020-12-30 16:10:00
1595
1
原创 vue 中 rem 适配 - 最完美方案（亲测）
1. 安装：cnpm install lib-flexible postcss-plugin-px2rem --save-dev2. 配置rem：在main.js 文件中导入： import "lib-flexible/flexible";rem 就可以生效了，项目中我们正常写px会自动帮我们转换为rem3. 配置px—>rem:创建vue.config.js文件module.exports = { // rem适配 css: { loaderOptions: {
2020-12-30 15:19:25
3441
原创 小程序中使用 vant 详解（亲测）
一般来说小程序中有一些自带的组件是不能够完全满足我们的需求，那这个时候我们就想到了vant，那么问题来了，我们该如何在小程序中使用呢，下面就让我们来一步一步的进行操作一波先在小程序中打开终端，使用npm init -y命令初始化,生成package.json文件安装 vant 依赖npm i @vant/weapp -S --production点击右上角的详情，在本地配置中勾选使用npm模块...
2020-12-29 09:29:19
1464
1
原创 变量类型和计算
1. typeof 能判断哪些类型识别值类型2. 何时使用=何时使用字符串拼接==运算符if 语句和逻辑运算3. 值类型和应用类型的区别值类型举例常见值类型引用类型举例常见引用类型4. 手写深拷贝/** * 深拷贝 */const obj1 = { age: 20, name: 'xxx', address: { city: 'beijing' }, arr: ['a', 'b', 'c']}
2020-12-27 22:02:13
70
原创 class
class基本使用 class Student { constructor(name, number) { this.name = name this.number = number } sayHi() { console.log(`姓名${this.name}，学号${this.number}`) } } // 通过类声明实例 const laodeng = new Student("老邓", 111) console
2020-12-27 22:01:54
311
1
原创 原型与原型链（话术+代码演示）（亲测）
话术总结：获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__proto__上去找，如果还查不到，就去找原型的原型，一直找到最顶层(Object.prototype)为止。这个链条式关系就是原型链一张图来理解关系简单：复杂：...
2020-12-27 22:01:36
184
原创 类型判断 instanceof
// instanceof console.log([] instanceof Array) console.log([] instanceof Object) console.log({} instanceof Object)
2020-12-27 22:01:22
127
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人