vue
vue
学习前端的渣渣
正在学习前端的渣渣
展开
-
elementUI中el-upload的使用以及遇到的坑(手动上传案例)
做项目时遇到一个需求,支持同时上传多个图片。element-ui 的 upload 组件支持多选文件,只需要配置参数 multiple 为 true 即可。但是这个组件默认会将多选的文件分多次进行上传,于是就会存在多次的上传请求(即同时上传3个文件,会同时调用3次上传接口,如图),由于后台的接口要求是一次请求能够上传多个文件,且我们也知道请求多了会对服务器造成更大的压力。那么就要想办法解决上诉问题,也就是说无论用户同时上传多少个文件,都只调用一个上传接口。原创 2023-06-26 11:39:44 · 10619 阅读 · 1 评论 -
vue中下载文件,后端返回文件流,前端进行处理和文件下载以及遇到的坑
2、数据成功返回后,对数据进行处理。1、前端发起请求时的配置。例:返回的数据格式如下。原创 2023-06-25 16:47:29 · 2215 阅读 · 0 评论 -
elementUI中使用tooltip遇到的坑
按理来说disabled属性写在el-tooltip上会影响其可用性,但是万万没想到写在button上的disabled属性也会造成影响…在el-button外边嵌套了一个div,这样子操作能避免了el-button的disabled属性对el-tooltip显示的影响。原创 2023-04-25 16:08:21 · 3641 阅读 · 1 评论 -
.vue2+elementUI的实现表格导出以及遇到的问题
后面在网上查找,说是下载依赖版本的原因,然后将原来的卸载了,重新下载了一下版本,发现就没有这个问题了。按照这样的步骤编写代码之后,发现会出现这个错误。原创 2023-04-14 11:44:48 · 473 阅读 · 0 评论 -
element-ui使用Cascader 级联选择器遇到的问题
方法1:将radio隐藏,扩大选中区域,点击红色框的区域选中值,点击箭头所在蓝色框的区域,展示子选项。方法2:修改次级菜单的展开方式,默认的是‘click’,鼠标移入时展示子选项。具体为啥不知道,然后通过百度尝试了各种方法解决了这个问题。,但是这种方式,当嵌套过深的时候,体验就不是很好。原创 2023-04-11 17:00:01 · 1168 阅读 · 3 评论 -
element-ui中Dialog 对话框嵌套form表单使用label-width=“auto“遇到的坑
Dialog 对话框嵌套form表单,弹出框中的表单使用label-width=“auto”属性,在离开页面的时候就会报错(虽然不影响使用,但是控制台报错看着很烦)因为项目中auto需要auto达到自适应效果,所有只能采用第二种方法。但是Dialog 使用的又是v-show来控制的显示与隐藏,这又怎么修改为v-if呢。在网上查阅了很多,主要提供了两个办法。然后又在网上查找解决办法,例如。原创 2023-04-06 18:23:04 · 1434 阅读 · 0 评论 -
element-ui在下拉选项框中添加一个按钮,实现子选项的添加
【代码】element-ui在下拉选项框中添加一个按钮,实现子选项的添加。原创 2023-03-28 16:59:40 · 1637 阅读 · 0 评论 -
element-ui使用Cascader 级联选择器遇到的坑
按照官网给的教程使用,当级联选择器内容需要动态变化时,会爆出Cannot read property ‘level’ of null错误。原创 2023-03-28 16:41:52 · 705 阅读 · 0 评论 -
Vue使用Element的级联选择器Cascader,选中后下拉框自动关闭
在级联选择器@change方法中,监听变化,首先添加一个ref=“cascaderHandle”,在@change绑定的方法中监听:this.$refs.cascaderHandle.dropDownVisible = false;原创 2023-03-23 18:33:27 · 2267 阅读 · 0 评论 -
vue element-ui el-input输入框绑定@keyup.enter回车事件无效
由于element-ui把input进行了封装,input外面是多一层div的。所以对于el-input,使用 @keyup.enter是无效的,需要加上。或者也可以直接input标签。原创 2022-11-21 12:00:21 · 5319 阅读 · 0 评论 -
vue2动态表单验证与表单多层嵌套验证
普通表单验证单项依靠的是prop…而动态生成的表单要用:prop。注意v-for,要将。原创 2022-11-11 11:39:12 · 2975 阅读 · 0 评论 -
elementUI如何实现按需引入和全局引入?
【代码】elementUI如何实现按需引入和全局引入?原创 2022-09-19 13:36:15 · 878 阅读 · 1 评论 -
vue中的插槽slot
将子组件中data的数据传出,在父组件中使用。子组件渲染作用域插槽时,可以将子组件内部的数据传递给父组件,让父组件根据子组件的传递过来的数据决定如何渲染该插槽。slot中的内容进行替换,此时可以为插槽传递数据,若存在数据,则可称该插槽为作用域插槽。实现原理:当子组件vm实例化时,获取到父组件传入的slot标签的内容,存放在vm.slot.default,具名插槽为vm.为插槽名,当组件执行渲染函数时候,遇到。原创 2022-09-18 21:55:19 · 362 阅读 · 0 评论 -
vue中的mixin混入
这不是Vue的专属的,可以说是一种思想,在很多开发框架中都实现了Mixin。mixin提供了一种非常灵活的方式,来分发Vue组件中可复用的功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。将组件的公共逻辑或者配置提取出来,哪个组件需要用到时,直接将提取的这部分混入到组件内部即可。这样可以减少代码冗余度,也可以让后期维护起来更加容易。原创 2022-09-18 20:46:17 · 1190 阅读 · 0 评论 -
vue中keep-alive的作用
keep-alive是Vue提供给我们的一个内置组件,会缓存不活动的组件实例,而不是销毁它们。作为标签使用包裹这需要缓存的组件。原创 2022-09-17 22:13:36 · 1794 阅读 · 0 评论 -
Vue中extend的学习
只有在触发事件的时候,才产生某组件,平时它并不存在;原创 2022-09-17 19:07:44 · 823 阅读 · 1 评论 -
vue与react的区别?
# 1、相同点 1. 都是使用了虚拟DOM; 2. 父子组件都是单向数据流; 3. 都采用了组件化开发;# 2、不同点 1. react是数据单向流,vue是双向数据流; 2. react编码用的是jsx,vue用的是template; 3. 状态集中管理,react用的mobx、redux,vue用的是vuex(vue2)、pinia(vue3); 4. 数据变化,react 手动 setState vue自动响应式处理 proxy object.DefineProperty原创 2022-09-16 13:41:55 · 163 阅读 · 0 评论 -
Vue Router路由学习
根据用户给出的url地址,导航到不同组件中;原创 2022-09-09 23:06:25 · 330 阅读 · 0 评论 -
vue2全家桶-vuex
一般情况下,只有组件之间共享的数据,才有必要存储到vuex中,对于组件中的私有数据,依旧存储在组件自身的data中即可。通过将导入的mapMutations函数,将需要的mutations函数,映射为当前组件的methods方法。通过将导入的mapGetters函数,将当前组件需要的全局数据,映射为当前组件的computed计算属性。通过将导入的mapState函数,将当前组件需要的全局数据,映射为当前组件的computed计算属性。Vuex是实现组件全局状态(数据)一种管理机制,可以方便的实现组件之间。原创 2022-09-08 12:13:56 · 402 阅读 · 0 评论 -
vue2+ElementUI二级联动下拉框组件的简单封装
【代码】vue2+ElementUI二级联动下拉框组件的简单封装。原创 2022-09-06 15:18:31 · 1378 阅读 · 0 评论 -
vue中时间戳转换为日期格式的方法封装
在需要转换的地方使用过滤器进行过滤,如果很多地方都需要转换,那么可以在main.js中写成全局过滤器。原创 2022-09-05 09:15:29 · 631 阅读 · 0 评论 -
vue2和vue3响应式的理解及如何进行依赖收集
响应式数据:数据改变了,对应的视图也会改变;原创 2022-09-04 20:40:20 · 260 阅读 · 0 评论 -
vue组件中的data为什么必须是一个函数?
通过上面的例子可以看出,多个组件引入了这个组件作为子组件,在视图层修改输入框的数据,视图层中所有输入框的数据都发生了改变;如果每个父组件有属于自己的逻辑,修改了以后,也会对其他父组件造成影响,因为他们共用了一个data。组件是可复用的实例;当每次复用这个组件的时候,返回的都是一个新的data,如果单纯的写出对象的形式,那么所有的组件实例共用一个data,造成数据污染。data作为函数每次一个新返回对象,修改视图层的输入框值,可以看出其他引入了这个组件的父组件中的输入框的值是未发生改变的。原创 2022-09-04 20:08:22 · 98 阅读 · 0 评论 -
vue中数据双向绑定v-model的原理
数据双向绑定是两个指令的结合:v-bind、v-on;原创 2022-09-04 17:11:49 · 70 阅读 · 0 评论 -
vue中组件之间的通信
不能直接对传递过来的数据进行修改,如果需要修改,子组件需要一个data去接收传递过来的数据,然后修改data。不能直接对传递过来的数据进行修改,如果需要修改,父组件需要一个data去接收传递过来的数据,然后修改data。通过prop(可以在组件上注册一些自定义的属性)向子组件传递数据;通过自定义事件向父组件传递数据;来触发事件,传递数据,原创 2022-09-04 16:38:14 · 149 阅读 · 0 评论 -
vue中父子组件之间的访问方式-$children-$refs-$parent
通过$parent获取父组件的数据,实际开发中尽量少用,因为这样会导致耦合度太高了;通过这样直接修改父组件的数据或状态,使父组件的状态(数据)飘忽不定,不利于后期的调试和修改。需要和ref一起使用;通过属性去获取子组件,无论去掉哪个子组件,只要不把所对应的ref所删除,就一直可以放到到自己需要的子组件。缺点:需要通过索引才能拿到自己想要的子组件,如果删除了某个子组件,会影响到哪去的子组件的结果,$children返回的是一个。,包含所有的子组件对象;原创 2022-09-04 15:35:30 · 538 阅读 · 0 评论 -
vue中什么是$nextTick?
nextTick:将回调函数延迟到dom更新数据后调用。改变message前:改变message后:经过上面两张结果运行图比较,可以看出,message1拿到的是message改变的数据,是因为。原创 2022-09-04 15:05:32 · 156 阅读 · 0 评论 -
vue中如何使用自定义指令
指令:以“v-”开头的都是指令,不同的指令实现不同的功能;注册自定义指令:1、全局注册;2、局部注册使用时时候需要添加v-原创 2022-09-03 23:44:14 · 233 阅读 · 0 评论 -
vue哪些数组的方法可以直接对数组修改实现视图更新
【代码】vue哪些数据的方法可以直接对数组修改实现视图更新。原创 2022-09-03 23:28:12 · 2182 阅读 · 0 评论 -
vue中计算属性computed的特性和应用
基于template里面的{{ }}计算;处理props传值;:基于他们的依赖进行缓存,只要在他相关的依赖发生改变的时候,才会重新计算;原创 2022-09-03 23:04:25 · 248 阅读 · 0 评论 -
vue2中过滤器的使用(vue3中已舍弃)
vue3中已经舍弃了过滤器,因为使用计算属性也可以达到同样的效果过滤器:主要用于一些常见的文本格式化。可以在不改变原始数据的情况下,只是对数据进行加工处理,并且会返回过滤后的数据,再进行调用处理。原创 2022-09-03 22:23:29 · 426 阅读 · 0 评论 -
vue中常用的修饰符
【代码】vue中常用的修饰符。原创 2022-09-03 22:01:40 · 182 阅读 · 2 评论 -
vue中watch如何对对象进行深度监听
所以在使用对对象的深度监听时,要注意是否对整个对象进行深度监听(这样会极大的消耗性能),还是对对象中的某个属性进行监听。:是否深度监听,默认为false;监听器会一层一层的向下遍历,给对象的每一个属性添加一个监听器。:监听的对象发生变化后需要执行的方法;原创 2022-09-03 21:00:04 · 1131 阅读 · 0 评论 -
vue中ref的作用
1. 获取页面的DOM元素2. 用于组件之间的通信,获取子组件对象原创 2022-09-03 19:01:22 · 364 阅读 · 0 评论 -
vue中methods、computed与watch的区别
【代码】vue中methods、computed与watch的区别。原创 2022-09-03 18:24:34 · 100 阅读 · 0 评论 -
vue中常用指令及用法
【代码】vue中常用指令及用法。原创 2022-09-03 00:04:39 · 114 阅读 · 0 评论 -
vue中v-if和v-show的区别
两则都是控制元素是否在页面上显示;为真,才开始局部编译。任何条件下,都会编译。原创 2022-09-02 22:59:34 · 139 阅读 · 0 评论 -
vue中v-for和v-if为什么不建议在一起使用?
如果将两则放在一块,会先执行v-for循环出列表,再使用v-if去判断每一个项是否显示,容易造成性能的浪费;所以一般结合计算属性来使用:先通过计算属性过滤数组,然后再去渲染。原创 2022-09-02 22:37:16 · 165 阅读 · 0 评论 -
vue的生命周期的相关问题
1、vue的生命周期那几个?每一个生命周期的特点,可以做什么?原创 2022-08-07 00:11:48 · 900 阅读 · 0 评论 -
跨域问题的解决方法
代码】跨域问题的解决方法。原创 2022-07-30 16:52:02 · 237 阅读 · 0 评论