146浏览

0评论

在vue中使用eslint,配合vscode的操作

不管是多人合作还是个人项目，代码规范是很重要的。这样做不仅可以很大程度地避免基本语法错误，也保证了代码的可读性。这所谓工欲善其事，必先利其器，个人推荐 eslint+vscode 来...

• 2021-05-31

84浏览

0评论

Vue路由权限控制解析

前言本人在公司主要负责中后台系统的开发，其中路由和权限校验算是非常重要且最为基本的一环。实际开发项目中，关于登录和路由权限的控制参照了vue-element-admin这个明星项目，...

• 2021-05-31

159浏览

0评论

详解Vue中的watch和computed

前言对于使用Vue的前端而言，watch、computed和methods三个属性相信是不陌生的，是日常开发中经常使用的属性。但是对于它们的区别及使用场景，又是否清楚，本文我将跟大家一起通过...

• 2021-05-31

169浏览

0评论

在VUE中使用lodash的debounce和throttle操作

说明：debounce和throttle在脚手架的使用，此处以防抖函数debounce为例避免按钮被重复点击引入：import lodash from 'lodash'使用：直接使用debounce方法 // 审核 audit: lodash....

• 2021-05-31

145浏览

0评论

vue data有值,但是页面{{}} 取不到值的解决

我的问题出在js引入的顺序不对，导致不能正常显示vue中的值正确的顺序应该是：先引入vue的js--------html代码-----最后引入自己写的js补充知识：vue中子组件的created、mounted生...

• 2021-05-31

101浏览

0评论

vue实现标签云效果的示例

闲扯两句最近想给自己的博客上加上一个3D标签云的效果，用来表示自己博客文章的分组，网上找到了canvas实现的，还有a元素实现的解析3D标签云，我想让标签可以选择和点击，又不想在标...

• 2021-05-31

67浏览

0评论

vue 避免变量赋值后双向绑定的操作

