Vue
文章平均质量分 92
# Vue
慕白Lee
业精于勤荒于嬉,行成于思毁于随。 学业由于勤奋而专精,由于玩乐而荒废;德行由于独立思考而有所成就,由于因循随俗而败坏。 ——出自(唐)韩愈《进学解》
展开
-
【Vue】多选框保留勾选数据
第一阶段:一开始是定义了两个集合用来保存:data的数据, 集合数据动态切换变化的时候直接获取最新的, 但是缺点是不能保存勾选状态.第二阶段:发现只能操作原:data的数据, 所谓的checked再往回赋值根本没用. 缺点是数据操作和列表数据模糊查询不能实现.第三阶段:发现了reserve-selection这个东东, 近乎完美解决问题总结:遇到问题先别急着造轮子, 大概率有对应的功能标签了, 一般的业务根本触及不到vue的设计缺陷的...原创 2023-03-19 22:34:04 · 11841 阅读 · 0 评论 -
【Vue】子组件父组件传值+刷新子组件
如果你使用Vuex进行状态管理,可以在父组件中提交一个mutation或action来改变状态,然后在子组件中使用计算属性或watcher来响应状态的变化,从而刷新数据。绑定事件处理函数时,可以不带括号,形参则默认为事件对象,如果绑定时带上了括号,再想使用事件对象则需要传入$event作为实参。绑定事件处理函数时,不能携带括号!你可以通过改变子组件的`key`属性来强制重新渲染子组件。父组件可以发出一个事件,子组件在`created`或`mounted`钩子中监听这个事件来执行刷新操作。原创 2022-10-16 22:04:41 · 39171 阅读 · 0 评论 -
【Vue】超详细整理(VIP典藏版)
MVVMMVVM(Model-View-ViewModel)是一种软件设计模式,由微软WPF(用于替代WinForm,以前就是用这个技术开发桌面应用程序的)和Silverlight(类似于Java Applet,简单点说就是在浏览器上运行WPF)的架构师Ken Cooper和Ted Peters开发,是一种简化用户界面的事件驱动编程方式。由John Gossman(同样也是WPF和Sliverlight的架构师)与2005年在他的博客上发表。原创 2020-01-08 16:17:03 · 44434 阅读 · 0 评论 -
【Vue】父组件子组件的通信方式20种(全网最全总结)
目录Props:父组件向子组件传递数据,子组件通过props属性接收数据父组件:子组件:$emit和$on:子组件向父组件传递数据,子组件通过$emit触发事件,父组件通过$on监听事件并接收数据。父组件:子组件:$parent和$children:父组件向子组件传递数据,父组件通过$children获取子组件实例并调用子组件方法传递数据。父组件:子组件:$attrs和$listeners:父组件向子组件传递属性和事件,子组件通过$attrs获取属性,通过$listeners获取事件并绑定在子组件上。父组件原创 2023-07-11 20:36:45 · 9906 阅读 · 23 评论 -
【Vue】created、mounted、updated详解
对浏览器来说,已经完成了dom与css规则树的render,并完成对render tree进行了布局,而浏览器收到这一指令,调用渲染器的paint()在屏幕上显示,而对于vue来说,在mounted阶段,vue的template成功挂载在$el中,此时一个完整的页面已经能够显示在浏览器中,所以在这个阶段,即可以调用节点了(关于这一点,在笔者测试中,在mounted方法中打断点然后run,依旧能够在浏览器中看到整体的页面)。通过浏览器的渲染过程,可以总结出created和mounted的使用场景。原创 2022-10-16 22:50:36 · 64527 阅读 · 18 评论 -
【Vue】项目dialog组件数据项清空
第一次打开dialog就不重置了, 这样第一次dom也构建完毕了, 不会存在获取不到的情况, 第二次的时候在使用this.$refs['myForm'].resetFields();数据清空报错, 发现只有第一次渲染才会报错, 后面就正常了,原创 2023-05-06 17:38:20 · 10467 阅读 · 0 评论 -
【Vue】居中居左居右样式总结
另外,还可以使用 Flex 布局来实现。例如,将按钮所在的容器元素设置为 Flex 容器,并使用 `justify-content: center` 属性来实现水平居中显示。示例如下:```vue。上面的代码中,我们将按钮所在的容器元素设置为 Flex 容器,并使用 `justify-content: center` 属性来实现水平居中显示。上面的代码中,我们在按钮所在的容器元素上添加了 `text-align: center` 样式,来实现按钮居中显示。原创 2023-06-13 16:17:02 · 26257 阅读 · 3 评论 -
【Vue】标签页el-tabs常用写法
【代码】Vue页签的常用写法。原创 2023-03-19 21:26:46 · 16568 阅读 · 0 评论 -
【Vue】中el-table数据项扩展各种类型总结(持续更新)
在这个示例中,我们将el-link放置在el-table-column的作用域插槽中,并使用scope.row来访问每个数据项的属性。在这个示例中,我们将el-select放置在el-table-column的作用域插槽中,并使用scope.row来访问每个数据项的属性。在上面的例子中,我们使用了el-table-column来定义列,同时使用了slot-scope来访问每一行的数据。这样,我们就可以在el-table的数据项中使用动态的el-tag了,每个人的标签会根据不同的类型显示不同的样式。原创 2023-07-11 20:24:31 · 5293 阅读 · 29 评论 -
【Vue】字符串,对象,集合常用方法与代码示例(珍藏版)
在 Vue.js 中,字符串操作通常不是由 Vue 自身提供的功能,而是直接使用 JavaScript 中的字符串方法。以下是一些常见的 JavaScript 字符串操作方法,这些方法在 Vue.js 中同样适用。原创 2023-07-06 16:43:44 · 3390 阅读 · 19 评论 -
【Vue】浏览器缓存sessionStorage、localStorage、Cookie
sessionStorage用于在浏览器会话期间存储数据。当用户关闭浏览器标签页或窗口时,存储在sessionStorage中的数据将被清除。原创 2023-09-13 17:01:13 · 4019 阅读 · 56 评论 -
【Vue】JS处理科学计数法字符串
因为存在4.0E-12和4.0E+12,就是e前面可能是+ /- , 如果是e+12大于小数点之后的位数则应该是一个正整数,否则是一个小数,所以这里需要再进行一次格式化,判断是一个小数或者是一个整数,最简单的方式就是使用。parseInt(cell)==parseFloat(cell),如果相等则是整数,否则是小数。如果没用指定的精度,就想显示全部则可以把E后面的数字提取出来就可以了。如果有指定的精度precision,则直接使用。原创 2022-10-20 23:43:34 · 1971 阅读 · 14 评论 -
【Vue】字符串数组模糊查询方法
疑问、交流、鼓励请留言!原创 2023-03-19 22:45:34 · 11007 阅读 · 0 评论 -
【Vue】监听Enter键
在上述代码中,`@keyup.enter.native`修饰符绑定到输入框上,当用户释放按键时,如果按下的是Enter键,则会调用`handleEnterKey`方法来处理逻辑。在上面的代码中,`@keydown.enter`指令绑定到输入框上,当用户按下Enter键时,会调用`handleEnterKey`方法来处理逻辑。`@keydown.enter`和`@keyup.enter.native`都可以用于监听Enter键的按下事件,但它们之间存在一些区别。你可以根据自己的需求选择其中一种方式来实现。原创 2023-09-11 19:46:59 · 6232 阅读 · 18 评论 -
【Vue】科学计数法常见处理
在上述示例中,number的初始值为科学计数法表示的数字1.23e+6。然后,使用Number()将其转换回数字,并使用toExponential()方法将其转换为科学计数法表示的字符串"1.23e+6"。在计算属性formattedNumber中,我们将这些方法应用到number数据上,并返回一个包含了格式化、保留小数、解析字符串、检查数值的结果的字符串。在Vue中,可以使用JavaScript的内置方法toExponential()来处理科学计数法,并结合toFixed()方法来保留指定小数位数。原创 2023-10-17 16:25:45 · 2151 阅读 · 50 评论 -
【Vue】this.$refs.xxx 报错undefined解决办法
因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$refs 也不是响应式的,因此你不应该试图用它在模板中做数据绑定。适用于特定场景, 然后第一次渲染不执行,需要注意的是定义的变量需要在子组件下, 不然也是获取不到的。,如果你使用v-if 、v-for渲染页面的话,那么在刚开始页面没没渲染之前你是拿不到。的时候提示undefined, 一开始以为方式失灵了,后来是发现。的,所以要等到页面渲染之后拿才可以。调用子组件里的函数,页面初始化的时候调用。原创 2023-07-03 21:25:34 · 6777 阅读 · 0 评论 -
【Echarts】一文快速上手Echarts(持续更新)
如示例代码中的dataFormatter方法就是将原始数据进行格式化,转换为Echarts图表渲染所需要的形式,将Echarts官网的图表对应代码迁移到Vue文件中。如示例代码中的option、dataMap等,它们保存了一些原始数据或者Echarts图表渲染的属性值等。这行代码的意思就是将Echarts引入到Vue文件中,然后就可以直接使用Echarts的功能了。那肯定代码错了呗, 你对比对比上面的代码。以该例为例,是如下代码。选择一个最基本的柱状图吧。原创 2022-10-29 12:33:29 · 139990 阅读 · 19 评论 -
【Vue】日常错误总结(持续更新)
中组件props中的数据只能单向流动,即只能从父组件通过组件的DOM属性attribute传递props给子组件,子组件只能被动接收父组件传递过来的数据,并且在子组件中,不能修改由父组件传来的props数据。当你监听路由变化时,如果在回调函数中使用了this关键字,它将指向新创建的组件实例,而不是之前的组件实例。在上面的代码中,我们在 `el-form-item` 的 `label` 属性和 `v-if` 判断条件中都使用了表达式,因此应该将它们放在一对花括号中。原创 2023-12-09 17:08:08 · 2472 阅读 · 36 评论 -
【Vue】日常小知识总结(持续更新)
初始化默认参数, vue2会把内存地址也复制过去,当params里面的值修改后, this.defParams也会相应改动,所以要先复制一份再赋值给this.params。中组件props中的数据只能单向流动,即只能从父组件通过组件的DOM属性attribute传递props给子组件,子组件只能被动接收父组件传递过来的数据,并且在子组件中,不能修改由父组件传来的props数据。改动了子组件中引用的父组件的变量,也就是props中的数据。原创 2023-11-13 15:28:49 · 1542 阅读 · 38 评论 -
【Vue】props默认值类型有哪些
在Vue中,props的默认值类型可以是字符串、数字、布尔、对象、数组或函数。在 Vue.js 中,组件之间的数据传递主要依赖于 `props`。`props` 是父组件用来传递数据给子组件的自定义属性。原创 2023-07-06 09:49:57 · 4958 阅读 · 28 评论 -
【Vue】监控路由与路由参数, 刷新当前页面数据的几种方法
在这个示例中,我们在组件的`data`选项中定义了一个`monitoredParam`属性,用于存储监控的参数值。当监控的参数发生变化时,`watch`函数会被触发,将新的参数值保存到组件的`monitoredParam`属性中。在这个示例中,我们在组件的`data`选项中定义了一个`monitoredRoute`属性,用于存储监控的路由信息。当路由发生变化时,`watch`函数会被触发,将新的路由信息保存到组件的`monitoredRoute`属性中。原创 2023-09-27 10:45:48 · 10765 阅读 · 53 评论 -
【Vue】学习路线图(VIP珍藏版)
MVVMMVVM(Model-View-ViewModel)是一种软件设计模式,由微软WPF(用于替代WinForm,以前就是用这个技术开发桌面应用程序的)和Silverlight(类似于Java Applet,简单点说就是在浏览器上运行WPF)的架构师Ken Cooper和Ted Peters开发,是一种简化用户界面的事件驱动编程方式。由John Gossman(同样也是WPF和Sliverlight的架构师)与2005年在他的博客上发表。原创 2023-12-07 10:49:13 · 3665 阅读 · 35 评论