![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
一只烛
越努力 越幸运
展开
-
解决Vue2打包后出现空白页面问题
注意:是build下的assetsPublicPath。是双击index.html后页面为空白。找到对应文件 添加publicPath。原创 2023-05-09 11:03:39 · 361 阅读 · 1 评论 -
elementui原方法有默认参数还想再赋值scope
计数器el-input-number的change事件原本默认参数currentValue, oldValue,想要再添加参数 <el-input-number v-model="scope.row.amount" placeholder="请输入内容" :min="0" :max="finallySelect[scope.$index].maxnum" @change='(value) =&.原创 2021-11-19 15:51:46 · 461 阅读 · 0 评论 -
Vue前端打包详细流程
前端打包添加打包命令运行打包代码打包指定不同的环境变量打包自定义文件移除三方包gzip压缩打包部署模式添加打包命令package.json中添加配置npm run build 发布到线上的代码 不便于调试命令:①npm run build:dev 开发调式环境②npm run build:prod 线上调试环境 "build:dev": "vue-cli-service build --mode dev", "build:prod": "vue-cli-service build原创 2021-11-15 14:44:19 · 18851 阅读 · 1 评论 -
vue中根据用户权限动态添加路由详解(后端返回角色 前端过滤)
根据用户的权限,展示不同的菜单页。知识点路由守卫(使用了前置守卫):根据用户角色判断要添加的路由vuex:保存动态添加的路由难点每次路由发生变化时都需要调用一次路由守卫,并且store中的数据会在每次刷新的时候清空,因此需要判断store中是否有添加的动态路由。(若没有判断 则会一直添加 导致内存溢出)根据角色判断路由过滤动态路由 判断每条路由角色是否与登录传入的角色一致<template> <div> <el-menu .原创 2021-11-04 16:45:22 · 1773 阅读 · 0 评论 -
VCharts根据时间段改变数据
<template> <div class="small"> <div class="meta"> {{ $route.meta[0] === "首页" ? "" : $route.params.name }} <i v-if="$route.meta[0] !== '首页'" class="el-icon-star-on"></i> </div> <el-row style="原创 2021-09-03 11:00:09 · 151 阅读 · 0 评论 -
解决vue中页面刷新之后store中数据丢失
store中的数据一刷新就会丢失,我们可以利用插件来解决这个问题。主要原理是把数据存储在localStorage或者SessionStorage。npm install vuex-persistedstate// store/index.jsimport createPersistedState from "vuex-persistedstate";const store = new Vuex.Store({ // 代码 state: {}, mutations: {}, acti.原创 2021-03-26 18:00:20 · 589 阅读 · 2 评论 -
vue中全局使用filter
filter过滤被用于一些常见的文本格式化在两个地方可以使用: ①{{}} ②v-bind全局过滤器在Vue上加上了过滤器,通过管道符‘|’使用。// main.jsimport filter from './filter/filter'Object.keys(filter).forEach(ele => { Vue.filter(ele, filter[ele])})// filter.jsconst filter = { // 通用的函数}expor.原创 2021-03-26 17:51:44 · 150 阅读 · 0 评论 -
vue中使用provide实现reload()
<template> <div id="app" style="width: 100%; height: 100%"> <div v-if="login === true" style="width: 100%; height: 100%"> <router-view v-if="isRouterAlive"/> </div> <div v-else>loading...</div>原创 2021-01-29 20:53:04 · 600 阅读 · 0 评论 -
axios + application/x-www-form-urlencode传参
axios + application/x-www-form-urlencodedvar qs = require('qs')export function getConfig(trainID, data) { return request({ // eslint-disable-next-line no-undef url: `/api/trains/${trainID}/inferconfs`, method: 'POST', headers: { .原创 2020-12-22 09:55:50 · 804 阅读 · 0 评论 -
for...in...的使用
将图一的形式转换为图二图一:图二: data = data.map((ele, i) => { ele.results = ele.results.map(el => { for (var key in el) { return {el : key, val : el[key]} } }) return ele})原创 2020-12-15 11:26:37 · 258 阅读 · 0 评论 -
element实现表格点击行展开功能
<el-table :data="tableData" style="width: 100%" // 以下三项必写 :row-key="getRowKeys" :expand-row-keys="expands" @row-click="clickRowHandle" >// date中expands: []// 根据行的id判断getRowKeys(row) { return row.id;}原创 2020-12-15 11:09:09 · 1216 阅读 · 0 评论 -
vue三重for循环点击按钮高亮显示
实现如图所示的高亮显示数据格式:效果图:代码实现<div class="scoreLabel" v-for="(item, index) in scoreConfig.dimensions" :key="index"> <div class="setTitle">{{ item.label }}</div> <div class="smallLabel">.原创 2020-12-04 10:09:11 · 1039 阅读 · 0 评论 -
iview刷新之后导航菜单仍然高亮
⚠️这里使用了route.name,因此需要注意的是路由中的name和MenuItem中的name相互对应。原创 2020-11-16 11:26:44 · 244 阅读 · 0 评论 -
Vue+mock进阶版(可在network中查看到请求)
创建文件mockService.js打开控制台 node mockService.js在network中可以查看到。(我写的vue+mock初级入门中不可在network中查看到请求)let express = require("express"); //引入express模块let Mock = require("mockjs"); //引入mock模块let app = express(); //实例化/*post方法*/var bodyParser = require("bo..原创 2020-11-09 15:09:05 · 3487 阅读 · 0 评论 -
Vue页面Elemen-UI刷新仍返回之前所在页面并且导航菜单高亮
功能:要实现页面刷新后,仍然停留在当前路径下。运用到了watch监听url的变化;watch是一个对象,监听的数据一旦发生改变便会立即触发。此代码结合Element-UI导航菜单代码如下:data() { return { activeIndex: this.$route.path, } }, watch: { '$route' (to, from) { this.activeIndex = to.path } },.原创 2020-11-06 15:25:15 · 499 阅读 · 0 评论 -
逐步教你使用Vue前端代理实现跨域请求
目录结构1⃣️在build文件夹下的webpack.dev.config下2⃣️找到devServer下的proxy进行配置,target下为跨域的url。1⃣️在config文件夹下的index.js2⃣️找到dev下的proxyTable进行配置1⃣️npm install axios --save-dev2⃣️在src下创建文件夹api3⃣️在api下创建文件request.js代码如下:4⃣️同一级下创建文件start.js代码如下:...原创 2020-11-05 15:50:27 · 785 阅读 · 0 评论 -
Vue+mock初级入门
1.下载 npm i mockjs --save-dev2.新建一个mock.js的文件3.在main.js中引入 require("…/mock.js") 【我的是与package.json同级】4.使用mock语法 在mock.js写数据5.引入axios 显示数据原创 2020-11-02 15:39:43 · 339 阅读 · 0 评论 -
Vue出错解决方案No matching version found for stream-browserify@2.0.3.
去 https://www.npmjs.com/网站查看是否有此版本没有的解决方案删除package-lock.json原创 2020-10-28 16:56:18 · 1907 阅读 · 0 评论 -
Vue出错解决方案you may use special comments to disable some warning
1.找到build下webpack.base.conf.js2.删除module下rules中的 …(config.dev.useEslint ? [createLintingRule()] : [])原创 2020-10-28 16:38:02 · 1596 阅读 · 0 评论 -
Vue面试题二(持续更新中)
Vue面试题二MVC与MVVM的区别模块化与组件化过滤器watch属性computed计算属性watch、computed和methods的区别ref与$refsMVC与MVVM的区别MVC是后端的分层开发概念MVVM是前端视图层的概念,主要关于视图层,分为M层、V层和VM层。M为页面中要渲染的数据V为页面中展示数据的DOM元素VM是MVVM的核心,为调度者,通过双向绑定联系M与V层。当M层的数据发生改变时,会被VM自动渲染到页面中,当V层的数据发生改变时,VM层会自动将数据同步到M层中。原创 2020-09-13 23:01:24 · 137 阅读 · 0 评论 -
详解Vue生命周期
详解Vue生命周期生命周期的解释生命周期图生命周期的三个阶段创建阶段运行阶段销毁阶段生命周期总结生命周期常见面试题生命周期的解释在vue实例yunx时的三个阶段中,总会伴随着各种各样的事件,称为生命周期函数,也为生命周期钩子函数。生命周期图生命周期的三个阶段创建阶段执行一次初始化编译模版页面挂载运行阶段根据最新的数据更新页面,按需执行0到多次。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期原创 2020-09-11 19:27:39 · 138 阅读 · 0 评论 -
Vue面试题一(持续更新)
Vue面试题一v-show与v-if区别如何让CSS只在当前的组件中起作用v-model是什么 怎么使用 Vue中的标签怎么绑定事件vue-loader是什么 使用它的用途nextTick是做什么Vue组件中data为什么是函数(脚手架中)对keep-alive的了解Vue中key的作用在Vue中使用插件的步骤watch与computed差异Vue项目打包了一个js和一个css ,还是有多个文件vue-cli项目中的src目录每个文件夹的作用Vue组件之间的传值通信v-show与v-if区别v-if原创 2020-09-07 09:50:14 · 157 阅读 · 0 评论