自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 最近的面试总结

1.flex布局实现骰子六面2. 如何判断一个对象obj是空对象1. JSON.stringify(obj) === '{}'2. Object.keys(obj).length === 03. Object.values(obj).length === 03. 深拷贝和浅拷贝4. JSON.parse(JSON.stringify(obj)的缺点5. 如何检测数据类型(引用数据类型)6. instanceof 和 constructor缺点7. let 全局定义 是什么?8. ca

2021-09-14 16:22:03 34

原创 Vue.use统一全局注册组件

组件如果在所有页面都要用, 那么就要全局注册组件。如果有很多个组件, 都要全局注册, 那么又会在main.js 中写很多内容import PageTools from '@/components/PageTools'Vue.component('PageTools', PageTools)在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法:提供统一注册的入口文件 src/componets/index.js在同一目录下建立index.j

2021-06-04 14:32:56 32

原创 vue实现进度条倒计时(vant-ui)

van-count-down + van-progress 实现进度条倒计时效果<!-- van-count-down: time 属性表示倒计时总时长,单位为毫秒 --><!-- van-progress 使用 percentage 属性来设置当前进度百分比 --><van-count-down use-slot ref="countDown" :time="time * 1000" @change="onTimeChange"> <van-progre

2020-10-10 10:14:27 1384

原创 什么防抖与节流,它们的区别是什么?应用什么场景如何实现

函数防抖(debounce)和 函数节流(throttle)都是为了限制函数的执行频次,来优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象(例如input,keyup,keydown,scroll,resize,mousemove等)函数防抖:触发完事件 n 秒内不再触发,才执行;如果n秒内事件再次被触发,则重新计算时间应用场景:用户在输入框中连续输入一串字符后,只会在输入完后去执行最后一次的查询ajax请求,这样可以有效减少请求次数,节约请求资源window的res

2020-08-28 10:56:57 406

原创 Vue自定义Loading组件

在写组件之前我们要先弄懂install、vue.use、extend、$mount()、mixin的作用install:实际上就是注册组件,触发 install 方法vue.use:触发 install方法,这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的参数对象(可选)extend:创建构造器,vue 组件中有些需要将一些元素挂载到元素上,这个时候 extend 就起到作用了,是构造一个组件的语法器$mount:创建的构造器可以通过$mount挂载到元素上,挂载到元素上,opti.

2020-08-27 16:27:49 321

原创 Vue实现 侧边固定定位图标 滑动隐藏

移动端页面,有时候会出现一些固定定位在底部图标,比如领取购物券 联系客服等。这时候如果滑动页面,图标透明度变低,同时移动到屏幕侧边进行隐藏,效果如下。监听滑动事件,每次滑动时,触发动画。添加定时器,1s后显示该图标<template> <div class="concat-common" :class="[ !transition ? 'fixed-transition' : '']"> <div class="coupon" @click="getCoup

2020-08-12 10:06:29 748 2

原创 记录一次闭包解决的问题

场景:vue-awesome-swiper的点击事件中既要访问swiper的实例也要访问vue的实例(此时this只能访问到swiper的是对象)解决方案: 利用闭包把vue的实例this当做参数传入点击事件参数swiperOptionPicLunbo: { pagination: { el: '.swiper-pagination', clickable: true }, touchMoveStopPropagation: true, loop: true,

2020-08-05 16:49:00 56

原创 vue 商品列表滑入视频时自动播放

<!-- 由于商品到色,痛一块商品id存在相同情况 这里需要商品id和颜色一起判断 --> <!-- 每个商品传入自定义属性 id和颜色,给视频的元素传入 'hasVideo' 类名 --> <div class="good_list_item slide1" ref="goodListItem" :class="{hasVideo: good.showType == 'video'}" :

2020-07-03 10:35:06 566

原创 vue keep-alive缓存下 video src改变 页面不刷新

video 的 src值改变了,但是页面视图视频未更新解决方案:video的src不要绑定在source标签的src上,而是直接绑定video标签的src属性上

2020-06-03 18:03:15 382

原创 vueCli 查看打包后文件的大小占比

在package.json文件中 在 build 后面加上一个 --report "build": "vue-cli-service build --report"我们打开文件之后 就会看到一个可视化的 文件占比

2020-04-28 15:27:22 5063

原创 Vue单页面首屏加载优化

Vue-Router路由懒加载require方式{ path: '/goods', name: 'goods', component: resolve => require(['@/components/page/goods/Goods.vue'], resolve), meta: { title: '商品管理' }}ES...

2020-04-28 14:49:42 215

原创 vue 如何在父组件中在接收子组件参数的同时添加自定义参数

方法一:子组件传出单个参数时// 子组件this.$emit('fn',param)// 父组件@fn='fn($event,param1,param2)'方法二:子组件传出多个参数时// 子组件this.$emit('fn',param1,param2,param3)// 父组件@fn='fn(arguments,param)'...

2020-04-22 14:20:08 398

原创 正则常用方法test,match,search,replace

1. test()方法使用方法: Reg.test(str) 找到返回true,否则false 找到第一个后就会停止向后找let str = 'abcdefg'let reg = /b/console.log(Reg.test(str)) =>true2. match()方法str.match(Reg) 不匹配返回null ,匹配到就返回对应的数组let str ...

2020-03-17 15:43:33 426

原创 vue 物流时间轴

son组件<template> <div class="steps-wrap"> <ul> <li v-for="(item,index) in steps" :key="index"> <span class="time">{{item.time}}</span> &...

2020-03-12 17:31:13 1253

原创 前端攻城狮面试题总结

1. px、rem 和 em的区别?- em是相对于父元素的font-size的大小,一单位的em的值根据父元素font-size的改变而改变- rem是相对于根元素( html )的font-size的大小盒子模型所有的页面的元素都可以看成是一个盒子,占据一定的页面空间。盒子模型是由内容、边框、内边距间隙(padding)、外边距(margin)组成。- 标准盒模型:width =...

2020-03-11 17:53:30 4335

原创 js如何实现一个深拷贝和浅拷贝

基本数据类型和引用数据类型的区别基本数据类型 Number、String、Boolean、Null、 Undefined、Symbol(ES6) 特点: 数据存放在栈内存中,复制的时候是值传递引用数据类型Object(Array,Date,RegExp,Function)特点: 存储的是该对象在栈中引用深拷贝和浅拷贝的区别深拷贝深拷贝复制变量值,对于引用数据,则递归至基本类...

2020-03-09 16:42:54 107

原创 小程序分享(好友和海报)功能

点击分享按钮展示分享的弹框内容<!-- 分享 --> <view class="share-modal" wx:if="{{isShare}}" catchtouchmove="true"> <view class='close_mask' bindtap="closeMask">×</view> <view wx:if=...

2020-03-02 11:14:30 468

原创 vue 自定义组件使用v-model(组件通讯)

父组件:子组件:给组件使用v-model等价于 1. 给组件传递了一个value属性 2. 给组件绑定了input事件

2020-02-16 16:49:49 72

原创 vue+axios 请求封装

import axios from 'axios'import router from '../router/index'import { Message } from 'element-ui'import {  showFullScreenL...

2020-01-13 13:58:29 114

原创 vueC-cli3 测试环境打包js文件配置

### vue-cli3 在打包测试环境时js代码不在js文件下的问题, 先说一下我环境的配置###### 分别打包三个环境代码 dev test prod###### 结果在打包测试环境代码时,js被打包至与html同级目录下,虽然这不影响生产环境的打包目录,但是想要打包后的js文件都是存放在js文件目录下,该如何做呢???######只要在vue.config...

2020-01-13 10:50:09 878

原创 keep-alive上加v-if导致缓存失效

是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中;使用keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们用法 <keep-alive> 正确用法 <router-view v-if="$route.meta.keepAlive"></router-view> </ke...

2019-12-24 17:42:48 1564

原创 vue excel下载(记一次post请求下载乱码问题)

参数必须加responseType: ‘blob’,不然会乱码axios.get(url, { params: { ...params }, responseType: 'blob' }) .then(res => { if (!res) return let url...

2019-12-19 15:12:09 1021

原创 vue+axios 前端实现登录拦截(路由拦截、http拦截)

路由拦截 + 请求拦截登录拦截逻辑第一步:路由拦截首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录。如果用户已经登录,则顺利进入路由,否则就进入登录页面。const routes = [ { path: '/', name: '/', component: Home }, { path: '...

2019-11-04 10:37:26 174

原创 vue+elementUI+axios实现的全局loading加载动画(部分接口不要loading)

import { Loading } from 'element-ui'let loadingconst startLoading = function() { loading = Loading.service({ lock: true, text: '加载中……', background: 'rgba(0, 0, 0, 0.7)' })}const ...

2019-11-04 09:46:39 1497

原创 vue 全局过滤器 filter的使用

1. src目录下新建filters目录,filters目录里新建index.js文件(写过滤方法)import moment from 'moment/moment'const toFixed = (value = 0) => { let val = Math.round(value * 100) / 100 return val.toFixed(2)}const date...

2019-11-01 16:08:24 144

原创 Vue项目登录成功后返回到原操作页面

把用户原操作页面的地址作为重定向路由的参数//使用钩子函数对路由进行权限跳转router.beforeEach((to, from, next) => { const token = localStorage.getItem('token') if (!token && to.path !== '/login') { next({ path: ...

2019-10-30 13:13:22 2366 3

原创 vue.js element message提示 es6模板字符串 提示语点击事件

let info = this.isAsync == true ? '正在导入,请到上传下载--结果页面查看导入结果' : '上传成功' let message = this.$message({ dangerouslyUseHTMLString: true, message: `<span>${info}</span>` ...

2019-10-29 10:04:54 1825 2

原创 js中如何从对象中过滤出指定的值

1. includeslet params = { 7: '关于我们', 3: '新手购物', 6: '客户服务' }let title = '' for (let key in params) { if ([this.id].includes(key)) { title = params[key] } }...

2019-05-17 14:35:52 13082

原创 vue如何修改计算属性得值

计算属性默认只有 getter ,必须在计算属性里加上setter,否则修改计算属性的值就会报错computed: { uploadImages() { get: function () { return this.$store.getters.refundImages }, set: function (newValue) { this.$s...

2019-04-19 16:37:45 12006 2

原创 vant多图上传组件

图片上传组件<template> <div class="upload-images" :class="{'center': !uploadImages.length}"> <div class="img-box" v-for="(item,index) in uploadImages" :key="index"> <div cl...

2019-04-19 16:15:09 3343 3

原创 vant实现多图上传

<div class="upload-images"> <div class="img-box" v-for="(item,index) in uploadImages" :key="index"> <div class="icon-po"> <img class="image" :src="item"> ...

2019-04-19 11:58:11 7296 5

原创 vue中的组件通讯

组件通讯因为组件是一个独立的个体,组件无法使用到外部的数据但是在真实开发中,多个组件之间是需要相互使用彼此的数据的,因此需要使用组件通讯的技术,让组件之间能够相互传值。组件通讯分为三类父组件传递值给子组件子组件传递值给父组件非父子组件之间的传值组件通讯-父传子定义两个组件Vue.component(&quot;parent&quot;, { template: ` &amp;lt...

2019-04-18 10:29:46 64

转载 vue项目中keep-alive缓存,从详情页返回列表时保存上一步的信息

1、最近用vue做前端项目,从查询页面进入详情页时,返回页面需要保留上次的查询条件,表格当前页数。2、从其他菜单进去,不需要缓存,要保持页面的初始状态。基于上面两种情况,我打算用vue中的keep-alive来缓存页面。问题的解决方法列表项目. 用vue的内置组件keep-alive来缓存列表页面,再路由出口渲染组件时配置:<keep-alive> <ro...

2019-04-18 10:27:36 3984 1

原创 如何将一维数组变成二维数组

function (arr, size) { var arr2 = [] for (var i = 0; i &lt; arr.length; i = i + size) { arr2.push(arr.slice(i, i + size)) } return arr2}

2019-04-18 10:27:03 9014 1

原创 vux上拉加载案例

&amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;div&amp;amp;gt; &amp;amp;lt;v_header title=&amp;quot;我的会员&amp;quot;&amp;amp;gt;&amp;amp;lt;/v_header&amp;amp;gt; &amp;amp;lt;div class='wrap my_member'&a

2019-04-18 10:22:34 755

转载 vue2.0 + vux 项目搭建

vux是可以结合vue使用的一个微信端组件库,我通常用它来做简单的提示框、loading动画、confirm之类的功能。vux里面有很多很实用的功能,详细的可以去看官方文档。我主要就记录一下vux的安装和大概使用方法。安装://安装vuxnpm install vux --save//vux是基于vux-loader的,所以必须要安装这个,否则会报一大堆错npm install...

2019-04-18 10:22:10 164

转载 axios 中文文档 翻译

正文基于Promise的http库,适用于浏览器和node.js。原文点击查看原文特色浏览器端发起XMLHttpRequests请求 node端发起http请求 支持Promise API 拦截请求和返回 转化请求和返回(数据) 取消请求 自动转化json数据 客户端支持抵御XSRF(跨站请求伪造)浏览器支持 ...

2019-04-18 10:21:53 212

转载 vue中Axios的封装和API接口的管理

一、axios的封装在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库。如果还对axios不了解的,可以移步axios...

2019-04-18 10:21:35 3709 1

转载 跨域的几种解决方法

来源(https://segmentfault.com/a/1190000011145364?share_user=1030000010564287)什么是跨域?跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。广义的跨域:1.) 资源跳转: A链接、重定向、表单提交2.) 资源嵌入: <link>、<script>、<im...

2019-04-18 10:21:19 114

转载 angular表单验证

template<!DOCTYPE html><html ng-app="angularFormCheckModule"> <head> <meta charset="UTF-8"> <title>angular表单校验</title> <link rel=...

2019-04-18 10:19:44 67

空空如也

空空如也

空空如也

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

TA关注的人 TA的粉丝

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