Vue
文章平均质量分 54
Vue 学习记录
Y_coder
这个作者很懒,什么都没留下…
展开
-
【Vue】导出Excel(xlsx和file-saver)
该方法会创建一个包含三列(姓名、年龄、职业)的二维数组,然后使用xlsx库将其转换为工作表,并添加到工作簿中。接着使用FileSaver库将工作簿保存为.xlsx格式的文件,并提供一个下载链接,最后清理URL。在Vue中导出Excel文件,可以使用第三方库如xlsx和file-saver。// 使用blob和FileReader创建一个Blob URL。// 假设你有一个表格数据的数组。// 使用saveAs下载文件。// 创建工作簿并添加工作表。// 将数据转换为工作表。// 生成Excel文件。原创 2024-03-28 10:28:09 · 667 阅读 · 0 评论 -
【Vue】监听div宽高的变化(动态渲染echarts宽高案例)
是一个现代的JavaScript API,它允许你监听元素的大小变化。// entries 是一个 ResizeObserverEntry 对象数组,包含目标元素的大小信息。// 在这里可以触发自定义的处理逻辑,例如将宽高信息传递给 Vue 组件的方法。的回调函数中,我们可以获取目标元素的新宽度和高度,并在。// 在这里可以执行你想要的操作,比如更新组件的状态。// 在组件销毁时停止监听,防止内存泄漏。元素的宽度和高度的变化,你可以使用。// 获取要监听的 div 元素。// 开始监听目标元素的大小变化。原创 2024-01-23 17:11:36 · 1153 阅读 · 0 评论 -
【Vue】使用require得到base64图片
`image://${base64Image}`原创 2023-11-23 16:56:10 · 237 阅读 · 0 评论 -
【Vue】使用.sync实现父子组件数据双向绑定
`.sync` 修饰符实际上是一种简写形式,它展开为一个包含 `v-on` 和 `v-bind` 的语法糖。在上述例子中,`:message.sync="message"` 实际上是 `:message="message" @update:message="message = $event"` 的缩写形式原创 2023-11-23 15:52:12 · 224 阅读 · 0 评论 -
【Vue】组件二次封装小技巧 — 利用$slots接收插槽
通过使用v-for和$slots来动态渲染插槽名,你可以实现更灵活的组件,让父组件能够以动态方式定义插槽内容。这使得组件更具通用性,适应各种不同的用例和需求。原创 2023-11-08 10:20:52 · 800 阅读 · 0 评论 -
【Vue】组件封装小技巧 — 利用$listener和v-on接收父组件传递的事件
在Vue.js中,使用`$listener`可以使二次封装组件更加灵活和强大。它允许你轻松地将父组件的事件监听器传递给内部元素,而无需手动触发事件。这提高了组件的可重用性和可定制性,使你能够更容易地构建符合各种需求的通用组件。原创 2023-11-08 10:01:46 · 346 阅读 · 0 评论 -
【Vue】组件封装小技巧 — 利用$attrs和v-bind接收传递未定义的属性
在Vue.js中,$attrs和v-bind可以用于组件的二次封装,以在封装的组件中传递父组件的属性和事件。这对于创建高度可定制的通用组件非常有用。下面是一些示例代码:假设你有一个名为MyButton的自定义按钮组件,它接受一些常见的按钮属性(如disabledtype等),然后你想将其二次封装,以添加一些额外的样式和功能。以下是如何使用$attrs和v-bind来实现这个目标的示例:-- 添加自定义样式 -- > v-bind="$attrs"原创 2023-11-08 09:27:59 · 532 阅读 · 0 评论 -
【Vue】路由组件向app.vue主文件传值
在路由定义中,你可以使用路由参数来传递数据。首先,你需要在路由配置中定义路由参数,然后在组件中使用。你还可以使用路由状态来传递数据,这种方法适用于需要在多个组件之间共享数据的情况。主页面传递数据的两种常见方法。你可以根据你的需求选择其中一种来实现数据传递。首先,在路由配置中,你可以为每个路由添加一个。在Vue.js中,可以使用路由传参的方式向。这样,你可以在多个组件中访问相同的数据。在这个例子中,我们定义了一个路由参数。然后,在你的组件中,你可以通过。然后,在组件中,你可以通过。对象来访问这些参数。原创 2023-11-07 15:43:40 · 194 阅读 · 0 评论 -
【Vue】使用v-model实现控制子组件显隐
可以实现双向绑定的效果,允许父组件控制子组件的显示/隐藏,同时允许子组件自己控制自身的显示/隐藏。这样,父组件和子组件都可以独立地控制显示/隐藏状态,实现了双向绑定的效果。// 子组件自己控制显示/隐藏状态。在子组件中,你需要定义一个名为。事件,这将影响父组件中。在父组件中,你可以使用。,以便接收来自父组件的。原创 2023-11-02 17:24:21 · 679 阅读 · 0 评论 -
【Vue】v-model修饰符
和修饰符可以让你更好地控制表单元素和组件的双向数据绑定行为,以满足不同的需求和约束。它们在开发Vue.js应用程序时非常有用,可以减少样板代码,提高开发效率。它允许你在表单元素和组件中轻松绑定数据和用户输入,以便在用户输入数据时,数据会自动更新,反之亦然。修饰符用于延迟数据更新,只在输入框失去焦点时才将数据同步到模型。上的额外标记,用于调整其行为。Vue.js提供了几个修饰符,让你更灵活地控制双向绑定的行为。修饰符用于去除用户输入的首尾空格,以保持数据的干净性。这些修饰符可以单独使用,也可以组合使用。原创 2023-10-12 16:20:18 · 307 阅读 · 0 评论 -
【Vue】组件通信与方法暴露实践
在Vue.js中,组件通信和方法的暴露是非常常见的需求。通过使用自定义事件和对象暴露方法,我们可以轻松地在组件之间实现通信和方法调用。这种模式使代码更加清晰和可维护,有助于更好地组织Vue.js应用程序。原创 2023-09-27 11:48:25 · 213 阅读 · 0 评论 -
【Vue】避免Vue组件中常见的props默认值陷阱
当你将一个对象或数组作为props的默认值时,它们会在组件的所有实例之间共享。这意味着如果一个组件修改了这个默认值,其他组件也会受到影响,因为它们共享同一个引用。如果后续更改了默认值,不会触发组件的重新渲染。如果尝试将非原始值作为默认值类型,Vue可能会引发警告。如果默认值与验证类型不匹配,Vue将不会发出警告,但仍然可能导致意外行为。使用一个函数来返回一个新的对象,以确保每个组件都有自己独立的对象。默认值与验证类型不匹配可能导致类型错误和不一致的数据。的默认值,组件不会重新渲染。原创 2023-09-18 20:30:17 · 481 阅读 · 0 评论 -
【Vue】】img使用 :src 动态绑定图片地址,但是加载图片不成功
img标签直接动态绑定图片的相对路径的时候,图片不能正常显示。动态地址,路径被加载器解析为字符串,所以图片找不到。设置绝对路径或者相对路径是改为用。引入才能成功,就可以动态使用了。原创 2023-07-31 10:18:22 · 3815 阅读 · 1 评论 -
【Vue】Vue 中的 key 有什么作用?(key 的内部原理)
然后再对比后面的 DOM,发现 key 一样而且里面的内容也完全一样,故不需要进行更新。若遍历时用 index 作为 key,因为 Vue 使用虚拟 DOM 对比算法以后,发现 input 并没有更新,而 input 里面输入的内容残留在真实 DOM 里面,故 input 里的内容并没有跟随列表更新。key 是虚拟 DOM 对象的标识,当状态中的数据发生变化时,Vue 会根据【新数据】生成【新的 DOM】,随后 Vue 进行【新虚拟 DOM】与【旧虚拟 DOM】的差异比较,比较规则见下文。原创 2023-03-22 17:01:20 · 219 阅读 · 0 评论 -
【Vue】针对Vue中MVVM的理解
M:模型(Model):对应 data 中的数据,指的是一般的 js 对象V:试图(View):模板,指的是 Vue 模板通过解析得到的页面(DomVM:视图模型(ViewModel):Vue 实例对象,包括:数据绑定(Data Bindings):在 Vue 中 data 是一个对象,这个 data 对象中存了一组一组的数据,存在Model里面,然后经过Vue 实例进行数据绑定,就把你的数据摆在了你想要的页面位置(ViewDom 监听器:监听页面上的改变,然后映射到数据对象上。原创 2023-03-15 17:44:03 · 236 阅读 · 0 评论 -
【Vue】el 和 data 的含义与两种写法
先创建 Vue 实例,随后再通过 $mount 方法来指定 el 的值。其中,mount 有挂载的意思,通俗来讲他的作用就是把 Vue 对象中的内容放到绑定的容器里面。原创 2023-03-15 17:11:16 · 265 阅读 · 0 评论 -
【Vue】浅析Vue.js中v-bind与v-model的使用和区别
v-bind单向绑定、v-model双向绑定用于输入类元素原创 2023-03-15 16:33:02 · 106 阅读 · 0 评论