vue
文章平均质量分 56
孤月葬花魂
我害怕鬼,但鬼未伤我分毫;我不害怕人,但是人把我伤得体无完肤。
展开
-
vue3+ts使用vue-i18n
【代码】vue3+ts使用vue-i18n。原创 2023-08-23 11:12:48 · 1001 阅读 · 4 评论 -
数字滚动变化-指令形式
/ mounted 时,binding.oldValue 为 undefined。// 恢复为原来的值,不恢复的话会闪一下。// 目标值与原值一样则不进行任何操作。// 计算每次改变的值。原创 2023-08-02 16:30:51 · 364 阅读 · 0 评论 -
浮层展示信息位置处理
/ 总容器宽度,去掉滚动条、border。// 可用宽度:因为有滚动条的存在。// 详情信息 10为间距。原创 2023-07-14 16:38:44 · 308 阅读 · 0 评论 -
作用域插槽简单应用
作用于插槽简单应用Parent.vue<template> <div class="content"> <Child :data="data" :columns="columns" > <template slot="name" slot-scope="{ row }"> 姓名:{{ row.name }} </template> <temp原创 2021-11-19 11:07:49 · 377 阅读 · 0 评论 -
懒加载处理,不要再傻傻监听页面滚动
懒加载处理利用浏览器原生提供的构造函数 IntersectionObserver, 不要再傻傻监听页面滚动一、IntersectionObserver简介1. 语法let observer = new IntersectionObserver(callback, option);/* callback 是当被监听元素的可见性变化时,触发的回调函数 option 是一个配置参数,可选,有默认的属性值*/2. callback 参数目标元素的可见性变化时,就会调用观察器的回调函数ca原创 2021-11-08 16:59:22 · 516 阅读 · 2 评论 -
为什么不建议用`index`做`key`?为什么不建议用随机数做`key`?
为什么不建议用index做key?为什么不建议用随机数做key?<template> <div> <!-- 用index做key --> <div v-for="(item, index) in list" :key="index">{{ item.name }}</div> <!-- 渲染为 <div key=0>张三</div> <div k原创 2021-09-24 17:43:28 · 485 阅读 · 0 评论 -
在哪个生命周期内调用异步请求?
在哪个生命周期内调用异步请求?可以在钩子函数 created、beforeMount、mounted 中进行调用,因为在这三个钩子函数中,data 已经创建,可以将服务端端返回的数据进行赋值。但是,在 created 钩子函数中调用异步请求,因为在 created 钩子函数中调用异步请求有以下优点:能更快获取到服务端数据,减少页面 loading 时间SSR 不支持 beforeMount 、mounted 钩子函数,所以放在 created 中有助于一致性......原创 2021-09-18 16:20:00 · 1348 阅读 · 0 评论 -
使用canvas画二维码
使用canvas画二维码需要使用 qrcode 依赖具体代码如下<template> <div> <canvas ref="code"></canvas> </div></template><script>import QRCode from 'qrcode'export default { mounted() { let code = 'xxxxx原创 2021-08-31 14:33:08 · 433 阅读 · 0 评论 -
全局注册组件
全局注册组件1. 直接在main.js注册import List from "@/components/List";Vue.component('List', List);2. 使用 Vue.use在合适的位置创建globalComponents.js2.1 单个注册// globalComponents.jsimport List from "@/components/List";// 导出对象export default { install(Vue) { Vue.c原创 2021-08-25 10:10:42 · 242 阅读 · 0 评论 -
Vue使用Swiper插件
Vue使用Swiper插件这里直接封装,方便后边使用Swiper.vue<template> <div class="swiper-container"> <div class="swiper-wrapper"> <slot></slot> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></原创 2021-08-24 18:06:13 · 257 阅读 · 0 评论 -
vue 实现懒加载请求数据
<template> <div class="test-box" ref="box"> <div class="aaa"></div> <div class="test" ref="test" v-for="(item, index) in list" :key="index" :style="`background-color: ${item.color};`"原创 2021-07-12 16:34:20 · 1877 阅读 · 0 评论 -
vue 跳转至当前路由,并刷新页面
携带不同参数跳转至当前路由,刷新页面并获取该参数借助空页面实现例如:由 /detail?id=1 跳转至 /detail?id=2detail.vueexport default { methods: { test() { this.$router.push({ path: '/empty', query: { router: '/detail?id=2' } }) } }, c原创 2021-05-12 15:50:42 · 6376 阅读 · 0 评论