自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(63)
  • 收藏
  • 关注

原创 vue登录态管理=+路由守卫+封装 Axios+Vuex

1.理由配置路由的配置path时;在需要守卫的path加上meta属性;{ path: '/home', component: home, meta:{requireAuth:true}}在路由配置文件中加上//路由配置文件import Vue from 'vue';import VueRouter from 'vue-router';import routes from './routes';//使用VueRouter插件Vue.use(Vue...

2022-04-08 07:42:14 3099

原创 vue keep-alive 中的生命周期

keep-alive是 Vue 提供的一个内置组件,用来对组件进行缓存——在组件切换过程中将状态保留在内存中,防止重复渲染DOM。如果为一个组件包裹了 keep-alive,那么它会多出两个生命周期:deactivated、activated。同时,beforeDestroy 和 destroyed 就不会再被触发了,因为组件不会被真正销毁。当组件被换掉时,会被缓存到内存中、触发 deactivated 生命周期;当组件被切回来时,再去缓存里找这个组件、触发 activated钩子函数。.

2022-09-11 15:12:45 2160

原创 Vue几种监听路由变化的方式

Vue几种监听路由变化的方式2.通过钩子函数 beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave

2022-06-12 23:46:20 11719

原创 vue 监听页面卷去的高度,获取元素离页面顶部的距离

获取元素离页面顶部的距离补充 document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 网页可见区域宽: document.body.clientWidth 网页可见区域高: docu

2022-06-10 16:24:54 2776

原创 js小数计算精度丢失,生产中应用方案

