vue
文章平均质量分 50
vue 相关知识以及遇到的问题或者案例
六卿
冰冻三尺非一日之寒,愿你事事看开,唯独对美好保持执念。
展开
-
Blob格式转json格式,拿到后端返回的json数据
Blob格式转json格式,拿到后端返回的json数据原创 2023-05-23 10:56:44 · 3478 阅读 · 1 评论 -
Vue2使用v-model封装ElementUI_DatePicker 日期选择器组件
Vue2使用v-model封装ElementUI_DatePicker 日期选择器组件原创 2023-03-17 15:30:55 · 1102 阅读 · 0 评论 -
Vue2使用v-model封装ElementUI日期组件(实现开始时间和结束时间的校验,禁选)
Vue2使用v-model封装ElementUI日期组件(实现开始时间和结束时间的校验,禁选)原创 2023-01-10 17:23:28 · 1808 阅读 · 0 评论 -
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)原创 2022-12-27 17:20:39 · 5223 阅读 · 4 评论 -
Vue3基础(26)___defineProps、defineEmits、defineExpose、defineModel组件通信、defineOptions
Vue3基础(26)___defineProps、defineEmits、defineExpose组件通信原创 2022-11-16 15:03:29 · 3541 阅读 · 1 评论 -
前端项目一键换肤vue+element(ColorPicker)
前端项目一键换肤vue+element(ColorPicker)原创 2022-11-10 17:30:43 · 1661 阅读 · 3 评论 -
Vue3基础(25)___初尝pinia,相比于vuex轻量、好用
初尝pinia,相比于vuex轻量、好用原创 2022-11-08 14:13:36 · 630 阅读 · 2 评论 -
vuex数据持久化、加密(vuex-persistedstate、secure-ls)
vuex数据持久化、加密(vuex-persistedstate、secure-ls)原创 2022-10-27 09:37:32 · 830 阅读 · 0 评论 -
子组件获取外层组件的scrollTop,达到实时定位的效果
子组件获取外层组件的scrollTop,达到实时定位的效果原创 2022-10-25 16:15:48 · 623 阅读 · 0 评论 -
axios全局做节流,解决多次点击导致多次请求接口
axios全局做节流,解决多次点击导致多次请求接口原创 2022-10-21 09:27:37 · 1424 阅读 · 3 评论 -
echarts根据上级元素的大小自动更新echarts(element-resize-detector)配合防抖解决大屏页面卡顿的问题
echarts根据上级元素的大小自动更新echarts(element-resize-detector)原创 2022-10-20 19:50:18 · 1851 阅读 · 0 评论 -
vuex使用createNamespacedHelpers不生效(一定要与namespaced一块使用)
vuex使用createNamespacedHelpers不生效(一定要与namespaced一块使用)原创 2022-09-06 18:59:20 · 1434 阅读 · 0 评论 -
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
Vue+element_Table树形数据与懒加载报错Error in render: "RangeError: Maximum call stack size exceeded"原创 2022-08-26 13:32:09 · 1928 阅读 · 0 评论 -
element中tree组件的选中获取和返显
element中tree组件的选中获取和返显原创 2022-07-25 09:23:05 · 1200 阅读 · 0 评论 -
Vue实现按钮级别权限
Vue实现按钮级别权限原创 2022-07-22 10:18:37 · 3900 阅读 · 0 评论 -
Vue使用element中table组件实现单选一行
Vue使用element中table组件实现单选一行原创 2022-07-21 14:26:36 · 3713 阅读 · 1 评论 -
可视化大屏适配scale方案
可视化大屏适配scale方案原创 2022-06-14 14:11:39 · 2291 阅读 · 0 评论 -
Echarts中横坐标文字显示不全
Echarts中横坐标文字显示不全原创 2022-06-09 18:23:18 · 853 阅读 · 1 评论 -
echarts中使用散点scatter更改颜色却不生效的问题
echarts中使用散点scatter更改颜色却不生效的问题原创 2022-06-08 11:42:47 · 4392 阅读 · 2 评论 -
element菜单组件样式修改NavMenu导航菜单
element菜单组件样式修改NavMenu导航菜单原创 2022-06-06 14:29:33 · 4121 阅读 · 0 评论 -
elementUI使用Pagination分页组件增加自定义slot
elementUI使用Pagination分页组件增加自定义slot原创 2022-06-06 11:05:55 · 8403 阅读 · 4 评论 -
vue2路由懒加载解决import引入报错问题
vue2路由懒加载解决import引入报错问题原创 2022-06-02 14:06:24 · 5206 阅读 · 3 评论 -
Vue2使用v-model封装ElementUI_CheckBox组件
Vue2使用v-model封装ElementUI_CheckBox组件原创 2022-06-01 11:32:36 · 1764 阅读 · 0 评论 -
Vue2使用v-model封装ElementUI_Input组件
Vue2使用v-model封装ElementUI_Input组件原创 2022-06-01 10:56:57 · 1513 阅读 · 1 评论 -
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
比如说我有一组和二组。一组的界面和二组的界面一样,就是数据不一样。当我从一组切换成为二组之后,全部的接口需要重新请求接口儿。但是我不想让整个页面刷新请求(window.location.reload()),而是切换组之后直接全部变成新的数据,这个怎么实现?原创 2022-01-13 09:52:03 · 549 阅读 · 0 评论 -
vue页面跳转取消上一个页面请求
核心:1:vuex以数组的形式存放取消函数;2:axios请求拦截中设置cancelToken;3:页面跳转路由守卫取消上一个页面所以的请求。vuex中在vuex中设置一个存放取消函数的数组,还有一个添加数组元素的方法和清空数组的方法:这里放到了自定义的home模块:export default {/*** 定义命名空间,防止多个模块同名共享,使用时需要带上命名空间*/ namespaced: true, state: { _axiosPromiseArr原创 2021-08-20 17:41:58 · 4686 阅读 · 6 评论 -
vite.config.js中vite.defineConfig is not defined以及创建最新版本的vite项目
原因是vite版本太低,没能从vite中解构出来,升级版本即可。原创 2021-08-13 10:11:39 · 8189 阅读 · 4 评论 -
Vue3基础(24)___vue3中不再支持filters
本来以为filters会像其他api一样,能从vue中解构出来,才发现原来再3.x版本中不再支持过滤。我们可以使用methods方法或者computed计算属性来解决我们的问题。原创 2021-08-12 17:11:20 · 738 阅读 · 0 评论 -
Vue3基础(24)___vue3中使用vuex
既然是使用模块包,那么我们首先要做的就是下载依赖;Vuex4.x版本:安装依赖npm install vuex@next --save创建store文件://解构出来创建store的APIimport { createStore } from 'vuex'//单独写一下store的optionconst storeObj = { state: { myLoveList: [], myName: 'zjq', myRuning: fal原创 2021-08-10 11:55:53 · 509 阅读 · 4 评论 -
vue使用hook:声明周期来监听子组件的声明周期
在子组件本身自我监听/内部监听生命周期函数:<template > <div class="container"> 我是子组件 :{{num}} <button @click="changeFun">chhange按钮</button> </div></template><script>export default { data() { return { num: 1原创 2021-07-30 10:02:19 · 287 阅读 · 4 评论 -
Vue2.x和Vue3.x v-for中还可以这样解构赋值
通过node接口获取数据: const getQueryAllUserInfo = () => { axios.get("user/queryAllUserInfo").then(res => { res.code === "200" && (tableData.value = res.data); console.log(tableData.value); }); };在页面上使用:本质是对象的解构原创 2021-07-27 09:21:43 · 755 阅读 · 0 评论 -
Vue2.0、Vue3.0节流
节流:一段时间内只能执行一次意思:就是控制时间戳来达到第一次点击有效果后,下次点击必须在一定时间后才能再次点击有效果;核心思路:使用时间戳来实现;首先封装节流函数:我们这里不需要考虑this指向,统一使用箭头函数:/** * @param {*} awaitTime 时间戳 定时器时间毫秒数 * @param {*} fun 传入的函数 * @param {*} arrAgu 传入的函数的参数 */const stopUpDownFunList = (awaitTime=2000) =&原创 2021-07-22 10:48:03 · 1063 阅读 · 5 评论 -
Vue3基础(23)___vue3非父子组件之间的通信
写一个事件集合对象,并写模拟触发函数、监听函数:evnetList:事件集合对象数组;name:每一个事件的标识;callbackFun:回调函数;const eventObj = { evnetList: [], on(callbackFun, name) { this.evnetList.push({ name, callbackFun }) }, emit(name, data) {原创 2021-07-21 10:31:53 · 318 阅读 · 2 评论 -
Vue3基础(22)___vue3中使用$forceUpdate
在vue2中直接this.$forceUpdate()在vue3中直接import { getCurrentInstance } from "vue";setup(){//解构赋值 设置别名that 也可不写 :that 直接ctx let {ctx:that} = getCurrentInstance() that.$forceUpdate()}原创 2021-07-19 17:13:04 · 37382 阅读 · 8 评论 -
Vue3基础(21)___在axios.js中使用路由跳转
在vue2中我们只需要引入main.js即可获取this实例,直接this.$router.push('/login')首先在vue3中我们使用comAPI,但是在自己封装的js里面,我们不能使用useRouter ,useRoute,他们需要在setup中调用执行后才能用,于是给出解决办法:直接使用router实例: import axios from 'axios' import { ElMessage } from "element-plus"; import router from '原创 2021-07-19 13:42:15 · 5137 阅读 · 2 评论 -
Vue3基础(20)___Vue3配置错误路由重定向写法
报错信息:Catch all routes ("*") must now be defined using a param with a custom regexp.原因是我在vue3项目中配置错误路由重定向的时候使用了vue2的写法,vue2的写法不再适用vue3:vue2重定向写法: //直接报错 { path: "*", redirect: "/login" },vue3重定向写法:1:原创 2021-07-18 17:03:01 · 5178 阅读 · 2 评论 -
Vue3基础(19)___vite.config.js中配置路径别名
在vite.config.js中配置import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'const path = require('path')export default defineConfig({ resolve: { alias: { "@": path.resolve(__dirname, "./src/assets/js"), }原创 2021-07-17 13:03:19 · 3347 阅读 · 1 评论 -
研究Promise心得总结与思路总结
首先promise 在new的时候会传入一个函数,函数有两个参数,分别是以函数调用的形式返回成功结果和失败结果,在promise中,进入constructor会被立即执行 // executor/执行器 是传进 Promise中的回调函数 constructor(executor) { // 这个回调函数会被立即执行,判断是否应该对状态进行更改 executor(this.resolve, this.reject); }相当于我们传入的两个参数,变成了两个函数,当我门执行的原创 2021-07-06 11:17:13 · 407 阅读 · 7 评论 -
webpack的基本使用
webpack概念 **什么是webpackWebpack 前端资源模块化管理和打包工具。可以将许多松散的模块按照依赖和引用关系打包成符合生产环境部署的前端资源。并将按需加载的模块进行代码分隔,等到实际需要的时候再加载。webpack 运行在node环境上的一个 包 // webpack 可以把前端的任何资源, 当做模块, 来进行打包整合, 也可以支持不同的代码(ES6模块代码, CSS文件, LESS文件, 图片…) // 编写前端代码后, 可以被webp原创 2021-07-05 16:33:39 · 469 阅读 · 4 评论 -
element table配合from实现双击可编辑表格
直接贴代码<template> <el-table :data="tableData" border style="width: 90%;margin:0 auto" @row-dblclick="dbclick"> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名" align="cen原创 2021-07-02 09:41:11 · 483 阅读 · 11 评论