![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
Vue
MartinYangHJ
我的一天天
展开
-
Vue生命周期钩子函数详解
Vue 实例有一个完整的生命周期,从开始创建、初始化数据、编译模板、挂载DOM、渲染、更新、卸载等一系列过程,称之为 Vue 实例的生命周期。mounted:在DOM挂载后调用,此时实例已经生成对应的DOM元素,并完成了模板的渲染,可以进行一些需要使用DOM元素的操作,如添加事件监听器。它常用于获取更新前的状态或者进行一些数据处理的操作,例如记录一些状态,以便在更新后进行比较。updated:在数据更新之后调用,此时页面已经重新渲染,可以进行一些需要使用DOM元素的操作,如更新事件监听器。原创 2024-01-09 17:27:36 · 498 阅读 · 0 评论 -
Vue+axios使用post方法传递参数过长报错问题解决
axios.post(url, null, { params: d })代码段即是解决此问题的方法。如果大家有其他方式,可以提出来供大家作为参考。原创 2022-09-06 17:13:48 · 2744 阅读 · 0 评论 -
Vue子组件使用$emit接收从父组件的返回值
1.父组件<template> <div> <div style="font-weight:bold">{{ fatherText }}:{{ toChild }}</div> <br /> <child-data @showFatherData="updateFatherData" @getFromChild="getFromChild" :toChildData="to原创 2022-04-20 13:56:23 · 3326 阅读 · 0 评论 -
Vue中父组件监听子组件事件时$emit的用法
$emit使用时需要满足以下两个条件:1.父组件可以通过 Prop 向子组件传递数据2.子组件可以使用 $emit方法监听父组件的自定义事件。$emit 参数: {string} eventName [...args] eventName:指父组件注册的事件名称;args:父组件注册的事件参数,参数数量不限请看如下代码:1.父组件<template> <div> <div style="font-weigh原创 2022-04-20 11:36:24 · 3633 阅读 · 0 评论 -
Vue用axios时报错:Uncaught(in promise)TypeError: Cannot read properties of undefined (reading ‘protocol‘)
import Vue from 'vue'import axios from 'axios'import Router from 'vue-router'import ElementUI from 'element-ui'Vue.use(ElementUI)Vue.use(axios)Vue.use(Router)Vue项目中使用axios时,按照上述方式将axios以插件的方式来使用就会报错,如下:出现这个错误的原因就是将axios当做Vue的插件使用了,这是错误的,正确的做法.原创 2022-04-19 13:37:15 · 7507 阅读 · 0 评论 -
Vue+File saver+xlsx使用json_to_sheet导出数据为excel
json_to_sheet是将JSON数据导出为Excel格式。1.代码如下:<template> <div> <el-button type="" @click="downloadData()">下载</el-button> </div></template><script>import { saveAs } from "file-saver";import XLSX from "xls原创 2022-04-19 11:45:21 · 2364 阅读 · 0 评论 -
Vue+File saver+xlsx使用aoa_to_sheet导出数据为excel
1.js代码如下:<script>import { saveAs } from "file-saver";import XLSX from "xlsx";export default { name: "TableColumnShowHideDemo", data() { return { exportArrayData: [ ["序号", "英文名", "中文名"], ["1", "Good Morning", "早上好"]原创 2022-04-19 11:16:14 · 3377 阅读 · 0 评论 -
Vue+File saver+xlsx使用table_to_book导出数据为excel
1.在项目中安装file saver和xlsx库,如下:npm install --save xlsx file-saver2.在有下载功能的组件上,加入引用import { saveAs } from "file-saver";import XLSX from "xlsx";3.使用table_to_book方式导出。该方式需要在导出的数据所在的table有唯一标识符,如id<template> <div> <el-button typ原创 2022-04-19 10:02:53 · 5284 阅读 · 4 评论 -
Vue项目安装XLSX成功后,生成项目报错:“export ‘default‘ (imported as ‘XLSX‘) was not found in ‘xlsx‘
在网上查了一下,主要是因为安装的xlsx版本不兼容问题到导致的于是安装了低版本的xlsx,版本为0.16.0,项目可成功运行,如下:又试了一下0.17.0版本的,也可以运行。原创 2022-04-18 11:56:32 · 2341 阅读 · 2 评论 -
vue-cli搭建vue项目config/index.js对proxyTable进行配置
配置如下:// 配置后台代理proxyTable: { '/api': { target: 'localhost:9000', secure: false, pathRewrite: { '^/api': '/api' }, changeOrigin: true } }说明:(1)target:本地测试环境请求后台接口的域名ip(2)s原创 2022-04-08 16:44:32 · 1296 阅读 · 0 评论 -
vue-cli搭建vue项目config/index.js配置参数的详细解析
详情如下,包含中文和英文'use strict'// Template version: 1.3.1// see http://vuejs-templates.github.io/webpack for documentation.const path = require('path')module.exports = { //开发环境 dev: { // Paths assetsSubDirectory: 'static',// 编译输出的二级目录 ass原创 2022-04-08 16:25:49 · 742 阅读 · 0 评论 -
element-ui 某些组件绑定事件后不起作用
请看如下代码:<template> <div> <el-col :span="8" @click="clickEvent"> <div @click="clickEvent"> </div> </el-col> <el-row gutter="14" @click="clickEvent"> &原创 2022-04-08 13:35:28 · 1754 阅读 · 2 评论 -
Vue+Element UI表格列的显示和隐藏
如下代码:<template> <div> <el-table :data="tabledate" height="400" > //使用v-if else 控制两列的显示和隐藏,每个列必须加唯一标识符:key="Math.random()",否则会不起作用,无法控制显示与隐藏 <el-table-column type="selection" width="50" v-if="showCol原创 2022-04-06 17:57:10 · 5664 阅读 · 0 评论 -
Net Core+swagger+Vue+axios webapi请求时参数长度过大
如下:export default { name: "longParam", data() { return { model: { id:'', name:'', content:'' } }; }, methods: { //model作为参数调用接口,后天用实体接收 addModel: function() { var that = this; axios原创 2022-04-02 17:01:47 · 3960 阅读 · 0 评论 -
Net Core +swagger+Vue+axios+Npoi导出excel
代码如下:Net core后台代码: public ActionResult ExportData(string condition) { List<Model> models = modelBLL.GetModelList(condition); var workBook = new HSSFWorkbook(); var sheet = workBook.CreateSheet("导出数原创 2022-03-31 16:36:43 · 2435 阅读 · 0 评论 -
axios同步和异步请求数据
axios默认是异步请求数据的,如果需要同步获取数据的话,需要进行设置。下面的代码默认异步请求数据:<template> <div> <el-tabs @tab-click="tabEvent"> <el-tab-pane name="tab1">Tab1</el-tab-pane> <el-tab-pane name="tab2">Tab2</el-tab-pane>原创 2022-03-30 10:51:46 · 8103 阅读 · 0 评论 -
Vue+Element UI表格数据滚动,鼠标进入停止滚动,鼠标移出停止滚动
<template> <el-table ref="tabledata" :data="tabledate" height="400" @cell-mouse-enter="mouseEnter" @cell-mouse-leave="mouseLeave"> <el-table-column type="selection"></el-table-column> <el-table-column label="序号" prop=".原创 2022-03-29 17:39:59 · 1784 阅读 · 0 评论 -
The ‘mode‘ option has not been set, webpack will fallback to ‘production‘ for this value.
使用webpack进行打包时,报如下错误:The 'mode' option has not been set, webpack will fallback to 'production' for this value.Set 'mode' option to 'development' or 'production' to enable defaults for each environment.如何解决该错误呢?这个错误的意思是项目需要一个运行环境的模式,为“development” 或原创 2022-03-24 17:13:17 · 1917 阅读 · 0 评论 -
Cannot find module ‘webpack-cli/package.json‘
webpack安装后使用webpack命令进行打包之前需要安装webpack-cli,如果在Vs code中进行安装时,会出现如下错误:Cannot find module 'webpack-cli/package.json'对于此错误,直接进行全局安装即可解决,打开PowerShell,输入如下命令:npm install -g webpack-cli完成后,查看版本...原创 2022-03-24 17:01:56 · 2907 阅读 · 1 评论 -
使用vue-cli脚手架创建完项目后,如何引入element-ui的css文件
使用vue-cli创建完项目后,结构如下:引入element-ui的css文件,在src/router/index.js中添加如下代码import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/reset.css'import 'element-ui/lib/theme-chalk/index.css'...原创 2022-03-23 17:31:17 · 1010 阅读 · 0 评论 -
Vue+Element UI添加rules(非空,长度等)限制
<template> <div> //ref="editForm"必须,:rules="formRules"必须 <el-form ref="editForm" :model="editForm" :rules="formRules"> //prop="country"必须,对应相应的rule <el-form-item label="国家" prop="country"> <el-input.原创 2022-03-23 16:34:07 · 8646 阅读 · 0 评论 -
vue element-ui 鼠标悬停时table该行操作按钮显示与隐藏
<template> <el-table :data="tableColumns" border > <el-table-column type="index" label="序号"> </el-table-column> <el-table-column label="国家" prop="country_name"></el-table-column> <el-table-column la.原创 2022-03-23 15:28:40 · 3012 阅读 · 1 评论 -
Devtool inspection is not available because it‘s in production mode or explicitly disabled by author
在Google浏览器安装Vue Devtools插件后显示Vue.js is detected on this page. Devtools inspection is not available because it’s in production mode or explicitly disabled by the author;解决方法:在对应的Html页面增加如下一句话,即可正常使用Vue DevtoolsVue.config.devtools=true;如图所示:...原创 2021-03-05 12:39:15 · 1182 阅读 · 1 评论 -
Vue生命周期图示
下图展示了实例的生命周期。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高。原创 2021-02-26 17:20:09 · 117 阅读 · 0 评论 -
Vue 返回上一页报错:Can‘t read property ‘go’ of undefined,this.$router.go(-1)不起作用
1.报错如下:2.解决方法:原创 2021-03-04 15:29:45 · 1589 阅读 · 1 评论