如： this.list = this.list2, 结果在list改变后 list2也改变，这不是我们想要的效果第一种：利用 JSON.parse 和 JSON.stringifythis.list= JSON.parse( JSON.stringify(this.lis...

• 2021-05-31

255浏览

0评论

浅谈vue.watch的触发条件是什么

很多人习惯用watch，但是却很少有人知道watch的真正触发条件。如果不是对vue原理了如指掌，请谨慎使用watch。示例1，下面会触发watch 吗？<script> new Vue({ data() { return {...

• 2021-05-31

116浏览

0评论

在vue项目中promise解决回调地狱和并发请求的问题

场景需求：需要同时请求5个接口都请求成功后执行下一步操作解决方法：定义一个变量i=5，请求成功一个接口，让i–，直到i=0时执行下一个操作，否则不执行axios.all 并发请求，.then(axios....

• 2021-05-31

154浏览

0评论

解决vue init webpack 下载依赖卡住不动的问题

有时候下载依赖的时候网速不行，这时候我们选择手动下载依赖有时候下载依赖的时候网速不行，这时候我们选择手动下载依赖：选择 No,I will handle that myself生成完项目之后，再cd...

• 2021-05-31

77浏览

0评论

vue router返回到指定的路由的场景分析

项目场景：项目场景：示例:A(商品详情)——B(商品购买页面)-C(支付成功页面)——D(订单页面）问题描述：提示：这里描述项目中遇到的问题：
如果我们不做控制的话，安卓按照浏览器返回机制...

• 2021-05-31

125浏览

0评论

解决vuex刷新数据消失问题

前言vue构建的单页大型项目中，可能会用到Vuex 。Vuex 的状态存储是响应式的，当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高...

• 2021-05-31

206浏览

0评论

vue实现两个组件之间数据共享和修改操作

我们在使用vue开发过程中会遇到这样的情况，在父组件中引入了子组件，需要将父组件的值传到子组件中显示，同时子组件还可以更改父组件的值。以我目前的一个项目的开发为例，如下图...

• 2021-05-31

164浏览

0评论

vue 获取url里参数的两种方法小结

我就废话不多说了，大家还是直接看代码吧~第一种：const query = Qs.parse(location.search.substring(1))let passport = query.passport;第二种：var query=this.$route.query;l...

• 2021-05-31

98浏览

0评论

vue mvvm数据响应实现

为什么实现数据响应式
当前vue、react等框架流行。无论是vue、还是react框架大家最初的设计思路都是类似的。都是以数据驱动视图，数据优先。希望能够通过框架减少开发人员直...

• 2021-05-31

143浏览

0评论

vue.js+element 默认提示中英文操作

element默认中文版，但是我们在做英文页面时自己翻译很不爽，所以我们用element自带英文包，只要在html页面中引入就可以了，具体引入方法有很多种，在此提供了我用过的一种，仅作为参考...

• 2021-05-31

127浏览

0评论

Vue 防止短时间内连续点击后多次触发请求的操作

如果连续点击提交按钮，可能会重复提交数据，导致出错，解决的方法可以使用disabled限制点击，感觉体验不是太好，所有给大家分享下面的方法<el-button @click="throttle()">测试</el-...

• 2021-05-31

92浏览

0评论

vue 图片裁剪上传组件的实现

先看一下总体效果:上传文件做了大小和类型的限制，在动图中无法展现出来。使用file类型的input实现选择本地文件但是浏览器原生的文件上传按钮的颜值不尽人意，而且按钮上的文字...

• 2021-05-31

258浏览

0评论

Vant Weapp组件踩坑:picker的初始赋值解决

在使用vant的picker组件时，我希望有在页面加载时向数据库获取值来设置picker的默认值。开始我使用官方文档中的default-index属性，并在onLoad方法中进行this.setData()。但是...

• 2021-05-31

191浏览

0评论

vue 获取url参数、get参数返回数组的操作

这是vue过滤器 获取url参数，返回数组Vue.prototype.$url=function(){ var url = decodeURIComponent(location.search); //获取url中"&#63;"符后的字串 var theRequest = new...

• 2021-05-31

127浏览

0评论

vue实现lodop打印功能的示例

1.官网下载http://www.lodop.net/download.html2.解压安装运行3.vue部分实现　　3.1将lodopDuncs.js文件放入工程中，具体操作可见：http://www.lodop.net/faq/pp35.html3.2 编...

• 2021-05-31

317浏览

0评论

vant-ui框架的一个bug(解决切换后onload不触发)

前几天做的项目里有用到下拉刷新。使用了vant-ui里的List 列表瀑布流滚动加载，用于控制长列表的展示先说使用 1.用npm下载该模块包npm i vant -S2.引入组件官方提供了三种方...

• 2021-05-31

118浏览

0评论

Vue 401配合Vuex防止多次弹框的案例

1.安装Vuexnpm install vuex --save2. 新建store目录结构3. 编辑store.jsimport Vuex from 'vuex'import Vue from 'vue'import defaultState from './state/state'import m...

• 2021-05-31

171浏览

0评论

让Vue响应Map或Set的变化操作

问题背景我想在vuex的state中使用map，这样可以使很多操作变得方便const state = { all: new Map()}这样的写法是没有问题的，不会报错，state.all可以像正常的Map一样使用。但是...

• 2021-05-31

162浏览

0评论

vant 中van-list的用法说明

van-list里面的元素不能有float样式，否则会连续触发 load 事件原代码<template> <div class="about"> <van-tabs v-model="active" sticky @change="getTypeDate"> <van-t...

• 2021-05-31

86浏览

0评论

详解vue 组件的实现原理

组件机制的设计，可以让开发者把一个复杂的应用分割成一个个功能独立组件，降低开发的难度的同时，也提供了极好的复用性和可维护性。本文我们一起从源码的角度，了解一下组件的底层...

• 2021-05-31

109浏览

0评论

Vue+Spring Boot简单用户登录(附Demo)

1 概述前后端分离的一个简单用户登录 Demo 。2 技术栈 Vue BootstrapVue Kotlin Spring Boot MyBatis Plus3 前端3.1 创建工程使用 vue-cli 创建，没安装的可以先安装：sud...

• 2021-05-31

157浏览

0评论

Vue向后台传数组数据,springboot接收vue传的数组数据实例

用axios前台代码： let menus_id = this.$refs.tree.getCheckedKeys(); //菜单id [1,2,3]数组 this.$axios.get("/api/epidemic/roleMenus/addBath1",{params:{roleid:this...

• 2021-05-31

171浏览

0评论

vue打包通过image-webpack-loader插件对图片压缩优化操作

vue正常打包之后一些图片文件很大，使打包体积很大，通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积step1：npm install image-webpack-loader --save-devste...

• 2021-05-31

132浏览

0评论

解决vue打包 npm run build-test突然不动了的问题

今天遇到一件很奇葩的事情输入npm run build-test 突然停在这不动了 what&#63; 不动了？！后来google了一下 大家都是人才运行一下这句话 就动了！！npm config set registry http:/...

• 2021-05-31

77浏览

0评论

Vue3 响应式侦听与计算的实现

响应式侦听和计算有时我们需要依赖于其他状态的状态——在 Vue 中，这是用组件 计算属性 处理的，以直接创建计算值，我们可以使用 computed 方法：它接受 getter 函数并为 getter...

• 2021-05-31

224浏览

0评论

解决vant的Toast组件时提示not defined的问题

按照官方文档引入全局Toast组件，在methods里面定义函数执行函数时产生了报错：//定义的函数handleClick(){ Toast('点击提示')}报错信息[Vue warn]: Error in v-on handler: "R...

• 2021-05-31

129浏览

0评论

vue 实现element-ui中的加载中状态

需要添加加载状态，调用下面方法即可//开启loadingconst load = _this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'...

• 2021-05-31

102浏览

0评论

在elementui中Notification组件添加点击事件实例

1. 官方文档2. 添加点击事件，传参handleClick() { let telNo = "1111", message = "22222", _this = this; //函数作用域问题 this.$notify({ title: "通知消息", position:...

• 2021-05-31

87浏览

0评论

VUE前端从后台请求过来的数据进行转换数据结构操作

我就废话不多说了，大家还是直接看代码吧`let label(){let _this = this;let _offset = (_this.pagination.currentPage - 1) * _this.pagination.pageSizelet params ={offse...

• 2021-05-31

137浏览

0评论

使用Vant完成DatetimePicker 日期的选择器操作

效果展示：代码展示：<template> <div id="date_time_picker"> <van-button plain type="primary" @click="showPopFn()">点击选择日期</van-button> <van-field v-model="time...

• 2021-05-31

100浏览

0评论

在vue中给后台接口传的值为数组的格式代码

比如你要传的数组是在data中的return中的params中的Arrays。传值格式需要如下：{flag: 1, data: this.params.Arrays}如果要求是json格式，记得后面要加{headers:{'Content-Type...

• 2021-05-31

105浏览

0评论

vue 解决mintui弹窗弹起来,底部页面滚动bug问题

经过dom层层注释缩小反馈终于找到问题所在。问题经过我在弹起弹窗的时候，设置了popupVisible为true然后触发了vue的updated生命周期钩子函数然后我在这个函数里面做了去this....

• 2021-05-31

132浏览

0评论

vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)

vue项目开发的过程中，如果需要文字溢出的dom元素鼠标悬浮时才显示title文字的话，可以封装一个自定义的指令。方法一、组件内代码如下： directives: { title: { inserted(el)...

• 2021-05-31

163浏览

0评论

使用Vant完成通知栏Notify的提示操作

效果：代码展示：<template> <!-- 通知消息提示 --> <div id="notify"> <van-button type="primary" @click="toNotify" class="btn">顶部通知</van-button> </div></template>...

• 2021-05-31

120浏览

0评论

使用Vant完成Dialog弹框案例

效果展示：完整代码：<template> <!-- 完成Dialog 弹框 --> <div id="dialog"> <van-button class="btn" type="primary" @click="TipDialog">提示弹出框</van-button> <van-b...

• 2021-05-31

224浏览

0评论

Vue 解决在element中使用$notify在提示信息中换行问题

在项目开发过程中，遇到如下用户体验提升需求：需要实现错误提示时根据后台返回错误列表信息，换行展示。实现方式如下：通过F12元素查看，在对应的样式中加入white-space:pre-wrap，该...

• 2021-05-31

103浏览

0评论

VUE-ElementUI 自定义Loading图操作

需求：element ui loading图只能使用自己的loading图，但很多场景下，需要替换成自己的gif图虽然文档中有些， element-loading-spinner="el-icon-loading" 可指定自定义图但经测试，...

• 2021-05-31

74浏览

0评论

vue项目中使用rem,在入口文件添加内容操作

在使用vue-cli搭建好项目框架后,在目录结构的index.html文件中添加一段js代码:<script> window.onload = function () { var setRem = function () { // UI设计稿的宽...

• 2021-05-31

101浏览

0评论

vue项目实现减少app.js和vender.js的体积操作

配置webpack中externals来减少打包后vendor.js的体积在日常的项目开发中，我们会用到各种第三方库来提高效率，但随之带来的问题就是打包后的vendor.js体积过大，导致加载时空白页...

• 2021-05-31

106浏览

0评论

vue 解决provide和inject响应的问题

官网上说provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。provide：Object | () => Object（一个对象...

• 2021-05-31

82浏览

0评论

Vue中nprogress页面加载进度条的方法实现

nprogress页面加载进度条 前言很多时候在访问网页的时候我们总是看到页面在加载中，可以却不知道要加载多久，无期限的等待总是让人烦躁不安，所以我们希望能知道网页加载的进度，这...

• 2021-05-31

125浏览

0评论

解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)

1. 页面在手机端不能上下滑动，在PC端浏览器正常滑动说明：在设置了overflow:auto;属性的前提下，H5页面在PC端浏览器里展示可以上下滑动，在ios上可正常滑动，在安卓手机 上不能上下...

• 2021-05-31

95浏览

0评论

vue的$http的get请求要加上params操作

vue GET传递参数要加上paramsthis.$http.get('/operation/customer/question/edits',{params:{id: 10}})另外说一句，现在VUE官方推荐使用axiosvue-resource不更新了补充知识：v...

• 2021-05-31

89浏览

0评论

vue 使用localstorage实现面包屑的操作

mutation.js代码：changeRoute(state, val) { let routeList = state.routeList; let isFind = false; let findeIdex = 0; //菜单栏和下拉的二级菜单 if (val...

• 2021-05-31