自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(49)
  • 资源 (2)
  • 收藏
  • 关注

原创 vscode 实用插件

开发过程中用到的vscode插件。

2022-09-22 11:40:13 890

原创 windows系统下node包管理工具

首先卸载已安装的nodeJS下载 nvm-setup 安装包安装,傻瓜式安装(直接Next–next-=====)(不用改变安装目录,)注意:但是要记住nvm安装的路径打开nvm安装目录文件夹下的settings.txt文件,在最后添加以下代码:node_mirror: https://npm.taobao.org/mirrors/node/npm_mirror: https://npm.taobao.org/mirrors/npm/安装nodeJS 命令: nvm ins

2022-09-22 10:40:24 597

原创 fork别人的github代码,修改后做到同步

1.首先通过github的web页面fork目标的项目,前提示自己已经设置好了git,并且配置了相应的权限2.使用git clone命令在本地克隆自己fork的项目:git clone http://gihub.com/=====3.须要复制被自己fork的项目的git地址,切换到自己之前克隆的项目的路径下,使用:git remote -v,可以看到当前项目的远程仓库配置4.使用命令:git remote add upstream 原始仓库git地址5.如果你继续使git remote -v命令查看

2020-12-06 20:53:49 492 1

原创 在react项目中封装api接口

安装axios,qsnpm i axios qs -S封装为js文件1.chenHttp.jsimport axios from 'axios'import qs from 'qs'const HTTP = axios.create({ baseURL: "这里填的是接口前边的url", withCredentials: true, transformRequest:(data)=>{ return qs.stringify(data) }

2020-12-04 18:09:54 1557

原创 nodejs基础知识(入门)

NodeJS模块1.Commonjs规范主要是为了你不javascript没有标准的缺陷希望js能在任何地方运行对模块的定义模块引用–require()模块定义–就是一个js文件模块标识2.在node中,通过require()函数引入外部模块require()可以传递一个文件的路径为参数,node将自动根据路径来引入外部模块路径,必须使用相对路径,必须以.或…开头使用require()引入模块之后,该函数返回一个对象,这个对象代表的是引入的模块3.核心模块的标识就是,模块的名字

2020-11-08 20:07:06 331

原创 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] dev: `node build/dev-server.j

npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! [email protected] dev: `node build/dev-server.js wx`npm ERR! Exit status 1npm ERR!npm ERR! Failed at the [email protected] dev script.npm ERR! This is probably not a problem with npm. There is likely add

2020-11-02 15:36:10 1929

原创 前端(如:2019-05-01T16:00:00.000Z),转换为正常格式 vue中封装为过滤器

let time = '2019-05-01T16:00:00.000Z'; function renderTime(date) { var dateee = new Date(date).toJSON(); return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '') ..

2020-10-19 16:04:06 872 1

原创 vueX的介绍以及使用

vuex文章目录vuex1、为什么要用 vuex ?2、通信解决方案3、vuex 是什么?4、vuex 的工作流5、安装 vuex6、引入 vuex7、从 Store 开始7-1、创建一个 Store8、核心概念8-1、state8-1-1、state 的创建8-1-2、在组件中使用 store8-1-3、store 配置8-1-4、使用辅助函数 `mapState`8-1-5、使用扩展运算符组合9、getters9-1、getters 函数9-2、通过属性访问9-3、通过方法访问9-4、使用辅助函数 `

2020-10-18 18:53:41 179

原创 js获取页面元素位置的方法getBoundingClientRect()

作用getBoundingClientRect()是用来获取页面元素的位置的方法.这个方法最终返回的是一个矩形对象,包括四个属性:left,top,bottom,right四个属性top:元素上边到视窗上边的距离;right:元素右边到视窗左边的距离;bottom:元素下边到视窗上边的距离;left:元素左边到视窗左边的距离;width:边界矩形的宽度(ie9)height:边界矩形的高度(ie9)注意:当我提到元素的边界矩形的时候,返回的大小包含了任何padding和border值

2020-10-14 20:41:12 667

原创 Javascript无缝轮播源码

效果图代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } img { vertical-a

2020-10-11 19:17:06 120 1

原创 jquery个人总结

节点:元素节点 属性节点 文本节点dom 文档对象模型console.log(“听课”); 输出括号里的内容alert(“你好”) 弹出弹出框document.title 获取文档标题.toggleClass 添加删除类名$(".box").bind(“click”,function(){$(this).css(“background-color”,“yellow”) 事件绑定})<script src="script/jquery.js"&.

2020-10-11 19:08:49 345

原创 Javascript面向对象

1:什么是对象?a:对象就是由若干个键值对,无须组成的数据类型,被称之为对象。b:简单理解,提供了特有的方法和属性就是对象!c:“对象”是一个容器,封装了“属性”(property)和“方法”(method)。举例:var o={name:‘tom’,age:12,fun:function(){alert(1)}}2:键值对?花括号里面冒号前被称之为键,冒号后被称之为值,通过键获取值。3:什么是面向对象?面向对象是一种编程思想,通过这种思想来完成代码的编程。(oop==Obje

2020-10-11 18:55:09 88

原创 前端交互的各种事件

1:什么是事件?人与机的交互就是事件。2:事件类型:ui事件*onscroll 滚动条事件onload 页面加载触发unload 页面关闭触发onselect 选中文本时触发onresize 改变浏览器窗口触发onabort 图像加载被中断触发error 错误信息时触发*onchange 当改变一个元素的值且失去焦点时焦点事件*onfocus 获得焦点事件(没有冒泡,浏览器都支持)*onblur 失去焦点事件(

2020-10-11 18:52:33 581

原创 this的多种情况指向问题?

1:this是什么?this是一个关键字,他的作用具有指向性。2:this的指向分类?a:在事件函数中,this指向事件前对象。 b:在普通函数中,谁调用这个函数,this就指向谁。c:在apply()和call()方法中this指向方法中的对象(如下,指向obj)举例: var x=2; var obj={ x:4 } function fn(){ alert(this.x);//2 } fn(); fn.call(obj)d:在箭头函数中this指

2020-10-11 18:46:06 116

原创 购物车放大镜效果(模拟jd的商品页面)

效果代码:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; } .zhuti { width: 1262px; he

2020-10-11 18:37:40 365

原创 vue插槽的使用?怎么改变头部内容?

什么是插槽?插槽就是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签。怎么改变移动端项目的头部?单独写一个组件header.vue内容如下:<template> <div> //如下头部分为三部分=左=中=右然后写好全局样式 <div class="header"> <div class="h-left"> &lt

2020-10-11 18:27:25 347 1

原创 vue中使用npm 命令安装的nprogress以及如何修改颜色/位置

1.安装npm install --save nprogress或者yarn add nprogress2.使用在router.js中//导入import NProgress from 'nprogress'import 'nprogress/nprogress.css'//在路由守卫中可以直接使用使用下边的四个方法3.方法NProgress.start() — 开始出现进度条NProgress.set(0.4) — 设置百分比NProgress.inc() — 递增NP

2020-10-07 09:03:46 2542 2

原创 vue过渡<transtion></transtion>与列表过渡<transtion-group></transtion-group>

1.vue过渡组件Vue 在插入、更新或者移除 DOM 时,使用内置的过渡封装组件可以实现过渡效果语法格式: <transition name="xx"> </div></transition>2.过渡的类名在进入/离开的过渡中,会有 6 个 class 切换:v-enter:进入过渡的开始状态v-enter-active:进入过渡生效时的状态v-enter-to:进入过渡的结束状态v-leave:离开过渡的开始状态v-leave-acti

2020-10-06 20:37:58 319

原创 使用npm 安装依赖包cmd报错npm ERR! code ERR_TLS_CERT_ALTNAME_INVALID npm ERR! errno ERR_TLS_CERT_ALTNAME_INVAL

报错npm ERR! code ERR_TLS_CERT_ALTNAME_INVALID npm ERR! errno ERR_TLS_CERT_ALTNAME_INVALID npm ERR! request to https://registry.cnpmjs.org/nprogress failed, reason: Hostname/IP does not match certificate's altnames: Host: registry.cnpmjs.org. is not in t

2020-10-05 14:30:02 291

原创 ES6知识点

ES6常用知识点1.let 和constlet和const声明的变量都不具备变量提升let的声明方式与 var 相同,用 let 来代替 var 来声明变量,就可以把变量限制在当前代码块中。使用 const 声明的是常量,其值一旦被设定便不可被更改。2.模板字符串使用双 `` 包裹let name='西楠';//字符串双引号let result=`我用的是模板字符串,我的名字叫${name}`;console.log(result)模板字符串中可以调用函数,变量,``3.解构赋

2020-10-04 18:54:39 132

原创 前端Javascript(js)-------dom笔记知识点`

简介通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。什么是HTML DOM(文档对象模型)?当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)1.改变HTML内容innerHTML<html><body><p id="p1">Hello World!</p><script>document.getElementById("p1").innerHTM

2020-10-04 14:30:58 92

原创 封装addEventListener浏览器兼容代码

/* * 参数: * obj:要绑定事件的对象 * eventStr:事件(注意:这里不要on) * callback:回调函数 */function bind(obj , eventStr , callback){ if(obj.addEventListener){ //大部分浏览器 obj.addEventListener(eventStr , callback , false); }else{ //I

2020-10-04 14:03:13 114

原创 学习Javascript笔记(2)

1.变量命名规则变量必须以字母开头变量也能以 $ 和 _ 符号开头(不推荐)变量名称对大小写敏感(y 和 Y 是不同的变量)2.数据类型1.值类型(基本类型):字符串(String)数字(Number)布尔(Boolean)对空(Null)未定义(Undefined)Symbol。值类型(基本类型):对象(Object)数组(Array)函数(Function)3.作用域在 JavaScript 中, 对象和函数同样也是变量。在 JavaScript 中,

2020-10-04 13:33:16 76

原创 判断js(Javascript)中变量的数据类型几种方式

typeOf()来获取JavaScript中变量的数据类型.但是这种方法不能判断是Array还是Object使用isArray方法判断是不是数组var cars=new Array();cars[0]="Saab";cars[1]="Volvo";cars[2]="BMW";// 判断是否支持该方法if (Array.isArray) { if(Array.isArray(cars)) { document.write("该对象是一个数组。") ; }}.

2020-10-04 12:46:03 153

原创 学习Javascript笔记(1)

Javascript一.简介二.Javascript用法三.使用`Javascript`注意四.输出方式一.简介Javascript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 是脚本语言JavaScript 是一种轻量级的编程语言。JavaScript是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。二.Javascript用法

2020-10-04 12:39:21 204

原创 移动端去除a标签默认点击高亮

a { text-decoration: none; -webkit-tap-highlight-color: transparent;}

2020-10-02 19:09:47 826

原创 纯css旋转相册(源码)

效果图:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body{ animation:play 20s linear 0s infinite alternate; } .box{ width: 200px; height: 300px;

2020-09-28 16:39:24 695

原创 前端js-------(数学Math()对象常用方法)

abs(X)返回X的绝对值random()返回0~1之间的随机数Math.random()*(y-x)+x随机生成x~y之间的随机数Math.random()*20随机生成0~20之间的数round()四舍五入ceil(x)向上取整floor(x)向下取整max(arr)返回数组中的最大数min(arr)返回数组中的最小数pow(x,y)返回,x的y次幂...

2020-09-28 14:29:39 240

原创 vue开发者模式Vue调试工具(浏览器为vue专门提供的扩展插件)vue-devTools

下载地址:vue-devTools安装步骤首先进入浏览器设置,点击扩展程序打开开发者模式点击加载以解压的扩展程序直接选择下载成功的文件夹加载成功后选择右下角开启是否安装成功通过npm run serve启动项目如果看到浏览器右上角的vue插件图片则成功安装,就可以使用了...

2020-09-28 10:39:02 1191

原创 vscodepx转rem插件(适用)

1111111

2020-09-28 08:36:32 701

原创 vue项目移动端适配(flexible.js)

想要达到页面的自适应通过rem+淘宝的flexible.js第一步(cmd)输入命令npm install lib-flexible --save第二步(在main.js中引入lib-filexible)import 'lib-flexible/flexible.js'第三步(在项目根目录注释掉如下标签)<meta name="viewport" content="width=device-width, initial-scale=1.0">因为安装flexible会自动生

2020-09-28 08:32:58 787

原创 vue生命周期+钩子函数+各个钩子函数的作用

1.什么是vue生命周期?每个Vue实例再被创建之前都要经过一系列的初始化过程,这个过程就是Vue的生命周期。2.各个钩子函数之间的生命周期干的事在beforeCreate和create钩子函数之间的生命周期在这个生命周期之间,进行初始化,可以看到created的时候数据已经和data属性进行绑定(放在data中的属性值发生改变的同时,视图也会改变)此时还没有el选项created和beforeMount间的生命周期首先会判断对象是否有el选项,如果有的话就继续向下编译,如果没有el选

2020-09-27 22:56:48 1245

原创 vue路由跳转后高亮问题|active class(激活状态)linkActiveClass 和 linkExactActiveClass以及exact

linkActiveClass 是模糊匹配linkExactActiveClass 是精准匹配exact也是精准的意思问题看下边图片:当css样式为#nav a.router-link-exact-active { color: #42b983; }时,如果下边没有子路由不会有什么问题,但是如果有子集路由的话,当你点击小说下边的子集路由小说就不会高亮图片如下:解决这个问题只需要改变css为#nav a.router-link-active { color: #42b983; }对比初始的

2020-09-27 21:53:24 3483

原创 纯css太极动画(源码)

<html> <head> <title>过渡</title> <meta charset="utf-8"/> <style type="text/css"> body{ margin:0; background-color:#ddd; } .taiji{ display:flex; align-items:center; height:400px; wi

2020-09-26 21:31:21 281

原创 vue项目解决跨域问题(通过服务器代理)

使用的是服务器代理方式解决跨域第一步在vue项目根目录中创建文件夹vue.config.js文件(根目录就是项目名称目录就是根目录,直接在项目名称上右击创建文件)注意:文件名是固定的vue.config.js第二步打开文件vue.config.js写入如下代码:module.exports = {//搭建服务器 devServer: { //代理 proxy: { //代理名称 '/api': {

2020-09-26 13:18:19 1914 4

原创 前端js-------(字符串String()对象常用方法)

length获取字符串长度用法:str.length;charAt()

2020-09-23 19:48:17 418

原创 js获取个屏幕鼠标盒子的距离(e.clientX,e.offsetX,e.pageX,e.screenX)

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box{ width: 200px; height: 200px; border: 1px solid red.

2020-09-23 09:02:11 589

原创 前端JS-------(时间Date()对象常用方法)

1.创建对象var d=new Date()2.方法getDate()获取当前日期对象是几日

2020-09-22 20:17:41 365

原创 前端JS-------(数组Array()对象常用方法)

push()像数组的末尾添加一个或读个元素,并返回数组新长度用法:arr.push(“西楠”);pop()删除数组的最后一个元素用法:arr.pop();//删除最后一个unshift()向数组前边添加一个或多个元素,并返回新数组长度用法:arr.unshift(“西”,“楠”);//添加多个shift()删除数组的第一个元素,并返回被删除的元素用法:arr.shift();//删除第一个元素forEach()遍历参数为一个回调函数用法:arr.forEach..

2020-09-22 20:12:47 149

原创 弹性盒子(display:flex)

1.属性flex-direction:指定了弹性容器中子元素的排列顺序属性值:row;(默认值) 水平显示,一行排列row-reverse;与row排列顺序相反column;垂直显示一列显示column-reverse;与column排列顺序相反initial;设置该属性为它的默认值inherit;从福原色继承该属性2.属性justify-content:设置弹性盒子元素在主轴(横)方向上的对齐方式属性值:flex-start(默认) 项目位于容器开头flex-end项目位于容器

2020-09-22 08:50:58 478

旋转相册images

旋转相册图片文件夹

2020-09-28

vue-devtools扩展

免费下载直接点击下载免费下载直接点击下载免费下载直接点击下载免费下载直接点击下载免费下载直接点击下载免费下载直接点击下载免费下载直接点击下载免费下载直接点击下载免费下载直接点击下载

2020-09-28

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除