VUE相关问题汇总
关注
分享
扫一扫
文章平均质量分 51
VUE相关问题汇总
IT博客技术分享
没有做不到的，只有想不到的！
展开
-
vue项目里面有多个模块的服务，前端处理url转发
没有在/pca 服务里面做转发接受 /dca、 /api的服务，所以需要前端自己去配置每个服务模块对应的。让后端去改nginx的配置，在pca 的配置里面 把 新增加的2个模块的服务转发做好。按照登录的api js文件的方法，把对应的 新增加的模块的api js文件都改下。先定义一个url变量，判断是。原创 2023-08-11 16:53:56 · 423 阅读 · 0 评论 -
vue日历组件封装，可全选，可单选，并可以取各自的值
先上效果图：父组件：calendars.vue<template> <div class="hello"> <h1>日历测试</h1> <div>当前选中的年/月:{{curYearMonths}}</div> <div style="margin-bottom:20...原创 2019-07-10 17:04:01 · 3407 阅读 · 0 评论 -
vue 前端文件上传报错：上传失败,原因: 413 Request Entity Too Large
1.问题：在本地开发中无论上传小文件还是大文件都可以上传成功，但将代码发布到测试环境后，超过1mb的文件就会报错，打开控制台一看。vue 前端文件上传报错：上传失败,原因: 413 Request Entity Too Large。前端限制解除，重新打包上线，还是报错 413 Request Entity Too Large。这里根据自己公司的需求限制大小哈，我们这限制为200M.2.排查我们的系统接口在node层做了一下转发代理用到了。Nginx默认最大能够上传1MB文件。原创 2023-03-09 17:23:31 · 2979 阅读 · 0 评论 -
el-input可以输入完成之后生成另一个动态生成的el-input
先上效果图： 基于 elment 动态增减表单项 https://element.eleme.cn/#/zh-CN/component/form 从上面这个官方的例子自己改装一下：html： js代码：原创 2022-07-08 11:11:53 · 808 阅读 · 0 评论 -
vue 依赖包报错 eslint\lib\cli-engine\cli-engine.js:421
Syntax Error: D:\RuoYi-Vue\ruoyi-ui\node_modules\eslint\lib\cli-engine\cli-engine.js:421 } catch { ^ SyntaxError: Unexpected token { @ multi (webpack)-dev-server/client?http://localhost:81&sockPath=/sockjs-node (webpack)/hot/dev.原创 2022-03-02 11:46:41 · 2097 阅读 · 1 评论 -
vueCli 页面的数据缓存，keepAlive组件的作用及使用方式
keep-alive有什么作用？keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动的组件，我们能够知道，一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现你想让那个页面的数据缓存，就在入口文件的 <router-view></router> 外面包裹一层 <keep-alive ></keep-alive> ..原创 2021-11-30 09:56:45 · 444 阅读 · 0 评论 -
element-ui 表格table，动态显示每一列的，重置全选
先上效果图：html:html： 我是通过v-if="colData[0].istrue"，通过勾选框的选中和不选中来控制对应列的istrue的true/false，从而控制每一列的显隐<template> <div> <el-dropdown :hide-on-click="false" style="float: right"> <i class="el-icon-s-unfold"></i>原创 2021-06-22 15:43:21 · 2164 阅读 · 1 评论 -
title显示问题（鼠标放上去展示一个字符串第一个逗号前面的内容）
此处用到了字符串截取的方法：split方法先上效果图：案列：item：“06:00:00-06:31:49,1”，title展示时只要第一个逗号前面的内容展示出来。即：正确展示：item：“06:00:00-06:31:49”，方法：item.split(',')[0]，code:主要代码如下：<template slot-scope="{row}...原创 2019-09-26 10:54:52 · 398 阅读 · 0 评论 -
vue div里面 套iview 的 Tooltip 文字
先看效果图吧：方法一：具体代码如下： <div class="positions"> <div v-for="(item,index) in positions" :key="index"> <div id="act_point"...原创 2019-07-26 11:06:33 · 2258 阅读 · 0 评论 -
Vue 开发必须知道的 30多 个技巧
Vue 开发必须知道的 36 个技巧Vue基本用法很容易上手,但是有很多优化的写法你就不一定知道了,本文从列举了 36 个 vue 开发技巧;后续 Vue 3.x 出来后持续更新.1.require.context()1.场景:如页面需要导入多个组件,原始写法:importtitleComfrom @/components/home/titleComimportbannerComfrom @/components/home/bannerComimportcellComf...原创 2020-09-10 16:21:12 · 1007 阅读 · 0 评论 -
表单类的 IP 组件封装二、
由于element-ui 和 iview-ui 组件库，目前暂未提供 IP 类的组件，小编组件封装了一个vue的IP组件，仅供大家使用和学习探讨；之前也有写有 IP组件的文章，这次是二次优化，1.优化了之前没输入3位数后自动跑到 下一个空格里面，本次优化后，每输入3位数值后，需要输入 " ." 或者enter键，才会 跳到 下一个空格里面；2. 优化了，每次调用后，再次点击新增数据的时候， 清空上次的数据代码如下:父组件： <FormItem ...原创 2021-04-09 16:53:56 · 395 阅读 · 0 评论 -
前端vue-element 登录随机生成数字验证码
老规矩先上效果图：html文件： <!-- 随机验证码 --> <el-form-item prop="verifycode" style="line-height:0px;"> <el-input v-model="loginForm.verifycode" ref="verifycode" placeholder="验证码" class="identifyinput" style="width:230px;"><原创 2021-03-26 11:07:50 · 3187 阅读 · 0 评论 -
vuecli4.0报错：sockjs.js?9be2:1605 GET http://localhost/sockjs-node/info?t=
webpack热部署导致的问题解决方案注释掉node_modules\sockjs-client\dist\sockjs.js里面1604行这个就可以了 try { // self.xhr.send(payload); } catch (e) { self.emit('finish', 0, ''); self._cleanup(false); ...原创 2020-03-24 15:07:19 · 904 阅读 · 0 评论 -
2020年3月份最新vue面试题汇总二、
1.v-for中为什么要用key (图解)2.描述组件渲染和更新过程理解：渲染组件时，会通过 Vue.extend 方法构建子组件的构造函数，并进行实例化。终手动调用 $mount() 进行挂载。更新组件时会进行 patchVnode 流程.核心就是diff算法3.组件中的 data为什么是一个函数?理解：同一个组件被复用多次，会创建多个实例。这些实例用的是同一个构造函数，...原创 2020-03-04 00:11:16 · 3637 阅读 · 0 评论 -
2020年3月份最新vue面试题汇总一、
1.谈一下你对MVVM原理的理解2.请说一下响应式数据的原理？理解:1.核心点: Object.defineProperty 2.默认 Vue 在初始化数据时，会给 data 中的属性使用 Object.defineProperty 重新定义所有属 性,当页面取到对应属性时。会进行依赖收集（收集当前组件的watcher） 如果属性发生变化会通 知相关依赖进行更新操作。原理:...原创 2020-03-03 23:31:51 · 22512 阅读 · 0 评论 -
vue项目，里面有多个角色，要求用共同的 router，header
1.可以把router 里面的 index.js 封装成公共的 ，把json文件引进来，还有store。2.下面是判断 用户类型，进哪个json 文件export function asyncRouterMap () { let RouterMap = [] const asyncRouterMapData = [] // eslint-disable-next-line...原创 2020-03-10 17:27:25 · 141 阅读 · 0 评论 -
iview 里面的Tooltip 文字提示，第一次有文字提示，过了禁用文字提示
1.可以用这个属性：<Tooltip v-else :disabled="true"></Tooltip>disabled 是否禁用提示框 Boolean false 需求是这样的：素材添加的时候是【保存按钮】，当点击完【保存按钮】之后，保存变为【审核按钮】，此时【审核按钮】为不可点击，并且鼠标放上面有文字提示，当我试听完这段素材后，【审核按...原创 2020-01-10 15:00:20 · 1041 阅读 · 0 评论 -
Vue-cli3 更新
Vue-cli 3结构变了很多,更优雅,开发体验更好。当你输入一个命令时可能会提示vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.如下情况这段的意思是要先卸载vue cli2,然后重新安装vue cli 3。更新先执行npm uninstall -g vue-c...原创 2019-12-12 10:57:13 · 735 阅读 · 0 评论 -
npm install 报警告npm WARN
npm install 报警告npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.0 (node_modules\fseventsnpm notice created a lockfile as package-lock.json. You should commit this file.npm WARN fsev...原创 2019-12-11 10:23:00 · 15321 阅读 · 2 评论 -
vue项目报错 Uncaught (in promise) NavigationDuplicated {_name:""NavigationDuplicated"
在进行跳转的时候报错app.js:87499 Uncaught (in promise) NavigationDuplicated?{_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "Navigating to current location ("/yunshuattr") is not allow...原创 2019-12-10 16:25:23 · 1217 阅读 · 0 评论 -
Vue项目 在chrome页面崩溃:喔唷 崩溃了（总结）
情况一、vue项目在谷歌浏览器上出现崩溃一、问题描述：最近vue项目开发时，在chrome浏览器页面过一段时间一直提示：页面崩溃:喔唷 崩溃了项目开发的时候，测试同事反馈页面会出现“喔唷 崩溃了”，打开控制台进行相同操作后发现控制台会频繁出现一个警告：Forced reflow while executing JavaScript took <N>ms二、问题...原创 2019-12-05 14:37:17 · 16768 阅读 · 3 评论 -
vue cli4.0项目的启动流程及（npm run serve）自动打开浏览器
一、安装 vuecli 须知：4.0 的cli安装需要，卸载之前的cli 不论是3.0 还是2.0的，都需要卸载 卸载旧版本的cli命令：npm uninstall vue-cli -g 或 yarn global remove vue-cli二、Node 版本要求 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。 你可以使...原创 2019-11-22 10:25:07 · 5564 阅读 · 0 评论 -
安装cnpm后运行报cnpm :无法加载文件 C:\Users\29038\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本。
或者提示：cnpm : 无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。1.安装cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org2.安装完成后报错：无法加载文件 C:\Users\yizon\AppData\R...原创 2019-11-19 11:15:24 · 2259 阅读 · 2 评论 -
解决IE浏览器无法显示VUE项目的方法
一、ie11打开vue2.0项目空白,控制台报错 vuex requires a Promise polyfill in this browserPromise为ES6语法，有的浏览器不支持ES6,所以需要安装babel-polyfill来将ES6转换为浏览器可识别的ES5语法1.npm install --save-dev babel-polyfill2.在main.js中引入 i...原创 2019-11-18 13:51:30 · 4043 阅读 · 3 评论 -
用原生js实现矩形框选，同时加入vue中使用 （修复bug）
用原生js实现矩形框选先上效果图：从效果图中可以看到可以获取到选中区域的某个点的具体坐标：（554,249）；554 代表的是左边离 左侧浏览器的位置距离；249代表，右上点距离右上浏览器的距离；如何得到Aid 和 Bid 的位置信息呢？ 思路如下：// aid的left=矩形的left; top=top+height// bid的left=矩形的lef...原创 2019-07-30 10:47:30 · 1504 阅读 · 0 评论 -
vue 引用js文件，如果不管用（或者不好使）
第①步：首先在哪个vue文件那用肯定先在js的地方引下路径：<script>import loadJs from 'src/utils/load.js'export default {}</script>第2步：在mounted 里面 加载一下：mounted(){ loadJs('/static/metro/js/subway...原创 2019-07-26 11:29:02 · 3877 阅读 · 0 评论 -
vue 通过类名绑定 来 自动切换/(动态)换图
先上效果图：从图上可以看出是2张 车头朝向不一样的 小车；主要通过：类名绑定:class="{'bg1':item.flag == true,'bg2':item.flag == false }"判断条件是: item.flag == true /item.flag == false;贴一下标签代码： <!-- 小车的位置 ...原创 2019-07-25 11:28:26 · 886 阅读 · 0 评论 -
Vue中splice()方法：实现对数组进行增删改的操作
语法结构：splice(index,len,[item])1、可以用来添加/删除/替换数组内某一个或者几个值2、该方法会改变原始数组index:数组开始下标 len: 替换/删除的长度 item:替换的值，删除操作的话 item为空一、删除：index表示要删除的数组下标，len长度为1（len设置1，如果为0，则数组不变），item为空表示执行删除...原创 2019-07-24 15:02:19 · 9757 阅读 · 1 评论 -
vue根据站点A 与 站点B 之间的间距 实现小车（可能为多辆车）的动态移动
先不废话上效果图：具体代码如下：<template> <div> <h1>地铁线路实时动态图</h1> <div class="subway"> <div class="lines"> <div class="line_title" v-for="...原创 2019-07-17 11:28:24 · 617 阅读 · 0 评论 -
vue双向数据绑定原理
vue双向数据绑定原理简析mvvm框架目前angular,reat和vue都是mvvm类型的框架以vue为例：这里的vm就是vue框架，它相当于中间枢纽的作用,连接着model和view.当前台显示的view发生变化了，它会实时反应到viewModel上，如果有需要，viewModel会通过ajax等方法将改变的数据 传递给后台model同时从后台model获...原创 2019-06-18 17:39:33 · 1087 阅读 · 0 评论 -
vue 父子组件传值之（父组件如何触发子组件中的方法，子组件调用父组件中的方法）
文章目录1.什么是组件？ 2.使用组件 3.父传给子的方法 4.子传给父的方法组件1.什么是组件？组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用is特性进行了扩展的原生 HTML 元素。所有的 V...原创 2019-05-23 13:34:59 · 2102 阅读 · 0 评论 -
Vue 当页面加载完后，第一次请求为了拿到header里的S-Trace的值
方式一： 需要点击按钮测试，触发页面加载带过来后台数据；一般在App.vue 里面写：方式二：（建议使用方式2）首先需要在config / index.js然后在config / prod.env.js 里加 如图：再然后在config / dev.env.js 里面：最后在：main.js里面：最后查看状态以及header...原创 2018-09-27 22:41:22 · 4577 阅读 · 0 评论 -
vue后台管理系统 （个人笔记-总结）每日实时更新
问题①. 坐标系 input 的 提示文字：方法①：最简单的html 的title属性实现效果图如下：方法②：return h('Tooltip',{style:{},props: {content: x + `, ` + y,placement:"top",}},[h('Input', {props: {value: value},on: ...原创 2019-04-12 09:44:10 · 1466 阅读 · 0 评论 -
vue框架 做后台管理系统的总结（WZ）
1.备注：(此项是转载，但是我们的项目目前用的就是这个。)**本项目是后台管理框架，集成了权限管理、登录功能、UI组件、七牛上传等功能，建议直接使用。**-**注意**：便于前端调试，所以数据请求都是用了mockjs模拟。**在需要请求外部api时请移除mock文件**。## Features 特性- **?wz脚手架?**（脚手架助你安装/卸载组件更方便）- **工业化U...原创 2019-03-13 18:22:04 · 9456 阅读 · 0 评论 -
iview 组件里面操作里的按钮，根据条件显示
分析：肯定在style 里面做处理；平常我们在div里面 直接是 v-show 一个变量 show： false； this.show = true; 来判断这里需要用到style： display：条件？“none”: "block";先看效果图：范围被隐藏的图：有一个坑；display：条件？“none”: "block"; ...原创 2019-09-09 16:50:39 · 2780 阅读 · 1 评论 -
vue 做后台管理系统2维数组表单（动态渲染可编辑单元格的Table）
先上效果图：说明： 横 和 纵 都是遍历出来的 从数据库取出来的 input 是一个个填的 最下面有一个提交保存的按钮跟这个表格很类似：一、问题是这样的：后台传了xArr = [x1, x2,...,xn]和yArr = [y1, y2, ..yn]两个数组，前端要渲染出表格并且可以填写每个单元格的值，然后按照一定数据结构保存...原创 2019-03-28 12:40:52 · 4737 阅读 · 0 评论 -
Vue-webapp 中的坑 使用Mint UI tabbar 点击之后图片改变的方法
vue-webapp 中的坑 （mint-ui很坑的，需要注意）Mint UI tabbar 点击之后图片改变的方法下图就是Mint UI的tabbar组件代码htm代码：<template><mt-tabbar v-model="tabBar" fixed><mt-tab-item id="Invest" @click.native="sho...原创 2018-09-14 10:00:38 · 1542 阅读 · 0 评论 -
vue项目页面在苹果手机浏览器上上下滑动出现卡顿现象解决办法
在公用的样式底部加上-webkit-overflow-scrolling: touch;原创 2018-12-12 16:52:40 · 1677 阅读 · 0 评论 -
vue-mitui- tab栏标题内容的切换
html 页面：js页面：注意点点击tab栏字体变色 和 背景图变色的样式：先上代码：希望能够帮助到刚刚做项目的小伙伴，有兴趣的小伙伴欢迎加入技术交流群和公众号：技术群：个人公众号:...原创 2018-09-14 11:09:21 · 1629 阅读 · 0 评论 -
vue项目中遇到的问题：之解决token失效的方法
1.解决token失效的方法常见问题2：2.字体多行显示不了的解决办法：{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}3.tab栏的图像自动识别，登录状态，未登录是灰色的图标，登陆后是红色图标4. 点击按钮 ：“展示” 与 “收起” 的功能html：...原创 2018-10-19 16:49:03 · 18109 阅读 · 0 评论