vue
文章平均质量分 56
飞歌Fly
这个作者很懒,什么都没留下…
展开
-
Vue 核心之数据双向绑定
0 到 1 掌握:Vue 核心之数据双向绑定转载 2023-03-09 14:25:54 · 2543 阅读 · 1 评论 -
node-sass为什么一直安装不上、安装失败?
node-sass为什么一直安装不上、安装失败?原创 2022-08-28 11:50:34 · 8344 阅读 · 3 评论 -
前端发版本,页面白屏报错,微信缓存不更新资源
前端发版本,页面白屏报错,微信缓存不更新资源原创 2022-07-29 10:01:40 · 1997 阅读 · 0 评论 -
html2canvas解决图片空白,图片样式错位
html2canvas解决图片空白,图片样式错位原创 2022-07-01 11:43:59 · 8584 阅读 · 0 评论 -
实现双向绑定Proxy比defineproperty优劣
前言双向绑定其实已经是一个老掉牙的问题了,只要涉及到MVVM框架就不得不谈的知识点,但它毕竟是Vue的三要素之一.Vue三要素响应式: 例如如何监听数据变化,其中的实现方法就是我们提到的双向绑定 模板引擎: 如何解析模板 渲染: Vue如何将监听到的数据变化和解析后的HTML进行渲染可以实现双向绑定的方法有很多,KnockoutJS基于观察者模式的双向绑定,Ember基于数据模型的双向绑定,Angular基于脏检查的双向绑定,本篇文章我们重点讲面试中常见的基于数据劫持的双向绑定。常见的转载 2022-05-08 11:52:56 · 398 阅读 · 0 评论 -
vue中怎么重置data和data中某个属性的初始状态?
Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象this.$data获取当前状态下的datathis.$options.data()获取该组件初始状态下的data。object.assign(this.$data, this.$options.data())使用场景:有一个表单,表单提交成功后,希望组件恢复到初始状态,重置data数据。然后只要使用Object.assign(this.$data, this.$options.data())就可以将当前原创 2022-04-27 12:09:39 · 1562 阅读 · 0 评论 -
html2canvas生成的图片偏移不完整
情景一:问题背景:生成的图片在一个弹窗里面,如果页面没有滚动条就是正常的,但是一旦出现滚动条并且页面发生滚动时html2canvas绘制成的图片就会偏移出对应滚动高度的白边,如下:解决办法:楼主查了很多资料,也用了很多方法都没能解决这个问题,一气之下打算研究研究html2canvas的配置参数,果不其然,在配置参数RenderOptions下找到如下配置眼尖的楼主立马发现了scrollY这个东西。没错,这个肯定是配置偏移量的对吧,既然你是向下偏移我页面滚动的高度,那我把scroll..转载 2022-04-15 11:05:14 · 1277 阅读 · 0 评论 -
uni-app 淡入淡出 支持左滑右滑轮播图
<template> <view class="grapSwiper"> <view class="banner" @touchstart="touchStart" @touchend="touchEnd"> <image v-for="(value,index) in swiperList" :key="index" class="pic" :src="value.imagePath" :animation="num==inde...原创 2022-01-14 13:49:49 · 1134 阅读 · 0 评论 -
vue下载pdf、word、excel、png图片
知道文件的下载路径后,执行文件下载操作,支持 pdf、pdf、word、excel、png等资源。downItem(filename, filePath) { let link if (filePath.includes('pdf') || filePath.includes('png')|| filePath.includes('jpg') ||filePath.includes('jpeg')) { link = document.createElement原创 2021-12-07 19:34:04 · 846 阅读 · 0 评论 -
vue base64文件转pdf
//best64转Blobconst dataURLtoBlob = function (baseData) { var bstr = atob(baseData) var n = bstr.length; var u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: `application/pdf;char.原创 2021-12-07 19:32:04 · 1644 阅读 · 0 评论 -
使用Fiddler修改请求参数
1、下载比较新版的Fiddler2、进入到调试的页面,并填写好参数,以获取短信验证码接口为例3、先清空Fiddler列表中已经存在的请求,以便观察3、打开断点调试 (下面两种方式都可以,F11是快捷键)按F11 键盘快捷键或者如下图勾选 Before requests4、一切准备就绪后,点击你要调用的接口,比如我上图 获取短信验证码的接口在右边界面Inspectors 项目下,就可以对 请求的参数进行修改。根据请求类型 是TextView还是webForms进行修原创 2021-11-05 18:36:59 · 8378 阅读 · 0 评论 -
浅谈前端路由原理hash和history
众所周知, hash 和 history 在前端面试中是很常考的一道题目。在学习本文内容之前,周一对 hash 和 history 的认知可能就在 hash 的 url 里面多了个 # ,而 history 就不会。然后,我认知里还有一个是只有 history 才能做前后端分离,而 hash 跟前后端分离没有关系。然而,现实是……对于前端路由来说, hash 和 history 都可以用于前后端分离项目,且两者有各自的特点和各自的使用场景,在使用过程中主要要了解当前项目所处的场景,以便于更好地判断使用哪转载 2021-11-04 18:44:08 · 834 阅读 · 0 评论 -
vue 本地文件启动服务,如dist文件
npm i -g servecd /distserve原创 2021-08-31 17:21:46 · 576 阅读 · 0 评论 -
uni-app h5端proxy跨域反向代理配置
①方法一 在 manifest.json文件下,设置h5的proxy代理配置,配置方式和vue比较类似。配置参考:https://cli.vuejs.org/zh/config/#devserver-proxy "h5": { "optimization": { "treeShaking": { "enable": true } }, "devServer": { "disableHostCheck": true, "proxy"原创 2021-08-12 16:32:45 · 4127 阅读 · 0 评论 -
uni-app配置开发、测试、生产等多环境,process.env
"scripts": { "dev": "cross-env NODE_ENV=development VUE_APP_MOD=dev UNI_PLATFORM=h5 VUE_APP_PLATFORM=h5 vue-cli-service uni-serve", "build:sit": "cross-env NODE_ENV=production VUE_APP_MOD=sit UNI_PLATFORM=h5 VUE_APP_PLATFORM=h5 UNI_OUTPUT_DIR=dist.原创 2021-08-03 18:26:52 · 10459 阅读 · 0 评论 -
Fiddler弱网测试uni-app
本文仅代表个人意见,仅供参考ABC小程序与uni-app小程序弱网测试报告本文在弱网环境下,在页面请求完成耗时和页面加载完成耗时这两个维度,对现有ABC小程序(后面统一称ABC小程序)和uni-app改造后的ABC小程序(后面统一称uniapp小程序)做一些比较。一、什么是弱网?很多时候我们在地铁或者在电梯上浏览网页时,网页一直在转圈或者提示加载错误,这样的网络环境就可以称为弱网环境。按照移动的特性来说,一般应用低于2G速率的都属于弱网,也可以将3G划分为弱网。以下是常见的网络制式的上行、下原创 2021-08-03 12:15:40 · 2353 阅读 · 3 评论 -
uni-app、taro、flutter、kbone 跨端、小程序选型对比、区别
本文只代表本人观点,在自己的一些实践经验上的出的粗浅结论。也只适合在公司目前业务所得出的方案,仅供参考,可能随着技术的发展,其他框架也会越来越好。一、背景 随着移动互联网的百家争鸣,越来越多的“端”如雨后春笋快速兴起,安卓、ios、鸿蒙和各种小程序等。同一个应用,各个“端”独立开发,不仅开发周期长而且人员成本高,不利于团队成员形成合力提高开发效率。这种重复、低效的工作状态直接影响到新品的迭代和发布,在这样的形势下,跨端技术受到越来越多人和企业的关注。 使用跨端方案进行...原创 2021-08-03 12:02:07 · 15204 阅读 · 2 评论 -
web引入font字体文件太大,字体抽取
当只有一个活动页面或者一小段文字需要引入特殊字体,字体文件往往会有十几兆或者几十兆,特别在移动端或者弱网情况下有相当差的体验,一个14M左右的文件就需要加载12秒...所以针对一些小范围使用字体文件或者页面变化不大的项目可以考虑把常用字体抽取出来再生成一个小的字体文件,再进行引入。发现fontmin 这个框架比较符合需求,它是第一个纯 JavaScript 字体子集化方案,可以使用node命令或者可视化窗口的形式进行操作官网地址:http://ecomfe.github.io/fontmi.原创 2021-06-30 10:10:08 · 1324 阅读 · 0 评论 -
vue进入可视区域执行动画、动效、添加样式类名等
举例:每个模块标题,进入可视区域后,标题从下往上缓缓出现代码:添加一个全局自定义指令import Vue from 'vue'//注册'v-animate' 当元素出现在可视范围时添加类名出发样式Vue.directive('animate', { inserted: function (el, binding) { // 聚焦元素 binding.addClass = () => { const { top } = el.getBo原创 2021-06-23 11:46:06 · 2323 阅读 · 0 评论 -
手写轮播图
效果如下:主要代码:<template> <section class="container"> <p class="title">轮播图</p> <div class="serveArea"> <div class="baseContent"> <div class="prev"> <img src="~/as原创 2021-06-22 17:11:08 · 773 阅读 · 0 评论 -
ElementUi Carousel 走马灯轮播图,el-carousel左右箭头位置调整
效果如下:原理:手动切换<template> <section class="excellentCases"> <p class="title">箭头轮播图</p> <div class="baseContent"> <div class="prev"> <img src="~/assets/images/solution/wisdomGov/prev.png原创 2021-06-21 18:30:22 · 10158 阅读 · 0 评论 -
从 0 开始手把手带你搭建一套规范的 Vue3.x 项目工程环境
Vue3 跟 Vite 正式版发布有很长一段时间了,生态圈也渐渐丰富起来,作者已在多个项目中使用,总结一下:就是快!也不用担心稳定性问题,开发体验真不是一般好!还没尝试的同学可以从本文开始学习,从 0 开始手把手带你搭建一套规范的 Vite + Vue3 + TypeScript 前端工程化项目环境。本文篇幅较长,从以下几个方面展开:架构搭建 代码规范 提交规范 单元测试 自动部署本项目完整的代码托管在 GitHub 仓库,欢迎点亮小星星 ????????技术栈编程语言:Typ转载 2021-05-28 16:29:48 · 734 阅读 · 1 评论 -
Vue3.0 新特性以及使用变更总结
前言Vue3.0 在去年9月正式发布了,也有许多小伙伴都热情的拥抱Vue3.0。去年年底我们新项目使用Vue3.0来开发,这篇文章就是在使用后的一个总结, 包含Vue3新特性的使用以及一些用法上的变更。图片.png为什么要升级Vue3使用Vue2.x的小伙伴都熟悉,Vue2.x中所有数据都是定义在data中,方法定义在methods中的,并且使用this来调用对应的数据和方法。那Vue3.x中就可以不这么玩了, 具体怎么玩我们后续再说, 先说一下Vue2.x版本这么写有什么缺陷,所以才会转载 2021-05-28 15:54:02 · 1088 阅读 · 0 评论 -
ios刘海屏适配
现在ios的iphoneX、iphone11、iphone12都具有刘海屏的设计,这部分刘海屏机型和没有刘海屏的在页面显示上有一些差别。所以要做一下区分。下面是ios主流机型的分辨率信息。注意到在逻辑像素一项,iphoneX以上机型(包括iphone11、iphone12)逻辑像素高度 pt都大于等于812所以默认逻辑像素高度 p大于等于812的就是iphoneX以上机型,而且这些机型都有刘海屏// 是否iOS刘海屏 isIosLiuhai() { // 默认物理高度大于8原创 2021-05-12 16:12:53 · 1436 阅读 · 0 评论 -
vue-cli创建vue项目,git bash上下箭头无效的问题
vue-cli官网有两种解决方法https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create第一种就是使用命令winpty vue.cmd create 项目名来创建第二种就是在git安装目录下给vue添加别名找到git安装目录,用记事本打开bash.bashrc文件,在末尾添加alias vue='winpty vue.cmd'保存重启gitbush...原创 2021-04-26 11:56:53 · 445 阅读 · 0 评论 -
postcss-px-to-viewport include的用法
postcss-px-to-viewport这个插件还是很有用处的,可以使 px单位转换成vw视口单位,include可以限制只在某个文件夹或者某个文件使用px转vw的功能,比较适合一个项目有两种不同单位的情况。因为npm 上面的postcss-px-to-viewport包并不支持include的用法,需要使用github上面的包,而且在使用include时还有一些误导,所以简要说明一下。原文如下:https://github.com/evrone/postcss-px-to-viewpor.原创 2021-04-25 10:19:01 · 5443 阅读 · 3 评论 -
nuxt.js配置BASE_URL(基本域名)和NODE_ENV(环境变量)
一直以来,开发环境和生产环境的数据接口域名不一样总是困扰着我每次打测试包或者线上包,我都得手动切换域名,我相信很多人的做法跟这差不多,类似下面这样:(你已经注意到,这个文件已经被我无情的删除了,因为我发现了属于我自己的新大陆)每次打包都要切换注释,虽然也能接受,但是容易忘记或者出错,或者找这个配置文件都要找半天,对于我这种反应迟钝、头脑经常性短路的人来说实在太痛苦了,有痛点,那就要寻求解决方法:第一步:安装cross-env(这个迷你的包能够提供一个设置环境变量的scripts.转载 2021-04-08 17:39:13 · 2381 阅读 · 0 评论 -
nuxt.js发送post、get请求方式
<script>import Qs from 'qs'export default { async asyncData({$axios,app}){ // get请求方式,get方式入参需要params对象接收 let data = { params:{ appkey:'xxxxxxxx', channel:'头条' } } let res = await $axios.$get('/ji.原创 2021-04-07 16:05:58 · 2526 阅读 · 1 评论 -
jenkins部署nuxt项目,pm2开启服务端渲染
流程:1、使用nuxt.js开发服务端渲染项目,并把最新代码发布到代码管理仓库,gitlab或者码云。2、进入jenkins3、新建jenkins服务,选择相关设置选择node js进行安装,如果没有需要在jenkisn 插件面板安装nodejs输入shell构建命令以下是命令的具体说明,pm2需要下载安装;node_modules这个目录还是需要的,不要项目运行不了(有点坑,毕竟包变得很大了)。#!/bin/bash -ilexnode -v#进入当前原创 2021-04-06 15:16:08 · 1723 阅读 · 2 评论 -
Vue的render函数
回忆Vue的一些基本概念今天我们学习的目的是了解和学习Vue的render函数。如果想要更好的学习Vue的render函数相关的知识,我们有必要重温一下Vue中的一些基本概念。那么先上一张图,这张图从宏观上展现了Vue整体流程:从上图中,不难发现一个Vue的应用程序是如何运行起来的,模板通过编译生成AST,再由AST生成Vue的render函数(渲染函数),渲染函数结合数据生成Virtual DOM树,Diff和Patch后生成新的UI。从这张图中,可以接触到Vue的一些主要概念:模板.转载 2021-03-30 18:36:47 · 748 阅读 · 0 评论 -
分析Array.apply(null, { length: 20 })
背景在阅读VueJS教程时有这么段demo code:render: function (createElement) { return createElement('div', Array.apply(null, { length: 20 }).map(function () { return createElement('p', 'hi') }) )}其中这个表达式Array.apply(null, { length: 20 })有点让人费解。第一感转载 2021-03-30 18:10:12 · 1745 阅读 · 0 评论 -
vue源码图示笔记
原创 2021-02-18 15:32:19 · 149 阅读 · 0 评论 -
「无刷新跳转」window.history两个新方法pushState和replaceState详解
无跳转重写urlHTML5新接口,可以改变网址而不刷新页面 存在跨域问题,不支持重写到另一个域名下 仅改变网址,网页不会真的跳转,也不会获取到新的内容,本质上网页还停留在原页面一、window.history.pushState(data, title, targetURL);@状态对象:传给目标路由的信息,可为空 @页面标题:目前所有浏览器都不支持,填空字符串即可 @可选url:目标url,不会检查url是否存在,且不能跨域。如不传该项,即给当前url添加data二、window.hi转载 2020-10-16 11:09:10 · 29636 阅读 · 2 评论 -
使用vue,版本更新,解决用户浏览器缓存问题
1、修改webpack .prod.conf.js文件const version = new Date().getTime();output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash:8].' + version + '.js'), chunkFilename: utils.assetsPath('js/[name].[chunkhash:8].' + version..转载 2020-10-15 09:21:04 · 3351 阅读 · 0 评论 -
Can not use keyword await outside an async function
ajax里面还有promise解决方案如图:在箭头函数前面加 async原创 2020-06-12 15:12:26 · 34186 阅读 · 4 评论 -
构建个人组件库,类似Element-ui使用方式,vue confirm公共弹框组件
一、要做什么?我们在引入Element-ui的时候有看到这种使用Vue.use()的用法,然后element-ui里所有的组件我们都可以全局使用,这到底是怎么做到的呢,下面我以一个公共弹框组件为例,说一说我的写法,仅供参考。呈现的最后效果:(1)简单的标题(2)提示内容可交互(v-html中的点击事件)二、实践之前可以了解一下Vue的api(1)vue-exte...原创 2020-05-06 16:05:08 · 902 阅读 · 0 评论 -
Vue v-html不能触发点击事件
现象:后端返回到前端的是html格式的数据,前端用v-html解析渲染,例如:<span @click='add()'>点击</span>,span标签成功渲染,但是绑定的事件无法触发原因:vue没有将其作为vue的模板解析渲染 解决方法:不用v-html而是component模板编译<template> <div> ...转载 2020-04-20 11:01:29 · 1445 阅读 · 0 评论 -
vue的methods方法中如何使用filter
原来我们看到的过滤器使用一般都是这种形式那如果我们需要在method方法中怎么用过滤器呢可以使用this.$options.filters.money(参数1,参数2) 这种形式...原创 2020-03-05 12:33:50 · 644 阅读 · 0 评论 -
获取vue-lazyload、VueLazyLoad加载完毕后的图片高度
有时候需要知道vue-lazyload加载完毕后,做一些操作,比如获取图片的总高度等等,使用this.$Lazyload.$on('loaded', handler) 方法let self = this ,this 为vue实例function handler ({ el, src }, formCache) { var wrapperHeight = document...原创 2020-02-18 16:08:34 · 1898 阅读 · 0 评论 -
ios锁屏或页面隐藏时,定时器setInterval倒计时不执行,解锁显示后才执行的问题
手机锁屏后,h5浏览器setTimeout暂停执行了,发送验证码的秒数或倒计时没有继续往下走,遇到这种问题可以用visibilitychange这种方式处理// 监听页面隐藏(锁屏)或后台执行时,解决定时器不执行的问题 addVisibilitychange(){ let that = this; let start,end,vibS,newS;...原创 2020-02-12 11:17:17 · 3775 阅读 · 0 评论