VUE
文章平均质量分 52
老电影故事
我只想搞搞搞搞搞搞搞钱!
展开
-
vue前端面试题精选
一、【vue的双向数据绑定原理】采用数据劫持结合发布者-订阅者的方法,通过Object.DefineProporty()劫持各个属性的settet,getterObserve对数据对象递归遍历,都加上setter,getter,只要数据改变,就能监听到Compile解析编译模板制冷,初始化页面视图,只要数据发生改变,收到消息,立马更新视图MVVM做为数据绑定的入口,整合observe,compile,watcher三者,observe监听数据model的变化,compile解析编译模板指令,watc原创 2021-10-24 18:12:38 · 1694 阅读 · 1 评论 -
vue中替换全局字体
产品说项目要拿去展会展示,但现在项目字体是微软雅黑,不支持商用,需要全局替换思源字体。原创 2023-10-26 07:00:00 · 1171 阅读 · 0 评论 -
统一监听Vue、React组件报错
errorCaptured监听下级组件的错误,返回false 阻止向上传播errorHandler监听全局Vue组件的错误window.onerror监听其他JS报错,如 异步。原创 2023-09-25 08:00:00 · 1217 阅读 · 0 评论 -
VUE前端实现token的无感刷新
说实话,这个其实没啥好讲的,要说有复杂度的话,也主要是在后端。实现token无感刷新对于前端来说是一项十分常用的技术,其本质都是为了优化用户体验,当token过期时不需要用户调回登录页重新登录,而是当token失效时,进行拦截,发送刷新token的请求,获取最新的token进行覆盖,让用户感受不到token已过期。原创 2023-08-30 08:15:00 · 9713 阅读 · 4 评论 -
好用的可视化大屏适配方案
使用插件参考:https://juejin.cn/post/7075253747567296548。vue3版本:https://datav-vue3.netlify.app/vue2版本:http://datav.jiaminghi.com/如果你不想分别写html,js和css,那么你也可以使用。缺点: 等比缩放时,项目的上下或者左右是肯定会有留白的。核心原理: 固定宽高比,采用缩放,一屏展示出所有的信息。// 看下面这个没有封装完善的。// 定义更新size方法。// 获取大屏真实尺寸。原创 2023-08-28 07:00:00 · 832 阅读 · 0 评论 -
前端权限功能怎么搞啊啊啊?这样!
/ 获取权限值if (!//不拥有该权限移除dom元素})原创 2023-08-24 16:58:08 · 166 阅读 · 0 评论 -
黑白主题换肤方案
切换的时候,不重新调接口。原创 2023-08-24 15:33:01 · 211 阅读 · 0 评论 -
Ajax 请求到底应该放在 created 里还是 mounted 里???
我是倾向于放在mounted里,其实差别不大,但是在mounted里整体逻辑会更清晰但是也看到有人说 应该放在created 有助于一致性 ssr不支持beforemount mounted。原创 2023-08-23 07:30:00 · 267 阅读 · 0 评论 -
基于element表格封装一个可编辑表头和拖拽排序的表格
如图所示,要搞一个这样的表格,列名可以修改,列可拖动排序。原创 2023-06-02 10:57:15 · 279 阅读 · 0 评论 -
Element el-select - 切换单多选时显示问题
代码中使用了 v-if 安照常理,如果我切换了就会销毁,但是效果并不是这样,因为 vue复用了< el-select >中的input。也就是说根本原因是: vue 在切换的过程中,认为input不需要销毁重建,所以直接复用了。如何告诉vue 单选和多选不要复用呢?答案是 ----- 添加key 这里引用下官方文档。这里选择科目后,我再切换到柱状图,按道理是要这样。vue出于提高性能,所以 vue 给复用了。这是啥问题呢,一开始百思不得其解。原创 2023-04-14 10:50:29 · 773 阅读 · 2 评论 -
scrollIntoView()方法详解与实际运用
该scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。根据其他元素的布局,元素可能无法完全滚动到顶部或底部。页面(容器)可滚动时才有用!原创 2023-04-07 11:22:32 · 32704 阅读 · 1 评论 -
vue实现点击右键出现自定义操作菜单
实现像微信一样的点击右键后出现操作菜单,对选中的数据项进行相应的操作,接下来介绍使用原生vue实现右键菜单的方法。原创 2023-03-30 07:30:00 · 7123 阅读 · 1 评论 -
echarts 关系调用高亮示例 dispatchAction及其遇到的问题
好吧 太多了 关键是看这个遇到的问题遇到了什么问题呢 就是 点击对应的实体 但是高亮了别的 如图 点击了 王二 但是却高亮了手机switchHigh 的index对应错了 点击王二 就需要传王二的index因为我右边的列表 是过滤了关于人的实体 手机阿 公司阿 地址阿 都不在左边的列表里面 然后 switchHigh 传的就是左边列表的index 这样就错了 应该传图谱数据的列表对应的index因为传给图谱的chartList数组的数据里面有人有物 顺序是乱原创 2023-03-28 10:04:26 · 3707 阅读 · 0 评论 -
because it violates the following Content Security Policy directive: “img-src ‘self‘ data:base64“
在vue项目中的index.html文件中 修改。vue中放一张图片咋样都不显示,还报错,ma的。直接复制,替换掉 就ok。原创 2023-03-17 08:30:00 · 1594 阅读 · 0 评论 -
Vue事件修饰符的使用
在Vue中可以通过config.keyCodes自定义按键修饰符别名。例如,由于预先定义了keycode 116(即F5)的别名为f5,因此在文字输入框中按下F5,会触发prompt方法,出现alert。alert('我是 F5!');} } });在Vue中,使用v-on来给元素绑定事件,而为了更好的处理逻辑方面的事物,Vue提供了一个methods。在methods中定义一些方法,这些方法可以帮助我们处理一些逻辑方面的事情。原创 2023-03-10 08:45:00 · 398 阅读 · 0 评论 -
浅谈vuex之mapState用法
虽然state和data有很多相似之处,但state在使用的时候一般被挂载到子组件的computed计算属性上,这样有利于state的值发生改变的时候及时响应给子组件.如果你用data去接收$store.state,当然可以接收到值,但由于这只是一个简单的赋值操作,因此state中的状态改变的时候不能被vue中的data监听到,当然你也可以通过watch $store去解决这个问题,那你可以针是一个杠精。4、在界面或组件中不使用mapState获取模块modules vuexTest中state的状态。原创 2023-03-08 10:29:20 · 4197 阅读 · 0 评论 -
解决vue+TS项目中报错:Cannot read property ‘push‘ of undefined
解决vue+ts中报错:Cannot read property ‘push’ of undefined。原创 2023-02-24 09:52:26 · 914 阅读 · 0 评论 -
vuex中 this.$store.dispatch() 与 this.$store.commit()
this.$store.dispatch() :含有异步操作,例如向后台提交数据,写法:this.$store.dispatch(‘action方法名’,值)dispatch 调用的数 vuex 中 action 里的方法,action 中可以调用 mutation 中的函数,也可执行异步操作;this.$store.commit():同步操作,,写法:this.$store.commit(‘mutations方法名’,值)commit 调用的是 vuex 中 mutation 里的方法,存在同步限制;原创 2023-01-30 08:45:00 · 1325 阅读 · 0 评论 -
vue2.x中的provide和inject用法
慎用 provide / inject既然 provide/inject 如此好用,那么,为什么 Vue 官方还要推荐我们使用 Vuex,而不是用原生的 API 呢?答: 前面提到过,Vuex 和 provide/inject 最大的区别:Vuex 中的全局状态的每次修改是可以追踪回溯的,而 provide/inject 中变量的修改是无法控制的。换句话说,不知道是哪个组件修改了这个全局状态。原创 2023-01-22 10:00:00 · 9193 阅读 · 0 评论 -
Vuex状态管理-mapState、mapMutations、mapActions
对象的扩展运算符(…对象的第三个属性是一个string类型,nameAlias: ‘name’,映射 this.nameAlias 为 store.state.name的值, 和第一个属性的用法本质是一致的,不过这里映射出的计算属性的名称与 state 的子节点名称不同。对象的第四个属性是一个普通函数,普通函数和箭头函数的不同之处在于,普通函数中的this指向了vue实例,因为可以访问到当前组件的局部状态,比如this.tempcount。于是可以将组将内的计算属性和获取vuex状态的计算属性写在一起了。原创 2022-11-14 16:59:52 · 1319 阅读 · 0 评论 -
JS给数字添加千位分隔符
涉及的数据比较多,写一个过滤器,将所有的数据都过滤一下,挂载到全局,不需要每个页面引用了。创建一个js文件,实现数字千位分隔符。在 main.js 文件中引入。原创 2022-09-24 06:00:00 · 2020 阅读 · 1 评论 -
vue 项目实现水印效果
具体就是这些啦希望能帮到你有问题留言!我是在app.vue总引入的。原创 2022-07-21 15:29:31 · 3830 阅读 · 2 评论 -
后端传给xml格式文件前端要求导出word文件
这是后端接口直接上代码over原创 2022-06-27 11:05:52 · 735 阅读 · 4 评论 -
思维导图Vue2组件
一个由MindNode启发的思维导图Vue组件,基于d3.js实现目前实现的功能有基本的编辑、拖移、缩放、撤销、上下文菜单、折叠…npm install @hellowuxin/mindmap交互逻辑鼠标:space+左键移动、右键菜单、ctrl+滚轮缩放、左键选中触控板:双指滚动移动、双指菜单、双指捏合缩放、单指选中...原创 2022-06-16 13:36:00 · 2658 阅读 · 3 评论 -
JS将DOM导出为图片的方法
今天遇到个需求,需要将页面中显示的思维导图或者echarts图标导出为图片文件,但是不想用自带的导出方法,虽然自带的很方便,香,那么,可以怎么搞呢,请听我娓娓道来。原创 2022-06-08 15:58:50 · 1511 阅读 · 0 评论 -
[Vue] mounted阶段获取不到dom的原因及解决方法
问题描述需要在dom渲染后,获取dom来进行页面自动滚动到需要的位置。在mounted阶段用document.querySelector()以及this.$refs获取元素均获取不到。用两种方式获取元素,打印出来的结果都是undefined。有解答说用this.nextTick(function(){…}),试了一下在我这个场景中,结果还是undefined分析原因在mounted阶段,若需要获取的元素或组件有v-if,v-for属性。v-if的初始化结果为false。v-for遍历的数组初始化原创 2022-05-09 19:00:00 · 9774 阅读 · 0 评论 -
前端封装自循环调用接口拿到分页接口的全部数据
背景:分页请求接口数据,每页有最大请求条数限制。但前端需要一次性获取到全部数据,那么前端就需要循环调用接口,直到获取到全部的数据。封装方法getAllData.jsexport async function callMethodLimitPage (fn, param, pageIndex, arr) { let pageSizeMax = 500 // if (param.pageSize && param.pageSize > 100) { // pageS原创 2022-04-28 18:03:39 · 2239 阅读 · 1 评论 -
前端实现数字自增动态效果
如图所示,在请求到数据之后,数据会从零开始加载,这样的一个动态效果<div class='item-wrap'> <div class='num'> <WAutoAddNumber ref='totalRef' from='0' :to='total.num' :formatter='cutOutNum'></WAutoAddNumber> <span>{{ total.unit }}</span> .原创 2022-04-14 20:00:00 · 1619 阅读 · 1 评论 -
vue强制更新数据 this.$forceUpdate()
使用Vue开发时,在函数中改变了页面中的某个值,在函数中查看是修改成功了,但在页面中没有及时刷新改变后的值;赋值玩以后,执行下面这个方法 强制刷新数据。this.$forceUpdate()原创 2022-04-13 15:40:03 · 812 阅读 · 0 评论 -
解决echarts数据更新了图表不更新
做echart图表的时候,如果数据是从接口获取的,那当重新请求接口,数据发生变化的时候echart图表却还是维持原样不更新咋搞???放心! 有3种方法请听我娓娓道来!<div id="echart" ref="echart"></div>//获取数据后加载获取echart的方法this.$refs["echart"].getChart();getChart() { let option = { ... xAxis: [ data: this.dat原创 2022-04-12 17:28:08 · 10444 阅读 · 16 评论 -
vue全局注册自定义指令防抖
1、先建一个js文件建一个debounce.js文件,放在src/directives文件夹里面export default (vue) => { /** * 绑定方法 * @param {Object} el - The element the directive is bound to. * @param {Object} binding - An vue directive object */ vue.directive('debounce', { //防抖原创 2022-04-07 19:00:00 · 1323 阅读 · 2 评论 -
解决vue报错Unknown custom element: <el-descriptions> - did you register the component
报错如图所示报错原因原因是因为 组件是 element-ui 2.15.6 之后才开始更新的,如果你的项目用的是 2.13.5 版本,那么加载 组件就会报错。解决办法将 element ui 更新到最新版本即可。// 使用git命令npm uninstall element-uinpm i element-ui -S完事!!!...原创 2022-04-02 13:43:38 · 3620 阅读 · 1 评论 -
this.$set的使用详解
this.$set(obj, key, value)我们在项目开发的过程中,经常会遇到这种情况:为data中的某一个对象添加一个属性<template> <div class="hello"> <button @click="setMessage">添加属性</button> {{ student.name }} <input type="text" v-model="student.age"> </div原创 2022-04-01 13:43:47 · 699 阅读 · 0 评论 -
解决element el-form打开模态框时就进行表单验证的问题
写在前面的话在项目中,经常需要一些校验字段名是否存在的表单验证,比如设置密码时要进行特殊字符校验等问题描述最近遇到一个奇怪的问题,在打开修改模态框未做任何修改时,就自动触发了一次校验,提示用户名已存在或者刚打开新增模态框未进行任何操作,就自动进行了校验,提示各个字段不能为空。然后jb测试就给提了一个单解决方法我找啊找 找啊找 认真看饿了么文档,发现el-form有一个属性我就在代码上加上 <el-form :model="resetForm" ref="resetForm" :ru原创 2022-03-29 16:29:33 · 2987 阅读 · 2 评论 -
利用keep-alive实现tabs标签切换时缓存页面
<template> <div> <Card> <Tabs @on-click="handleTabClick"> <TabPane label="module1"></TabPane> <TabPane label="module2"></TabPane> <TabPane label="module3"></TabPan原创 2022-03-23 17:31:06 · 731 阅读 · 1 评论 -
SpringBoot + Vue :Kaptcha验证码案例
验证码作用防止暴力破解防止广告机注册等操作1、导入Kaptcha依赖<dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactId> <version>2.3.2</version></dependency>2、配置Config类@Configurationpublic cla原创 2022-03-22 15:35:53 · 342 阅读 · 0 评论 -
VUE报错:[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever......
其原因是我从父组件向子组件传值时,用props接收之后,我在子组件中直接修改了接收的参数的值。例如://接收了两个参数:一个数组,一个字符串props:["list","type"]......//做了一些修改,比如合并了一个新数组this.list=this.list.concat(newList)这时候再使用list这个数据就会报错。原因:由于Vue内部的机制,传入的props中的值是不允许被修改的。在新的渲染机制中,当父组件重新渲染时,子组件都被会覆盖,这时的props是不可.原创 2022-03-10 13:52:51 · 2173 阅读 · 0 评论 -
vue父组件中调用子组件的方法
方案一:通过ref直接调用子组件的方法//父组件中<template> <div> <Button @click="handleClick">点击调用子组件方法</Button> <Child ref="child"/> </div></template> <script>import Child from './child';export原创 2022-03-02 11:58:02 · 239 阅读 · 0 评论 -
ElementUI el-upload上传图片限制, before-upload 不生效问题
因为 before-upload 是指在文件上传之前、文件已被选中,但还没上传的时候触发,而设置了 :auto-upload=“false” 后,文件上传事件不被再次调用,,所以 before-upload 不生效,所以,限制图片大小和格式的时候,需绑定在 :on-change 里面 <el-upload class="upload-demo uploadTwo" ref="fileUploadRef" :action="fileUrl + 'order/mdm/partpred原创 2022-02-26 09:00:00 · 7029 阅读 · 1 评论 -
vue中click阻止事件冒泡,防止触发另一个事件
在使用el-upload组件时,在其中放置了一个删除按钮的图片。当点击图片,本想只删除上传的视频,但是意外触发了el-upload中的事件解决方法:<i class="el-icon-plus avatar-uploader-icon deleteIcon" @click.stop="deleteImage"></i>用stop,结果只删除当前预览,不触发上传事件...原创 2022-02-25 11:11:17 · 609 阅读 · 0 评论