在生产环境中,开发时写的;1.js处理精度丢失问现成解决方法/** * 处理小数运算精度丢失问题 * a: number * b: number * type: string 加,减,乘,除 add, sub, multiply , division * @returns */export function decimalOperation(a, b, type) { const changeA = a.toString().split('.') con.

2022-05-26 15:45:47 186

原创 Vue3快速上手,Vue3全解

vue3快速上手,vue3全解;

2022-05-01 16:25:57 3900 2

原创 JavaScript中,数组常用的API

1.修改原数组的API1.1.pop():弹出数组中最后一个元素,并返回这个元素let arr = [1,2,3,4,5,6]let result = arr.pop()console.log(arr) // [1, 2, 3, 4, 5]console.log(result) // 61.2.push():添加一个或多个元素到数组末尾,并返回新的长度let arr = [1,2,3,4,5,6]arr.push(7,8)console.log(arr) // [1, 2, .

2022-04-23 00:05:48 1442

原创 JavaScript中,字符串处理(String对象)合集,附代码

1.字符串操作 let a = 'HelloWorld'; let b = 'World' //1.concat() 连接两个或多个字符串 // +左右可以为null,concat为会空指针。 let c = a.concat(b); //输出结果:HelloWorldWorld let c = a + b; //HelloWorldWorld//2. replace():字符串替换或正则匹配替换 ..

2022-04-22 22:29:54 932

原创 CentOS 部署前端项目,Nginx反向代理,搭建node服务

2022-04-21 23:43:22 2647

原创 前端优化 - 提高 Web 性能的 9 个技巧

这篇文章将介绍您可以用来帮助改进前端优化的有用技术。通过专注于干净的代码、压缩图像、最小化外部请求、实施 CDN 和其他一些方法,您可以显着提高网站的速度和整体性能。1.清理HTML文档HTML 或超文本标记语言是几乎每个网站的支柱。HTML 允许您使用标题、副标题、列表和其他有用的文本组织功能来格式化网页。借助 HTML5 的最新更新,您还可以create有吸引力的图形。网络爬虫可以轻松读取 HTML,因此搜索引擎可以使用您网站的更新content及时。在处理 HTML 时,您应该努力以简洁.

2022-04-18 14:33:46 1453

原创 优雅的二次封装Element-UI

1.创建vue项目vue create appname2.借助babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。npm install babel-plugin-component -D3.在 main.js 中写入以下内容:import Vue from 'vue';import { Button, Select } from 'element-ui';import App from './App.vue';Vue.com.

2022-04-16 18:23:07 239

原创 webpack配置与优化

1.认识配置项1.1.入口(entry)入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。每个依赖项随即被处理,最后输出到称之为 bundles 的文件中,我们将在下一章节详细讨论这个过程。可以通过在webpack 配置中配置entry属性,来指定一个入口起点(或多个入口起点)。默认值为./src。接下来我们看一个 e...

2022-04-14 03:19:36 150

原创 Vue中 $nextTick 原理及作用

Vue 的 nextTick 其本质是对 JavaScript 执行原理 EventLoop 的一种应用。我们可以理解成,Vue在更新DOM时是异步执行的。当数据发生变化,Vue将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后,再统一进行更新nextTick 的核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout的原生 JavaScript 方法来模拟对应的微/宏任务的实现,本质是为了利用 JavaScript 的这些异...

2022-04-13 03:59:10 8493

原创 js中的defineProperty()方法

defineProperty()定义对象中新属性或者修改原有的属性;Object.defineProperty(obj,prop,descriptor)defineProperty()方法需要传三个参数:obj:必须,目标对象; prop:必须;需要定义或修改的属性名字; descriptor:必须;目标属性所拥有的特性;第三个参数——>descriptor,说明,需要写成对象形式:value:设置属性值,默认undefined; writable:是否可以重写,...

2022-04-12 04:00:20 682

原创 JS 中 this 指向,call()、apply()、bind()

1. 箭头函数箭头函数 this 不会被改变,所以只要当前函数是箭头函数,那么就不用再看其他规则了。箭头函数的 this 是在创建它时外层 this 的指向。这里的重点有两个:创建箭头函数时,就已经确定了它的 this 指向。 箭头函数内的 this 指向外层的 this。箭头函数是不绑定this的,它的this来源于上级作用域var user = { name: 'kiki', foo: () => { console.log('箭头函数中的this',th..

2022-04-12 01:31:36 182

原创 promise详解,及使用

1.介绍Promise是异步编程的一种解决方案,有两个特点:(1)对象的状态不受外界影响;(2)状态一旦改变是不可逆的,一旦Promise 被 resolve 或 reject,不能再迁移至其他任何状态。Promise有三种状态:(1)Pending :进行中;(2) Resolved :已完成;(3)Rejected :已失败。Promise从Pending状态开始,如果成功就转到成功态,并执行resolve回调函数;如果失败就转到失败状态并执行reject回调函数。

2022-04-11 01:38:39 120

原创 CSS中可继承与不可继承属性有哪些

1. 无继承性的属性 display:规定元素应该生成的框的类型 文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shadow:文本阴影效果 white-space:空白符的处理 unicode-bidi:设置文本的方向盒子模型的属性:width、height、margin、border、padding 背景属性:background、background-color、background-image

2022-04-09 19:54:29 1392

原创 vue路由懒加载--2种实现方式

(1)vue异步组件-路由懒加载 component:resolve=>(['需要加载的路由的地址',resolve])(2)import 实现路由懒加载 [推荐]const HelloWorld = ()=>import('需要加载的模块地址')1.路由懒加载作用:首屏组件加载速度更快一些,解决白屏问题;更好的客户体验;也是性能优化的一种方式;什么是路由懒加载?懒加载简单来说就是延迟加载或按需加载,就是用到的时候再进行加载。2.使用-详情- ...

2022-04-07 04:22:31 1339

原创 JavaScript 异步编程

1.异步的概念在我们学习的传统单线程编程中,程序的运行是同步的(同步不意味着所有步骤同时运行,而是指步骤在一个控制流序列中按顺序执行)。而异步的概念则是不保证同步的概念,也就是说,一个异步过程的执行将不再与原有的序列有顺序关系。简单来理解就是:同步按你的代码顺序执行,异步不按照代码顺序执行,异步的执行效率更高。以上是关于异步的概念的解释,接下来我们通俗地解释一下异步:异步就是从主线程发射一个子线程来完成任务。...

2022-04-06 00:02:33 570

原创 vue 全局事件总线详解 $bus-任意组件间通信

全局事件总线(GlobalEventBus)是一种组件间通信方式,适用于任意组件间通信1.安装全局事件总线main.js入口文件配置 new Vue({ beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线, //在开发中习惯取名为:$bus,可以自由命名 }, }).$mount('#app') 2.使用事件总线以B组件给A组件传值为例;(B —> .

2022-04-05 23:52:33 866

原创 vue监听屏幕尺寸变化,window.onresize很简单

>> 可在任意组件中使用;1.在data中定义一个变量,用于记录屏幕尺寸;data(){ return{ screenWidth: null, }}且做好定义为 null2.使用window.onresize方法获取屏幕尺寸; mounted() { this.screenWidth = document.body.clientWidth window.onresize = () => { ...

2022-04-05 19:02:26 7278 3

原创 Vue 项目cli打包上线后,路径错误,解决办法

报的错:Uncaught SyntaxError: Unexpected token '<' (at chunk-vendors.5ea7a1b2.js:1:1)Uncaught SyntaxError: Unexpected token '<' (at app.5e29bd6c.js:1:1)Vue 项目,用vue-cli打包上线后,播以上错误,打开打包后的index.html文件看。发现是路径问题,所有的文件都没有引入的index.html中解决办法:在vue.

2022-04-05 08:02:51 1902 1

原创 vue路由跳转 定位到页面顶部

Vue-router 路由跳转之后,页面默认停留在当前浏览的位置,想要的是路由跳转之后,页面重新定位到顶部,1.下面介绍一下可以实现的方法:在理由配置文件中,添加以下代码即可import Vue from 'vue'import VueRouter from 'vue-router'import routes from './routes'Vue.use(VueRouter);let router = new VueRouter({ routes});//要添加的代

2022-04-05 07:51:11 2699 6

原创 【vue报错】vue.runtime.esm.js?2b0e:1897 TypeError: Cannot read properties of undefined (reading ‘0‘)

Error in mounted hook: "TypeError: Cannot read properties of undefined (reading '0')"vue.runtime.esm.js?2b0e:1897 TypeError: Cannot read properties of undefined (reading '0')原因:创建DOM元素遍历依赖的 props 数据,而计算过程在挂载完毕之后;需要将计算过程放到 正确 的生命周期钩子;...

2022-04-04 16:57:57 5513

原创 vue v-for 遍历不能正常显示的问题,

data() { return { imgList:[ { imgUrl:'../assets/img/a.png', imgLink:'', type:'' }, { imgUrl:'../assets/img/b.png', imgLink:'', type:'' }, { ...

2022-04-04 01:51:54 1718

原创 CSS去除默认样式,写页面前的准备工作

前端写页面时,诸多标签的默认样式是不需要的;每用一次都要写的话,第一,耗时,徒劳,第二,代码重复;so,可以在开始前,统一去除出默认样式,如下:/* 初始化 css文件*/body { margin: 0; padding: 0; background-color: #f4f4f4; font-family: 12px/1.5 "Microsoft YaHei",Heiti SC,tahoma,arial,"Hiragino Sans GB"

2022-04-03 05:28:50 58

原创 less快速上手,使用详解

1.引入 js 文件<!DOCTYPE html><html lang="en"><head> ...</head><body> <div id="wrap"> <div class="inner">AAA</div> </div> <!-- 引入js文文件 --> <script src="//cd...

2022-04-02 01:09:33 71

原创 原生AjAX使用需求,代码详解

1.GET请求 //1. 创建AJAX对象 const xhr = new XMLHttpRequest(); //2. 设置请求方法和url xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&C=300&=300'); //3. 发送 xhr.send(); //4. 事件绑定 处理服务端返回的结果 /

2022-04-01 12:54:34 144

原创 HTTP响应码,大详解

1.HTTP的正确响应码一、1XX (1开头)请求已经被接收到了,需要进一步处理才能完成,HTTP1.0不支持;100 Continue 上传大文件前先让服务器准备,由客户端发起请求中携带Except:100-continue 头部触发 101 Switch Protocols协议升级使用,由客户端发起的请求中携带Upgrade头部,如升级WebSocket/http2.0 102 Processing WebDev请求可能包含许多涉及文件操作的子请求,等待很长时间才能完...

2022-04-01 12:39:48 2064

原创 Vue路由传参 详解(params | query 的区别)

params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显示在地址栏中(但是不能刷新)。params 只能配合 name 使用,如果提供了 path,params 会失效。query 传参类似于网络请求中的 get 请求,query 传过去的参数会拼接在地址栏中(?name=xx)。query 较为灵活既可以配合 path 使用,也能配合 name 使用(亲测可用)。//路由规则配置 const routes = [...

2022-03-31 02:18:02 773

原创 promise异步编程 详解

1.基本概念promise是对异步编程的一种抽象。它是一个代理对象,代表一个必须进行异步处理的函数返回的值或抛出的异常。也就是说promise对象代表了一个异步操作,可以将异步对象和回调函数脱离开来,通过then方法在这个异步操作上面绑定回调函数。状态promise有3种状态:pending(待解决,这也是初始化状态),fulfilled(完成),rejected(拒绝)。接口promise唯一接口then方法,它需要2个参数,分别是resolve和rej...

2022-03-30 11:09:56 1491

原创 MVVM、MVC、MVP的区别

MVC、MVP 和 MVVM 是三种常见的软件架构设计模式,主要通过分离关注点的方式来组织代码结构,优化开发效率。在开发单页面应用时,往往一个路由页面对应了一个脚本文件,所有的页面逻辑都在一个脚本文件里。页面的渲染、数据的获取,对用户事件的响应所有的应用逻辑都混合在一起,这样在开发简单项目时,可能看不出什么问题,如果项目变得复杂,那么整个文件就会变得冗长、混乱,这样对项目开发和后期的项目维护是非常不利的。1.MVCMVC 通过分离 Model、View 和 Controller 的方式来组织

2022-03-30 00:38:22 444

原创 webpack html-webpack-plugin插件 配置代码详解 即用

1.安装插件npm install html-webpack-plugin --save-dev2.在webpack.config.js中位置如下:const HtmlWebpackPlugin = require("html-webpack-plugin"); //引入插件//配置如下module.exports = { plugins: [ new htmlWebpackPlugin({ title: "this is title"

2022-03-29 01:50:03 197

原创 vant UI 使用,按需引入

vant-uI官方文档1.安装npm i vite-plugin-style-import@1.4.1 -D //npm安装yarn add vite-plugin-style-import@1.4.1 -D //yarn 安装2. 配置插件//在 vite.config.js 文件中配置插件:import vue from '@vitejs/plugin-vue';import styleImport, { VantResolve } fro..

2022-03-28 03:16:24 6036

原创 【路由】Vue route 入门 到 全解

Vue 的单页面应用是基于路由+组件的形式,路由用于设定访问路径,并将路径与组件映射起来。这种形式相对于 a标签超链来说不会重新加载页面,而是在同一个页面中进行路由跳转。1.安装//npmnpm install vue-router@4先简单感受一下:<script src="https://unpkg.com/vue@3"></script><script src="https://unpkg.com/vue-router@4"&g...

2022-03-27 02:10:12 88 1

原创 XMLHttpRequest 对象,GET,POST,jquery发送请求

1.什么是 XMLHttpRequest 对象?XMLHttpRequest 对象用于在后台与服务器交换数据。XMLHttpRequest 对象是开发者的梦想,因为您能够:在不重新加载页面的情况下更新网页 在页面已加载后从服务器请求数据 在页面已加载后从服务器接收数据 在后台向服务器发送数据2.使用 2.1.GET请求//1. 创建AJAX对象 const xhr = new XMLHttpRequest(); //2. 设置请求方...

2022-03-26 23:21:34 139

原创 axios的使用 ( vue.js Ajax )

1.安装方法:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>or<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>$ npm install axiosor$ yarn add axios2.GET 方法 axios.get('https...

2022-03-26 22:56:54 136 1

原创 var 、let 和 const 的区别

var 声明的范围是函数作用域,let 和 const 声明的范围是块作用域 var 声明的变量会被提升到函数作用域的顶部,let 和 const 声明的变量不存在提升,且具有暂时性死区特征 var 允许在同一个作用域中重复声明同一个变量,let 和 const 不允许 在全局作用域中使用 var 声明的变量会成为 window 对象的属性,let 和 const 声明的变量则不会 const 的行为与 let 基本相同,唯一 一个重要的区别是,使用 const ..

2022-03-26 21:23:58 11631 2

原创 Vue组件间相互传值,组件通信,

1.父组件 传值给 子组件1.1.props父组件通过属性的方式向子组件传值,子组件通过 props 来接收。// 父组件<user-detail :name="name" /> <!--通过属性 :myName="name" 传值--> export default { components: { UserDetail } ......}在子组件中使用props(可以是数组...

2022-03-26 04:21:20 963

原创 【Vue插槽】 slot用法,使用场景

匿名插槽,具名插槽,作用域插槽插槽,slot用法,使用场景

2022-03-26 00:03:24 3243

空空如也

空空如也

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

TA关注的人

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