vue
文章平均质量分 53
你吃香蕉吗?
踏上山巅的每一步都有可能跌落,重要的是可以告诉自己继续走下去,并且是这样做的,那么,你终会看到满天繁星,日出东方。
展开
-
Vue2:使用provide和inject时,无法获取到实时更新的数据
组合无疑是很方便的一种做法了,但如此只是注入的初始值,并不能随时拿到数据源的实时更新。多个子组件或孙子级组件都要使用顶级或父级的数据。provide 和 inject。(即:祖先向下传递数据)、原创 2022-11-15 17:36:50 · 4341 阅读 · 2 评论 -
vue3:递归组件
vue3中可以直接使用组件文件名来递归组件,常用于页面菜单树的开发效果图父组件<template> <Tree @tree-click="treeClick" :data="data"></Tree></template><script setup lang="ts">import Tree from '@/components/treeItem.vue';import { reactive } from 'vu..原创 2022-04-16 17:25:58 · 5464 阅读 · 1 评论 -
vue3:Ref全家桶
ref接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property,指向该内部值。非响应式:<template> <div> <span>{{ msg }}</span> <el-button @click="handleChangeMSG">change msg</el-button> </div></template>&l原创 2022-04-13 16:21:42 · 987 阅读 · 0 评论 -
Axios封装
一、全局loading效果通常在vue项目中使用最多的第三方请求库就是axios了,以此来实现与后台的数据交互。而在我们请求后台数据的时候,响应时间是不确定的,用户可能不知道我点了按钮之后它“怎么”了?所以我们通常需要一个loading效果,来告诉用户:我点了按钮之后又反应了,它让我等一会儿。 但如果我们在每次请求的时候都去手动加一个loading效果,这无疑是很麻烦的,包括后期的维护成本也是很高的,而且当有多次请求同时触发时,相应的会多次触发loading。 ...原创 2022-03-13 16:40:20 · 2572 阅读 · 1 评论 -
文件预览:使用xlsx预览excel文件
前端预览excel文件、前端预览Markdown、xlsx原创 2022-02-23 09:49:56 · 5786 阅读 · 15 评论 -
Vue3和Vue2的区别
Vue3和Vue2的区别vue3和vue2生命周期对比原创 2022-02-17 22:17:51 · 18229 阅读 · 1 评论 -
文件预览:Markdown文件预览
文件预览、Markdown文件预览、pdf文件预览、word文件预览、txt文件预览、图片文件预览等...mavon-editor实现Markdown文件预览、编辑功能原创 2022-02-15 16:28:17 · 2171 阅读 · 0 评论 -
vue实现PS效果,鼠标拖拽指令、十字辅助线、鼠标选点、打印页面指定内容、生成随机id、颜色选择器、div上输入文字(类似QQ截图输入文字)、vue图片上传转base64...
vue实现PS效果,鼠标拖拽指令、十字辅助线、鼠标选点、打印页面指定内容、生成随机id、颜色选择器、div上输入文字(类似QQ截图输入文字)、vue图片上传转base64...原创 2021-12-08 15:47:09 · 98876 阅读 · 1 评论 -
for循环生成表单,表单校验失效
在实际业务场景中,我们可能需要动态循环生成多个form表单(并且有表单校验),而每个form表单中又可能需要动态控制某一项item的显示隐藏,在我的实际工作中,控制表单的显示隐藏时,多使用的v-if,而此时表单校验会呈现出校验失效、未触发的情况。原创 2021-12-07 13:46:26 · 1476 阅读 · 0 评论 -
elementUI无线滚动+监听滚动条触底
elementUI无线滚动、vue监听滚动条触底原创 2021-12-02 10:12:01 · 2664 阅读 · 0 评论 -
el-table多选+搜索
一、问题描述: 表格数据是一次性从后端获取到了全部的数据(可前端假分页),在模糊检索表格数据时,因为el-table的数据源data发生了变化,重新触发了@selection-change事件,此时如果仅仅是在@selection-change事件对应的方法中对回显的选中项(获取到表格数据要回显的选中项目)进行赋值,会导致选中项被清空,无法保留之前的选中项。二、解决历程:我想大家的想法应该和我的差不多,对初始的选中项进行记录,随后再进行回显以及数据改变的处理逻辑,没...原创 2021-11-15 11:12:47 · 1436 阅读 · 0 评论 -
element样式修改
一、日期选择器边框样式/deep/ .el-input.is-active .el-input__inner, /deep/ .el-input__inner:focus{ border-color: #ABB3CC;}修改前:修改后:二、下拉选样式/deep/ .el-select .el-input.is-focus .el-input__inner, /deep/ .el-select .el-input__inner:focus { border..原创 2021-11-04 11:05:41 · 340 阅读 · 0 评论 -
Element Message封装---避免多个消息提示同时出现,仅显示一个
一、场景描述 在实际开发过程中,我们都需要对401(身份认证过期)进行处理,并使其跳转登录页。但是我们在身份认证过期时刷新页面,此时所在页面如果存在有多个请求同时发送,那么就会出现一次弹窗多次消息提示的情况,极大的影响用户体验。二、解决思路 对element message进行二次封装。 两种实现方式: 1、在封装方法中对当前弹窗状态进行记录,如果当前存在弹窗,则调用element message的clos...原创 2021-10-27 16:06:35 · 4841 阅读 · 0 评论 -
Vue中props数组和对象的默认值为什么要用工厂函数?
假如接收props的组件存在多实例,在设置默认值时如果不使用工厂函数,其因为数组和对象是引用类型的数据,所以可能会导致在某一个实例中修改数据,影响到其他实例中的数据。这和data为什么是函数的本质是一样的。 vue会给我们相应的报错提示,但是原因我想大家还是应该有个大致的了解。...原创 2021-09-06 17:15:39 · 1564 阅读 · 1 评论 -
Vue应用页面跳来跳去,为什么又是单页面应用呢?
单页Web应用(single page web application,SPA),就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。[1]浏览器一开始会加载必需的HTML、CSS和JavaScript,所有的操作都在这张页面上完成,都由JavaScript来控制。因此,对单页应用来说模块化的开发和设计显得相当重要。 ...原创 2021-09-06 09:28:42 · 474 阅读 · 0 评论 -
Vue2刷新当前页面,并重新加载数据
实现原理: 1、移除目标页面(当前页面) 2、重新渲染目标页面代码实现: 在vue2中,我们需要用到provide和inject这对方法(它们总是成对出现的),这对方法可以让我们跨多层级进行通信。也可查看vue2跨组件通信。App.vue<template> <div id="app"> <router-view v-if="showRouterView"/> </div>...原创 2021-08-17 14:27:50 · 4630 阅读 · 0 评论 -
Vue组件间传参(4)---插槽分发
通过使用vue提供的 元素可以给组件传递内容。一、默认插槽子组件children.vue<template> <div> <slot></slot> </div></template>父组件parent.vue<template> <div> <p>父组件</p> <child>原创 2021-08-13 10:02:22 · 1019 阅读 · 0 评论 -
Vue组件间传参(3)---跨组件
一、$attrs和$listeners实现爷孙组件通信(透传)1、在爷孙组件传参时,父组件往往是不需要知道都传递了哪些参数,也不需要使用,仅仅只是作为爷孙沟通的桥梁。$attrs就可以收集上一层组件所传递的所有props,$listeners可以收集到所有需要传递的事件。$attrs包含了父作用域中不被认为 (且不预期为) props 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 props 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可原创 2021-08-12 10:14:04 · 1128 阅读 · 0 评论 -
Vue组件间传参(2)---父子
一、父子组件传值--.sync 众所周知,vue中是单向数据流,我们想要修改父组件传递过来的数据也只能是调用父组件中的方法进行修改,或者在父组件中进行修改,那么如何做到在子组件中直接修改父组件传递的数据呢?此时我们就需要用到修饰符.sync父组件<template> <div> // 子组件中需要传递的数据添加.sync修饰符 <siteDetail :dialogVisible.syn...原创 2021-08-10 11:27:49 · 1202 阅读 · 0 评论 -
Vue组件间传参(1)---父子
一、父组件向子组件传递数据1、在子组件中使用props声明需要从父组件接收到的数据(props和methods、watch等同级) 两种方式: 方式一:字符串数组,每一项都是父组件传递的名称 例:props:['name','list'] 父组件引用的子组件:<子组件 :list = " 父组件组件中的变量 "><子组件> 方式二:对象,可以控制传递数据时...原创 2021-08-09 11:26:45 · 710 阅读 · 0 评论 -
Vue中从不修改的数据如何处理?
为什么不需要修改的数据要特殊处理? 在我们日常开发过程中,可能会存在一些前台写死的数据,比如某些下拉框数据、单选框租数据等,此时我们无需vue内部将它处理为响应式的对象,如果此类数据也被处理为响应式对象,这无疑会加大内存的开销(vue中会遍历data中return出来的对象key进行响应式处理),影响页面响应速度。如何处理? 1、调用Object.freeze()方法处理不需要改变的数据。Object.freeze()方法可以冻结一个对象。一个......原创 2021-08-05 17:40:49 · 668 阅读 · 0 评论 -
Vue-Router实现前端页面缓存
目录1、基本认识(1)为什么要设置max?(2)注意:(3)页面缓存如何重新加载数据,或做数据处理?2、代码实现(1)使用include和exclude实现页面缓存(2)动态判断要显示的router-view(路由出口)3、总结1、基本认识router-view(路由出口)标签在本质上也是一个functional组件,用于渲染路径匹配到的视图组件,它可以被keep-alive所包裹。 keep-alive接收三个属性:include:取值为字...原创 2021-08-04 10:07:56 · 677 阅读 · 0 评论 -
Vue中404页面匹配
第一种:写在路由文件的最后:{ path:'/404', component:Page404, name:'404', meta:{ keepAlive:true }}{ path:'*', redirect:'/404'}原理:路由的匹配方式是从上到下的,当路由配置表中没有与跳转路径对应的路由时,统一会走到path:*这个页面去,此时重定向到404页面第二种:导航守卫实现404页面跳转router.bef原创 2021-08-03 14:29:34 · 557 阅读 · 0 评论 -
Vue混入mixin
概念vue官方文档中是这样说的: 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。 混入分为局部混入和全局混入,全局和局部的概念和全局组件、局部组件相同,这里不再赘述。选项合并(需要多加注意)当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。比如,数据对象在内部会进行递...原创 2021-08-02 16:53:53 · 420 阅读 · 0 评论 -
ESLint格式化
1、安装扩展插件Prettier-Standard - JavaScript formatter2、设置默认格式化方式原创 2021-08-02 15:40:01 · 227 阅读 · 0 评论 -
手写Vuex
前言 这是我的一篇学习笔记,内容中可能会存在一些写的或者理解的不太ok的地方,希望大家在发现时能不吝赐教,大家一起交流沟通,共同进步,噢耶!Vuex是什么?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。这个状态自管理应用包含以下几个部分:state,驱动应用的数据源; view,以声明方式将state映射到视图; actions,响应在vi...原创 2021-08-01 18:06:16 · 149 阅读 · 0 评论 -
关于深度选择器/deep/(::v-deep)和>>>
深度选择器为什么出现? 在使用vue开发时组件私有化样式时使用scoped实现,此时我们使用普通的方式修改第三方库某些样式,如elementui组件的样式是不生效的。原因是scoped会自动在元素上添加一段特殊的标识,如:v-data-254811...等。使用>>><style scoped> #app >>> a { color: red }</style> 但是如...原创 2021-07-31 23:17:41 · 7315 阅读 · 0 评论 -
el-table多选回显、翻页序号递增
实现要点: 1、多选回显:reserve-selection在type="selection"上定义,作用是保留之前选择的数据(也就是表格翻页选择项不丢失);selection-change事件,当选择项发生变化会触发此事件;row-key:reserve-selection 功能的情况下,该属性是必填的;this.$refs.singleTable.toggleRowSelection(row,true)控...原创 2021-07-30 11:26:11 · 1395 阅读 · 0 评论 -
el-tree结合搜索框动态控制tree懒加载(后台搜索)
实现关键点:this.$refs.tree.$data.store.lazy 控制lazy属性是否是生效的,取值为Boolean;node-key="id" 用于展开搜索出的节点default-expanded-keys="expandArr" 默认展开节点的数组代码:HTML<el-tree ref="tree" :data="treeData" :load="loadNode" :props="def...原创 2021-07-29 11:05:35 · 1938 阅读 · 6 评论