vue专栏
文章平均质量分 58
vue框架常见小技巧记录,和vue框架源码解读
webRambler
努力,专注,知行合一!stay hungry,stay foolish!
展开
-
axios连续请求同一个接口的时候取消前一个请求
使用axios怎样在连续请求同一个接口时,取消前面的请求,通俗一点来讲就是对接口请求做了个“防抖”的操作。场景:比如现在页面上有个列表查询的按钮,当用户在一秒钟之内,多次点击这个按钮时,那么接口此接口请求会发生多次,前一个接口请求结果还未返回就进行了下一次请求,这样做不但会造成资源的浪费,同时还会加重服务端的压力,怎样避免这样的操作呢?此时,我们只需要在下一个接口发出时,取消前面这个一模一样的接口的请求即可。幸运的是axios给我们提供了这样的一个骚操作:cancelToken。话不多说,直接上code原创 2021-07-21 17:47:35 · 2459 阅读 · 0 评论 -
vue踩坑之eventBus.$on多次触发的问题
记录一下自己使用vue踩过的坑,希望别人看到能避免如此踩坑。先描述问题:假设有两个非父子组件A和组件B,组件A的data中绑定的某个值变化时,通知组件B需要做某些操作,代码如下:// 组件Athis.value = 1eventBus.$emit('getSomething', this.value)// 组件Bcreated() { eventBus.$on('getSomething', val => { console.log(val) })}我们会发现,当组件A已原创 2021-07-13 15:26:01 · 4819 阅读 · 0 评论 -
vue作用域插槽slot-scope详解
vue的插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由父组件来决定。实际上,一个slot最核心的两个问题这里就点出来了,是显示不显示和怎样显示。了解vue的同学都知道插槽分为单个插槽,具名插槽,还有作用域插槽,前两种比较简单这里就不赘述了,今天的重点是讨论作用域插槽。简单来说,前两种插槽的内容和样式皆由父组件决定,也就是说显示什么内容和怎样显示都由父组...原创 2018-05-31 17:42:45 · 18696 阅读 · 17 评论 -
vue-cli3脚手架配合express搭建devserver
目录写在前面说说旧版的vue-cli搭建devserverwebpack-dev-middlewarewebpack-hot-middlewarehttp-proxy-middleware旧版的vue-cli结合express所构建的devserver新版的@vue/cli构建devserver新版脚手架的devserver配置(重要)写在前面近期本人在gi...原创 2019-11-01 04:23:10 · 1880 阅读 · 0 评论 -
vue插槽slot踩坑--父组件通信
当我们在封装vue组件时,难免会用到插槽slot来进行子组件的嵌套,那么,当slot插槽处的内容组件需要和父组件进行通信时,怎么办呢?场景代码如下:// parent.vue<template> <div> <slot></slot> </div></template><scr...原创 2019-04-30 15:19:54 · 1799 阅读 · 0 评论 -
vue无痕刷新组件
在vue项目中,很多场景需要我们刷新组件,一般常用的两种刷新方法: window.location.reload(),原生 js 提供的方法; this.$router.go(0),vue 路由里面的一种方法;这两种方法都可以达到页面刷新的目的,简单粗暴,但是用户体验不好,相当于按 F5 刷新页面,页面的重新载入,会有短暂的白屏。那么,怎么实现无痕刷新呢?原理:...原创 2019-03-19 11:40:56 · 682 阅读 · 0 评论 -
vue如何禁止弹窗后面的滚动条滚动?
methods : { //禁止滚动 stop(){ var mo=function(e){e.preventDefault();}; document.body.style.overflow='hidden'; document.addEventListener("touchmove",mo,false);//禁止页面滑动 }...转载 2020-12-28 16:46:17 · 8591 阅读 · 0 评论 -
vue2.5+typescript的采坑系列《一》
写在前面最近笔者在使用vue2.5+typescript构建项目,其实是自己写着玩的,本着探索+分享的目的,在GitHub新建了一个项目,技术选型vue2.5+typescript,因为之前一直没有使用vue+typescript构建项目,所以就想尝试一下,没想到vue+ts却是巨坑多多啊。。。下面开始带大家一起看看,那些年我们一起踩过的坑1.引入.vue文件不能省略文件扩展名看到上述...原创 2019-01-27 23:37:22 · 713 阅读 · 0 评论 -
vue在父组件中改变子组件中的某个样式
在应用vue开发前端项目时,有时候我们需要在父组件中改变子组件的默认样式,比如你的项目中引用了第三方UI库,但是你觉得某个组件的样式你并不喜欢,那么你想改变它的默认样式,那么我们该怎么办呢?直接上代码,先来看父组件Home.vue的代码// 父组件Home.vue<template> <div class="home"> <h1>This...原创 2018-12-30 19:33:51 · 6641 阅读 · 0 评论 -
vue脚手架有话说
目录1.vue3.0脚手架与vue2.x脚手架并存2.vue-cli 2.x版本3.vue-cli 3.0版本1.vue3.0脚手架与vue2.x脚手架并存安装最新的vue3.0的脚手架npm install -g @vue/cli# ORyarn global add @vue/cli如果你想同时保留vue2.x的脚手架,你可以这样:npm inst...原创 2018-12-23 01:03:34 · 421 阅读 · 0 评论 -
axios配置
详情见https://blog.csdn.net/chjj0904/article/details/79086746转载 2018-06-07 14:01:32 · 384 阅读 · 0 评论