![](https://img-blog.csdnimg.cn/124b0765040d42cfac0d06f87bd66811.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue3
vue3学习及问题记录
前端打工人
这个作者很懒,什么都没留下…
展开
-
Element-plus中 el-button按钮点击之后颜色不还原的问题
的默认策略鼠标按下后处于 focus 状态,也就是看上去没有恢复成原来的颜色(此时是focus样式被激活)。修改这个问题非常简单,不过不应该破坏w3标准的默认策略,因为网页访问者有正常人、残障人、机器人等,可能会破坏其他使用者的操作。第一种方法:可以通过css解决,这样可能会引起一些效果失效,点击之后,再次点击hover效果没有了,link等类型的按钮这样设置无效,不建议修改。经过一番搜索发现问题所在,鼠标点击之后处于focus状态,所以看上去没有恢复成原来的颜色(此时是focus样式被激活)原创 2024-06-24 14:37:18 · 506 阅读 · 1 评论 -
el-table 多选表格存在分页,编辑再次操作勾选会丢失原来选中的数据
el-table表格多选时,只需要添加row-key及,如果存在分页时需要加上,这里就不写具体的实现方法了,可以查看我之前的文章,这篇文章主要说一下存在的问题。原创 2024-02-27 15:39:01 · 1668 阅读 · 0 评论 -
Vue3自定义指令directives介绍
Vue内置的一系列指令 ,比如v-modelv-showv-ifv-for等等,自定义指令从命名上看主要区别于Vue自带的内置指令,我们可以创建自己想要的指令,使用必须以v-为前缀created:在绑定元素的 attribute 或事件监听器被应用之前调用;:当指令第一次绑定到元素并且在挂载父组件之前调用;mounted:在绑定元素的父组件被挂载后调用,大部分自定义指令都写在这里;:在更新包含组件的 VNode 之前调用;updated。原创 2023-10-10 17:23:43 · 1231 阅读 · 0 评论 -
vue3中动态设置ref,如表格中使用级联选择器
中有一个表格,表格里是表单项,用户可以输入或选择,有一项是一个级联选择器,需要使用到。是有问题的,选择后,第一次获取返回空,第二次获取的是第一次选择的数据。是不行的,这个ref是需要动态设置才行。思考:直接加上索引不就行了吗?数据源是一个级联选择器,如果这个表单直接设置。记得要定义一下,名字自己随便起,保持一致就行。方法获取到这一项选择的数据。是的,没错,请看下图这样设置。原创 2023-10-09 09:39:53 · 612 阅读 · 0 评论 -
vue3 中使用 keep-alive 不生效的原因,及keep-alive使用详细介绍
keep-alive是vue提供的一个组件,它可以将组件缓存起来,避免在组件切换时,每次都重新渲染,从而提高页面性能和用户体验。因此,keepalive被广泛应用于一些需要频繁切换路由或组件的应用中。keep-alive是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-alive是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。原创 2023-07-25 14:04:44 · 12780 阅读 · 0 评论 -
vue 中 import引入相同的方法名称解决方法
当引入了2个不同的文件,方法名称list都是一样的,就会出现报错。如果之前文件用的地方比较多,直接改名称的话,可能会漏掉,会引起不必要的麻烦,那如何解决呢。原创 2023-06-28 16:45:08 · 1969 阅读 · 0 评论 -
vue3 中 ref、reactive、shallowRef、shallowReactive的区别详解
vue3 中 ref、reactive、shallowRef、shallowReactive的区别reactive:深度劫持(深监视)shallowReactive:浅度劫持(浅监视)ref:深度劫持(深监视),做了reactive的处理shallowRef:不做监视readonly和readonly:只读属性的数据,深度只读shallowReadonly:只读的数据,浅只读的toRaw和markRawtoRaw将代理对象变成普通对象,数据变化,界面不会进行更新。原创 2023-06-14 11:42:59 · 1940 阅读 · 1 评论 -
vue3中获取proxy包裹的数据,拿到原始对象
通过vue中的响应式对象可使用。原创 2023-02-21 17:55:08 · 3915 阅读 · 1 评论 -
在vue3中实现filters过滤器功能
中的过滤器,但是变相一下,可以在双括号表达式中使用方法,所以也是可以间接实现的,功能简单,请看下面实例代码。原创 2023-02-06 17:26:56 · 4164 阅读 · 0 评论 -
vue3 不支持 .native,vue3中.native的使用方法
是因为`.native`修饰符在`vue3`中被弃用了,那如何使用呢?解决方法:把...原创 2023-02-06 11:43:14 · 4658 阅读 · 0 评论 -
vue3中 /deep/ 的使用,vue3不支持/deep/样式
vue2中是使用/deep/样式穿透,在vue3中不支持了,vu3中使用:deep()取代了。原创 2023-02-06 11:32:12 · 1646 阅读 · 0 评论 -
vue3 中使用el-dropdown时,slot报错解决方法
vue3 中使用el-dropdown时,页面显示报错,vscode也会有报错提示是因为vue 3.x 增加了v-slot的指令,去掉了原来的slot,slot-scope属性。原创 2023-02-03 17:07:17 · 2161 阅读 · 1 评论 -
vue2 转 vue3 代码详细介绍,如data数据转成ref、reactive
vue2中的data()内是用来定义变量的,如data() {return {form : {而在vue3里我们使用ref()定义简单数据类型,reactive()定义复杂数据类型在这里我建议不要用reactive声名数据类型,因为它不支持直接赋值,只能为里面的子对象赋值,可以根据自己需要选择,所以上述代码可以写成在标签里,若是vue2,可以直接使用this.type调用这个变量,但是在vue3中不可以使用this,在调用变量时,直接用type.value注:若在。原创 2023-02-03 17:01:37 · 1820 阅读 · 0 评论 -
vue3中 ref 和 reactive 的区别介绍
创建的响应式对象,整个对象是响应式的,而对象里的每一项都是普通的值,当你把它用展开运算符展开后,整个对象的普通值都不是响应式的。通常使用reactive()来创建一个响应式的对象或数组,这样的对象或数组状态都是默认深层响应式的,无论嵌套多深,都能跟踪到。并且假如用一个新对象替换了原来的旧对象,那么原来的旧对象会失去响应性。创建的响应式对象,又不想让他们失去响应式特点的时候,就需要用。允许我们创建一个任意类型的响应式的ref对象,在使用时需要带上。创建的响应式的值,本身就是响应式的,并不依赖于其他对象。原创 2023-02-03 16:34:32 · 2030 阅读 · 2 评论