vue
文章平均质量分 67
大鱼吃小鱼7
一个会撸代码的小鱼姑娘,爱撸码,爱旅游,爱写作.
展开
-
[性能优化]为了把首页加载速度从15秒降到2秒我都做了哪些事情?
[性能优化]为了把首页加载速度从15秒降到2秒我都做了哪些事情?前言对于一个网站来说, 首页打开的速度一定程度上决定了用户的访问量和留存率,很显然,5G时代下的人们是缺乏耐心的,如果一个网页卡十几秒还没开, 估计会弃之,那么怎么才能提高这个速度, 以下提供了五种提升网站速度的方式.查看网页性能网上有很多查看性能优化的工具, 最简洁实用的就是chrome里的开发者工具 - network和preformance进行性能分析,另外在build的时候加上--report也能查看到打包后包的大小,原创 2021-03-21 22:55:57 · 1846 阅读 · 0 评论 -
vue-cli配置less变量的两种方式
方式一:build文件配置步骤1:安装包npminstallsass-resources-loader--save-dev步骤二: build 的utils.js配置找到exports.cssLoaders = function (options) {}这段代码,functionlessResourceLoader(){varloaders=[cssLoader,'less-loader',{...原创 2021-03-19 23:53:18 · 1647 阅读 · 1 评论 -
为什么你的watch不生效? 从内部实现解析watch的工作原理
前言使用watch监听为什么有时不生效? 这篇文章或许可以给你答案,看完还不懂,请来找我。1.列表渲染中修改数组元素(对象)的某个属性,但不能触发视图更新。举个栗子父组件有个element对象, 每次添加商品时需要往element.data里面去添加一条数据, 以此来更新父组件以及子组件的内容,通过$emit的形式更新父组件的element。代码如下:<div class="item-box" v-for="(product, paramIndex) in element.data" :k原创 2020-10-21 00:34:29 · 2098 阅读 · 0 评论 -
vue 使用clipboard复制文本到剪切板
复制文本是一个很常见的场景, 比如淘宝的复制订单号, 点击复制实现订单号的复制.安装:npm i --save clipboardhtml:<template> <div class="line fs14"> <div class="label color-gray">订单号</div> <...原创 2019-11-20 11:04:46 · 408 阅读 · 0 评论 -
vue 使用qrcode生成二维码功能
安装插件npm i --save qrcodejs2template部分<template> <div class='turnout-wrapper turnin-wrapper'> <div class="qrcode-style" id="qrcode"></div> </div>&l...原创 2019-11-19 13:45:42 · 1699 阅读 · 1 评论 -
vue项目实现每隔1分钟刷新当前页面(附:清除定时器优化方案)
有个需求是: 需要实时获取接口数据,每隔1分钟获取一次, 我们可以通过定时刷新页面来达到效果.js有两种定时器setInterval(function(){}, milliseconds)——会不停的调用函数setTimeout(function(){}, milliseconds)——只执行函数一次乍看之下,setInterval会符合我们的业务需求,然而也需要注意一些...原创 2019-11-18 14:09:18 · 11879 阅读 · 2 评论 -
js 时间戳与时间格式的转化, xx天xx小时xx分倒计时,距离当前时间多久
目录一.时间戳和日期格式相互转化(1) 获取时间戳(2) 时间戳转化为日期格式(3) 日期格式转换为时间戳二. XX天XX小时XX分倒计时三.距离当前时间的计算, 显示效果为3秒前,1小时前一.时间戳和日期格式相互转化(1) 获取时间戳//(1)、精确到秒: Date.parse(new Date()); //1570506183000//(2)、精...原创 2019-11-14 13:50:59 · 905 阅读 · 0 评论 -
在vue项目中使用Antv-f2的小案例
目录一.两种引入方式1.浏览器引入2.通过 npm 安装二. 两种使用方式1. 在配置了webpack或使用vue-cli构建的vue项目使用2. 另一种使用方式是在html中直接使用三. vue循环渲染图表,动态绑定Id最近在研究数据可视化,了解到会有移动端的数据可视化需求,所以看到了阿里出的Antv F2.官网有如下简介:F2,一个专注于移动,开箱即用的可...原创 2019-11-12 11:47:24 · 8835 阅读 · 2 评论 -
vue页面实现短信验证码60秒倒计时
template <div class='single-wrapper fs14'> <div class='single-mb'>短信验证</div> <mt-field type='number' v-model="phoneMessage" placeholder="短信验证码" class='message-wrappe...原创 2019-11-08 21:01:49 · 1765 阅读 · 0 评论