前端vue
关注
分享
扫一扫
文章平均质量分 56
Ace.三阶斗尊
web前端全栈工程师，熟悉vue2/vue3、react/react-native、node、uniapp、nuxt、electron、python.....
斗之气，斗者，斗师，大斗师，斗灵，斗王，斗皇，斗宗，斗尊，斗圣，斗帝
展开
-
vue项目鼠标移入移出切换背景图片闪烁问题的解决
1. vue动态切换背景图：<el-tooltip class="item" effect="dark" :content="'切换凭证'" placement="top-end"> <div class="btn" @mouseenter="mouseenter" @mouseleave="mouseleave" :style="{'background':'url('+iconImg+') no-repeat','background-size':'100% 10.原创 2020-07-15 10:25:09 · 4616 阅读 · 2 评论 -
render函数的渲染
1. 官网：https://cn.vuejs.org/v2/guide/render-function.html。2. render使用：render:h=>{ return h(a,b,c) //a为标签字符串或引入的组件名（如'div'/ mySwiper），b为对象，表示该标签的属性，可以不写该参数，c为字符串或者数组子元素（内容或者子标签）。}//1. 使用方法1render:h=>{ return h(mySwiper,{ 'cla原创 2020-06-10 08:48:01 · 1079 阅读 · 0 评论 -
vue clic3.0+下根据启动/打包指令不同 请求的后端地址不同
1. 创建prod.env.js：'use strict'const URL = require('./request.json');const target = process.env.NODE_ENVlet obj = {}console.log("target:",process.env.NODE_ENV)if(target === 'dev') { obj = { NODE_ENV: '"development"', _BASEURL: `'${URL.dev.baseU原创 2020-05-09 12:27:07 · 316 阅读 · 0 评论 -
vue是一种渐进式框架
1. vue是一种渐进式框架：何为渐进式？简单理解就是，vue由内而外是有视图层渲染->组件机制->路由机制->状态管理->构建工作分层组成，开发者可以根据需要，按需引入使用vue的分层功能，由简单到深入高级的渐进式使用。如： 初级：既可以只用vue做一些像页面渲染、表单提交之类的基础操作。 中级：又可以进一步...原创 2020-01-25 20:59:12 · 1811 阅读 · 0 评论 -
前端下载excel文件的两种方法
1. 后端直接返回下载excel的地址链接excelDownUrl：window.location.href = excelDownUrl; //直接下载excel下载地址2. 后端返回二进制流文件，前端通过axios 通过Blob 转换excel文件流 下载乱码问题：axios({ method: 'GET', //或者POST url: '/ap...原创 2020-01-08 14:14:32 · 9376 阅读 · 6 评论 -
vue中input框禁止输入标签
<input type="search" placeholder="请输入内容" v-model="addTypeVal" :maxlength="5"><script> export default{ watch:{ addTypeVal(val){ let reg = /[^\u002...原创 2019-12-03 16:03:19 · 4641 阅读 · 0 评论 -
vue页面首次加载缓慢
主要原因：是页面在打包后如果不进行相关配置会导致资源文件特别的大，一次想要全部加载完成会特别的耗时。可以通过安装webpack-bundle-analyzer 插件来查看打包文件的大小，可以明显的看出哪些文件比较大。解决方法如下：1. 去掉编译文件中map文件。在编译好后，我们会看到文件夹下有特别多的.map文件，这些文件主要是帮助我们线上调试代码，查看样式。所以为了避免部署包过大，通常都不...转载 2019-12-02 11:03:05 · 482 阅读 · 0 评论 -
基于vue的h5或者webapp实现移动端的淘宝flexible适配
1.vue-cli3.0配置移动端flexible参考：参考https://blog.youkuaiyun.com/lbPro0412/article/details/85046329。2. webpack配置移动端flexible参考：参考https://www.jianshu.com/p/e6cf887ac938。注意：flexible适配可以将class里面的的px根据设备转换为rem，...转载 2019-11-26 17:24:01 · 282 阅读 · 0 评论 -
vue下封装原生input type='file'上传多张图片之将（文件文件上传或转换为base64上传）传给后端
1. 处理原生js的input type='file'上传。<template> <div class="feedback"> <div class="imgs_wrap"> <div class="imgs_title flex_row_betweem_center padding16"&...原创 2019-11-21 18:29:46 · 1257 阅读 · 0 评论 -
vue之mixins的组件混合使用
/** * 在src/mixins/table-minxins.js表格组件的一些通用方法混入封装 */export default { methods: { tableDelAction(success,content='是否删除该条数据?',title='提示'){ this.$confirm(content, title, { ...原创 2019-11-19 14:27:14 · 1707 阅读 · 0 评论 -
uniapp的vue实现抽奖活动
<template> <view class="luck"> <view class="luck_header flex_between_center margin padding bg-gradual-orange radius"> <view class="header_info flex_start_center"> &l...原创 2019-10-12 15:31:21 · 2357 阅读 · 1 评论 -
vue项目下一些浏览器不支持图片的.webp格式的处理
添加小程序，兑换各种视频教程/数据资源。1. 什么是webp格式：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间。WebP既支持有损压缩也支持无损压缩。相较编码JPEG文件，编码同样质量的WebP文件需要占用更多的计算资源。与JPEG相同，WebP是一种有损压缩。但谷歌表示，这种格式的...原创 2019-03-07 11:12:51 · 5665 阅读 · 2 评论 -
el-input/input取消浏览器记住密码问题
1.添加auto-complete="new-password"属性，这是一个新属性,兼容所有浏览器.<el-input type="password" auto-complete="new-password" v-model="form.password" placeholder="请输入密码"></el-input>2.在表单中创建一个不显示的input且...转载 2019-07-22 10:56:12 · 5143 阅读 · 0 评论 -
vue项目（vue-cli2.0和vue-cli3.0）移动端适配
添加小程序，兑换各种视频教程/数据资源。1. 参考：https://blog.youkuaiyun.com/qq_42392522/article/details/82977929。 用 vue-cli3 创建的 vue 项目配置 px2rem-loader 如下： 找到文件 node_modules/@vue/cli-service/lib/config/css.js，添加规则：...原创 2019-03-30 15:12:40 · 681 阅读 · 0 评论 -
vuex知识整理
1. 官网：https://vuex.vuejs.org/zh/guide/。2.应用场景：如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。3. 下载：n...原创 2019-11-17 09:56:12 · 180 阅读 · 0 评论 -
vue蒙层滑动穿透问题
添加小程序，兑换各种视频教程/数据资源。1. 问题：在蒙层上滑动时，会触发底层的滑动。2. 解决一： 2.1 vue的 @touchmove.prevent 可以用来阻止滑动，但是同时会禁止蒙层内的子元素的滑动事件，如果蒙层内子元素没有中间滑动需求（如只有点击需求），就可以用 @touchmove.prevent 实现阻止蒙层滑动穿透问题。 2.2 蒙层设为fixed悬...原创 2019-03-21 11:08:07 · 2571 阅读 · 0 评论 -
vue项目的transition动画
添加小程序，兑换各种视频教程/数据资源。1. 实现页面动画进入时右滑，离开时左滑。<template> <transition name="slide"> <div class="singer_detail"> </div> </transition> </template><s...原创 2019-03-12 10:32:52 · 394 阅读 · 0 评论 -
vue实现返回顶部，仿element-ui的返回顶部组件
添加小程序，兑换各种视频教程/数据资源。参考：https://www.cnblogs.com/rogerwu/p/9543563.html。转载 2019-08-28 16:39:32 · 234 阅读 · 0 评论 -
vue-router的原理解析
添加小程序，兑换各种视频教程/数据资源。1.vue-router的使用：//在项目入口文件main.js中，已经下载vue-router之后：import Vue from "vue"import Router from "vue-router"import App from './App.vue'Vue.use(Router) //Vue.use实际上是执行插件模块Rou...原创 2019-09-11 09:14:54 · 338 阅读 · 0 评论 -
vue实现后台管理系统页面功能和页面路由权限的控制
1. 页面路由权限的设置（基于路由守卫）：新建router/router.js和router/index.js路由文件。//router/router.js文件import Admin from '@/views/Admin.vue'export default [ { path:"/", redirect:"/admin" },{ path:"/admin", na...原创 2019-09-23 12:03:58 · 2390 阅读 · 0 评论 -
echarts基础教程
添加小程序，兑换各种视频教程/数据资源。（一）前言1. echarts林峰教程：http://study.163.com/course/courseLearn.htm?courseId=1016007&from=study#/learn/video?lessonId=1198073&courseId=10160072. echarts:官网http://echa...原创 2018-08-21 14:09:37 · 1377 阅读 · 3 评论 -
vue的拖拽移动排序插件vuedraggable
添加小程序，兑换各种视频教程/数据资源。参考：http://www.ptbird.cn/vue-draggable-dragging.html。转载 2019-09-29 11:29:18 · 1121 阅读 · 0 评论 -
elemenet-ui菜单递归组件的二次封装
<!--leftMenu.vue--><el-menu router unique-opened default-active="2" mode="vertical" background-color="#324157" text-color="#bfcbd9" ...原创 2019-09-26 11:56:02 · 477 阅读 · 0 评论 -
vue路由跳转取消上个页面的请求和去掉重复请求。
添加小程序，兑换各种视频教程/数据资源。参考：https://www.cnblogs.com/zlfProgrammer/p/11058413.html。参考：https://blog.youkuaiyun.com/harsima/article/details/93717217。我们经常会遇到当前页面未加载完毕时跳转路由或者返回操作, 但是通过network会发现, 若网络环境较差的情况下,...转载 2019-09-26 11:41:20 · 2387 阅读 · 0 评论 -
vue中基于vuex根据可视区窗口动态设置表格的高度
//1.在指定页面，如admin.vue时触发获取可视区的宽高import { mapMutations} from "vuex";data(){ return { windowLock:false, }},created() { const refreshWindow = _ => { let innerH...原创 2019-09-25 11:28:30 · 703 阅读 · 0 评论 -
【vue】切换路由页面时，中止上个路由页面未返回数据的请求
转载：https://blog.youkuaiyun.com/GossipHHH/article/details/84066864。转载 2019-09-24 15:28:23 · 1045 阅读 · 0 评论 -
vue的provide / inject向子孙组件传递数据/方法
1. vue的2.2.0版本新增的属性：用以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。即祖先组件可（不论组件层次有多深）向其子孙组件传递事件，变量。参考官网：https://cn.vuejs.org/v2/api/#provide-inject。<template> <div> <child...原创 2019-09-23 16:29:33 · 3090 阅读 · 0 评论 -
vue的回车键按下触发登录事件
created(){ window.addEventListener('keydown', this.handleKeyDown, true)//开启监听键盘按下事件}methods:{ async login() { this.$refs.form.validate(_ => { if (_) { c...原创 2019-09-23 14:44:08 · 3792 阅读 · 0 评论 -
vue的ref属性获取/设置标签的样式
添加小程序，兑换各种视频教程/数据资源。1. 获取标签的宽高：this.$refs.image.clientHeight/clientWidth。2. 设置标签的宽高：this.$refs.content.$el.style.top="12px"<div > <div ref="image" class="image"></div>...原创 2019-03-14 10:34:56 · 35135 阅读 · 5 评论 -
router-link标签的选中激活导航router-link-active
添加小程序，兑换各种视频教程/数据资源。router-link: 其中tag='div'表示router-link为div标签<template v-for="(item,index) in arr" v-if="arr.length>0"> <router-link tag="div" class="tab_item fle...原创 2019-02-27 11:35:12 · 7853 阅读 · 0 评论 -
Vue-cli3.0项目下axios请求本地json文件的数据
添加小程序，兑换各种视频教程/数据资源。参考：https://blog.youkuaiyun.com/lfcss/article/details/81055847。1.Vue-cli3.0项目节省了很多文件，比如讲vue-cli3.0之前版本的build/dev-server.js配置放在了vue.config.js中。2. 在Vue-cli3.0项目的vue.config.js或vu...原创 2019-03-06 11:28:44 · 6571 阅读 · 0 评论 -
vue.js实战书籍笔记
添加小程序，兑换各种视频教程/数据资源。0. Vue的定义：渐进式技术栈，足以应付任何规模的应用，包括比较高级的功能，如解耦视图和数据，可复用组件，前端路由，状态管理，虚拟DOM。Vue官网：https://cn.vuejs.org/v2/guide/。1. MVVM模式：vue的使用模式MVVM，有MVC衍生而来。即V（view）视图层变化时，会自动更新到viewModel（视图模型...原创 2018-12-17 17:20:47 · 3796 阅读 · 0 评论 -
vue中引入加载失败-----解决方法
添加小程序，兑换各种视频教程/数据资源。1. 将图片放在static文件夹下：2. 将图片放在非static文件下，如assets文件夹下时，通过require()加载图片路径： data(){ return { listImgs:[require("../../assets/img/swip...原创 2018-09-17 11:11:43 · 3718 阅读 · 0 评论 -
Vue技术栈开发实战笔记(三)-------路由的进阶
添加小程序，兑换各种视频教程/数据资源。1. 路由详解-----进阶 1）路由组件的传参： 2）html5 History模式： 3）导航守卫： 4）路由元信息： 5）过度效果：...原创 2018-09-03 16:54:33 · 873 阅读 · 0 评论 -
Vue技术栈开发实战笔记(二)-------路由的基础
添加小程序，兑换各种视频教程/数据资源。1.路由的详解： 1）router-link和router-iview组件： 2）路由配置： a.动态路由： b.嵌套路由： c.命名路由： f.命名视图： 3）重定向和别名： 4）js...原创 2018-09-03 14:25:41 · 852 阅读 · 0 评论 -
Vue技术栈开发实战笔记(一)--------使用vue ui3+创建项目
添加小程序，兑换各种视频教程/数据资源。 1.使用vue ui创建、管理项目：可视化的项目管理工具。步骤： a.在已经下载node v8.9版本以上的情况下（百度怎么下载node已经怎么更新node），程序输入cmd->下载vue cli3.0以上(输入npm install -g @vue/cli)-通过vue ui可视化管理工具打开项目（输入vue ui...原创 2018-09-03 12:15:10 · 3063 阅读 · 5 评论 -
Vue技术栈开发实战(四)-------------状态管理bus的使用
添加小程序，兑换各种视频教程/数据资源。1. 状态管理 1）Bus： 2）Vuex--基础--state&getter： 3）Vuex--基础--mutation & action/module： 4）Vuex--进阶：...原创 2018-09-04 10:04:36 · 964 阅读 · 1 评论 -
查看端口被占用如何解决
添加小程序，兑换各种视频教程/数据资源。1.可通过cmd ----》netstat -ano指令查看所有的端口占用情况C:\Users\Administrator>netstat -ano2.查看指定端口的占用情况C:\Users\Administrator>netstat -aon|findstr "3000" //这里是端口号 ，找到PID...原创 2018-08-31 09:59:58 · 667 阅读 · 0 评论 -
vue中使用wangEditor编辑器
添加小程序，兑换各种视频教程/数据资源。1. 官网：http://www.wangeditor.com/2. npm下载：npm install --savewangeditor3. 引用：import Editor from 'wangeditor'import 'wangeditor/release/wangEditor.min.css'4. 实例化：<div...原创 2018-08-23 08:57:40 · 6533 阅读 · 0 评论 -
axios传递，node后台无法接受参数，但是能返回数据的报错
添加小程序，兑换各种视频教程/数据资源。解决axios传参格式不对：node不能准确接受到参数的问题： var qs = require('qs'); axios.post('http://127.0.0.1:3001/login', qs.stringify({ 'uname': "Ace" ,'upwd':"123456"}));...原创 2018-08-22 17:21:54 · 667 阅读 · 1 评论