分类：VUE

2020
10-08

在vue中使用防抖函数组件操作

初级1、先写好防抖函数/***@desc防抖函数*@param{需要防抖的函数}func*@param{延迟时间}wait*@param{是否立即执行}immediate*/exportfunctiondebounce(func,wait,immediate){lettimeoutreturnfunction(...args){letcontext=thisif(timeout)clearTimeout(timeout)if(immediate){letcallNow=!timeouttimeout=setTimeout(function(){timeout=null},wait)if(callNow)func.apply(... 继续阅读 >
2020
10-08

Vue 中使用lodash对事件进行防抖和节流操作

有些浏览器事件可以在短时间内快速触发多次，比如调整窗口大小或向下滚动页面。例如，监听页面窗口滚动事件，并且用户持续快速地向下滚动页面，那么滚动事件可能在3秒内触发数千次，这可能会导致一些严重的性能问题。如果在面试中讨论构建应用程序，出现滚动、窗口大小调整或按下键等事件请务必提及防抖(Debouncing)和函数节流（Throttling）来提升页面速度和性能。这两兄弟的本质都是以闭包的形式存在。通过对事件对应的回调... 继续阅读 >
2020
10-08

浅谈vue中document.getElementById()拿到的是原值的问题

问题两个界面都有id="test"的div，内容不同，路由切换的时候document.getElementById()拿到的是原界面的值。问题代码//页面1<divid="test">aaa</div>//页面2<divid="test">bbb</div>//路由切换如下：<transitionname="card-fade"><router-view/></transition>.card-fade-enter-active{animation:bounce-in2s;}现象从页面1跳转到页面2时，document.getElementById(‘test')，始终拿到的是aaa。反之从页面2跳到页面1时，d... 继续阅读 >
2020
10-08

关于vue 结合原生js 解决echarts resize问题

关于vue 结合原生js 解决echarts resize问题 解决页面echarts图表resize问题左侧的菜单栏模块是可以收缩的，点击左上角的icon可以收缩，但是点击左上角的icon后，右侧的echarts图并未进行对应的收缩，使用element-resize-detector插件能够解决问题（如何解决Vue项目中使用echarts，宽度变化导致图不能resize问题）但是会有点卡顿，所以采用原生的方法来处理，再结合windows自带的原生resize事件处理浏览器宽度高度变化，可以不使用插件来处理问题了。<template><di... 继续阅读 >
2020
10-08

vue中keep-alive、activated的探讨和使用详解

vue中keep-alive、activated的探讨和使用详解 在修改公司的一个项目的时候发现了activated这个东西，一直觉得很疑惑，之前也没怎么用过啊！官网的生命周期那也没说过这东西啊！生命周期不就createmountupdate和destory这几个东东么，怎么多了个activate出来。百思不得其解，于是去问了下度娘和查了下文档！恍然大悟，原来这东东是结合keep-alive这东东使用的，下面顺便记录一下。keep-alive<keep-alive>包裹动态组件的时候，会缓存不活动的组件实例，而不是摧毁他们。其是一... 继续阅读 >
2020
10-08

Vue生命周期activated之返回上一页不重新请求数据操作

activated:英文原意：使活动、触发在Vue的生命周期函数中，这个好像用的不是特别多？（也许只是在我的工作中这个用的不多，或者说叫几乎不用这个）一、需求前不久在项目中有这样一个需求：在订单页面的地址信息栏，默认通过接口填充了一个已经设置过的一个的默认地址，现在要跳转去地址列表重新选择一个地址并回填到订单页面的地址信息位置二、尝试常规操作：我们通常会将通过接口请求数据的方法放在==created==或者==mounted==... 继续阅读 >
2020
10-08

vue项目使用$router.go(-1)返回时刷新原来的界面操作

vue项目使用$router.go(-1)返回时刷新原来的界面操作 在项目需求中，我们常常需要使用$router.go(-1)返回之前的页面，但是却发现，之前的界面，保持着上次跳转的状态，比如说：弹框未关闭之类的等等，。。。。。问题如下：界面1：界面2使用$router.go(-1)返回上一次的界面由于使用$router.go(-1)返回，导致之前的数据都保留，并未刷新原来的界面，如下：还是显示跳转前的弹框解决方法1：不要使用$router.go(-1)，而是使用$router.push('某某某'),但是其实这种方法是不合理的，因为你... 继续阅读 >
2020
10-08

vue 页面回退mounted函数不执行的解决方案

vue 页面回退mounted函数不执行的解决方案 前言最近做项目碰到一个很头大的问题--从a页面跳到b页面进行编辑，编辑完再返回a页面，却没走a页面的钩子函数mounted，数据没有更新经过一番面向百度研究，终于找到了问题所在。接下来就记录一下这个问题及其解决的方法。原理其实这个问题主要涉及到vue生命周期，对vue生命周期理解不够深刻的同学可以去官网学习一下：https://vuejs.org/v2/api/#Options-Lifecycle-Hooks解决这个问题的关键就在于对keep-alive的理解和activated钩... 继续阅读 >
2020
10-08

vue data对象重新赋值无效(未更改)的解决方式

vue存在一个比较深的问题就是data中的属性对象如果在初始化的时候为{}，那么后面在方法用普通的js语法赋值会无效这里是datadata(){return{model:{}};}这里是方法里的普通赋值afterUpload(response){this.model.icon=response.url;}普通方法会无效，需要使用vue提供的方法重新显示声明afterUpload(response){this.$set(this.model,'icon',response.url)}补充知识：Vue.js-数组和对象的赋值动态变化&克隆这篇文章... 继续阅读 >
2020
10-08

VUE项目axios请求头更改Content-Type操作

我就废话不多说了，大家还是直接看代码吧~consthttpServer=(opts,data)=>{consttoken=localStorage.getItem('token')constPUBLIC=`?token=${token}`lethttpDefaultOpts=''varhost=`${process.env.HOST}`varprot=`${process.env.PORT}`varbase=host+(prot?":"+prot:"")if(opts.method==='post'){httpDefaultOpts={method:opts.method,url:`${base}${opts.url}${PUBLIC}`,h... 继续阅读 >
2020
10-08

vue+axios全局添加请求头和参数操作

vue+axios全局添加请求头和参数操作 走登录的接口都会返回一个token值，然后存起来方便之后调接口的时候给后台传过去，传给后台的方式有两种：（具体使用哪种需要和后台商量）1、放在请求头中2、放在接口的参数中1、放在请求头中下面代码是从本地cookie中拿tokenVueCookie：一个用于处理浏览器cookies的简单Vue.js插件.//在封装axios的文件中添加拦截器//添加请求拦截器，在请求头中加tokenservice.interceptors.request.use(config=>{//判断本地的cookie中是... 继续阅读 >
2020
10-08

vue在响应头response中获取自定义headers操作

vue在响应头response中获取自定义headers操作 日常开发，我们可能会为了安全问题，保证第三方无法通过伪造返回报文欺骗前端，需要在返回报文中添加自定义参数，用于验证身份，后端添加自定义参数，前端校验自定义参数通过后才会执行相应的操作。系统为了安全会去掉自定义头，如果不做任何处理，前端无法通过javascript访问自定义头，所以需要在接口返回中添加这样的操作。response['Cookie']='13231231231'#自定义头添加后接口返回信息如以下截图：控制台打印headers信息如以... 继续阅读 >
2020
10-08

vue中全局路由守卫中替代this操作(this.$store/this.$vux)

全局路由守卫this.$vux.loading.hide()报错，访问不到this解决办法申明变量代替thismain.js文件方法router.beforeEach((to,from,next)=>{if(vue){vue.$vux.loading.hide()}else{}next()})letvue=newVue({el:'#app',router,store,components:{App},template:'<App/>'})if判断防止第一次初始化报错或者letvue=newVue({el:'#app',router,store,components:{App},template:'<App/>'})router.befo... 继续阅读 >
2020
10-08

解决vue做详情页跳转的时候使用created方法 数据不会更新问题

解决vue做详情页跳转的时候使用created方法 数据不会更新问题 大家在做项目的时候肯定会遇到携带某个参数跳转到详情页然后取这个参数，下面是重点刚开始我用cookie把这个参数存起来在详情页面取这个参数发现只有第一次取到的是正确的你在回到父页面在点击进详情页发现取到的数据跟原来的一模一样根本没有发生改变（因为router跳转时是不会刷新页面的所以导致我取得值永远不能更新），我以为是cookie有问题了后来又用了query携带参数跳转，sessionStorage方法存取发现都不行，看下图解决办法... 继续阅读 >
2020
10-08

解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题

解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题 功能描述：如图，右侧悬浮菜单按钮，只支持上下方向拖动，点击时展开或关闭菜单。BUG说明：鼠标上下方向拖拽，如果松开时鼠标位于悬浮按钮上会默认执行click事件，经验证，click事件与mouse事件的执行顺序为onmousedown=》onmouseup=》onclick,意味着在click事件执行时会与与其相关的mouse事件冲突。解决方案：因为click事件执行时间短，所以利用鼠标拖动的时间差作为标志，在拖拽事件中计算鼠标从onmousedown到onmouseup所用... 继续阅读 >
2020
10-08

深入了解Vue.js 混入（mixins）

混入(mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。来看一个简单的实例：varvm=newVue({el:'#databinding',data:{},methods:{},});//定义一个混入对象varmyMixin={created:function(){this.startmixin()},methods:{startmixin:function(){document.write("欢迎来到混入实... 继续阅读 >