![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 59
毛发苍苍
尽量只更新一些比较花调研时间的东西。具体技术就算啦
展开
-
阿里云效 + jenkins配置自动构建测试环境
阿里云效 + jenkins配置自动构建测试环境原创 2022-09-05 18:02:54 · 1887 阅读 · 0 评论 -
理解+上手正则表达式【附官方常用正则表达式】
啥是正则正则可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。对应string.test()、string.replace()、string.match()方法组成:/ 表达式 /修饰符修饰符是用在整个正则的后面的 eg: /…/i 、/…/gi 相当于全局配置吧。不设置就是只找一次,区分大小匹配规则/模式我理解为查找规则,按某个规则来找比如:\d 只查找数字每个子表达式只能下面10选一特殊字符用法介绍1.”^”可以表示否(取反),原创 2021-09-23 21:01:38 · 158 阅读 · 0 评论 -
eslint的使用,和相关配套方案介绍总结
最重要的放前面以下都是配套使用的,最规范的情况就是一起使用,EditorConfig——VScode插件:,是用来定义规则的,比如设置缩进格数。然后覆盖setting里面的设置,达到大家代码统一的效果,然后可以用一个.editorconfig.js文件来配置规则preitter 是一个格式化代码的工具,需要–D安装,他会把你的代码按规则格式化的更漂亮,在根目录写.prettierrc.js配置规则,.prettierignore是配置怎么忽略的(比如:路径/.xx结尾文件的不格式化等等)eslint原创 2021-09-08 10:52:56 · 235 阅读 · 0 评论 -
全局注册组件,element-ui封装原理
需求:你想写一个组件,想在全部页面都可以这么使用: <el-newbutton>自己封装的按钮</el-newbutton>做法:新建一个js文件,import你写好的.vue文件。至于这些文件放哪,全看你项目文件怎么规划的了。import newbutton1 from './newbutton1'import newbutton2 from './newbutton2'export default { install (Vue) { Vue.compon原创 2021-07-21 09:18:04 · 765 阅读 · 0 评论 -
XMLHttpRequest解读,组件封装必懂
XMLHttpRequest的发展历程XMLHttpRequest一开始只是微软浏览器提供的一个接口,后来各大浏览器纷纷效仿也提供了这个接口,再后来W3C对它进行了标准化,提出了XMLHttpRequest标准。XMLHttpRequest标准又分为Level 1和Level 2。XMLHttpRequest Level 1主要存在以下缺点:受同源策略的限制,不能发送跨域请求;不能发送二进制文件(如图片、视频、音频等),只能发送纯文本数据;在发送和获取数据的过程中,无法实时获取进度信息,只能判断原创 2021-07-13 10:20:21 · 547 阅读 · 3 评论 -
H5接入微信支付、支付宝支付
H5上支付宝支付1 先发起一个请求,把必要信息(订单号、价格)+重定向urlA传给后端2. 后端通过微信那边返回一个urlB(微信的页面),前端跳去B这里付款,结束后3. urlB 会把页面跳回 urlA(支付成功/失败页面)4.H5/JSAPI微信支付必知前提H5微信支付,广义上是指那些html5页面。但是在微信文档中H5支付属于非微信浏览器环境支付,JSAPI支付属于微信环境浏览器支付。前者生成预订单时候,微信返回给后端的是一个预订单id。后者是返回一个url,供前端跳转支付。流程思路:原创 2021-06-29 11:50:15 · 3542 阅读 · 2 评论 -
Jenkins自动打包部署——前端入门,Jenkins解读,Jenkins机器人
codding配置jenkins自动构建原创 2021-06-12 16:24:03 · 3814 阅读 · 1 评论 -
从0 — 1,了解+搭建 H5-微信授权
首先要在html文件中引入微信文件,它会暴露出一个全局的对象:wx<link rel="preload" ,href="//res.wx.qq.com/open/js/jweixin-1.3.2.js" ,as="script" />其次是init基础配置,比如微信好友/朋友圈分享。这个一般写在全局方法中,一开始就调用。从后端获取appid 这些数据,目的是安全。async function weixinConfig() { try { let res = await r原创 2021-05-24 23:54:13 · 174 阅读 · 2 评论 -
H5/前端接入百度统计(企业级方案入门)——事件统计
科普:1.假如你是新的链接页面,进行的统计,那么需要新增网站(正式、测试),获取对应id(代码)代码是这么个样子。2. 查看图表总访客量和访客次数自带区分的3. 添加数据这里就是代码部分了,一般你的项目都是已经接入百度统计了的。这时候你需要添加埋点触发代码,就一句:参数一是写死的。window._hmt.push(['_trackEvent', '作品详情页', '点击','发送给朋友']);4.补充类型,操作,标签这些是产品整理好成一个表格给你,这个百度统计更新有一小时延迟原创 2021-05-10 18:57:23 · 1634 阅读 · 2 评论 -
$attrs、inheritAttrs、$listeners;VUE隔代传值;组件封装原理
前言隔代传值一般不用vuex,大项目vuex咋能用来传一些琐碎的值。孙子获得爷爷的数据,用$attrs就行爷爷获取孙子的数据,用$listeners组件封装原理就是隔代传值,本来隔代传值不想写的,最近看到封装原理才觉得有点东西,会多用到一个inheritAttrs属性。它解决这么个场景:你想封装一个密码类型或明文类型的输入组件,要用到type="password"或者type=’'text"吧。 那就需要把type=“xxx” 继承过去指定位置。(举的例简单,当然还有其他实现方式)怎么去继承的问题。原创 2021-03-25 18:25:32 · 375 阅读 · 0 评论 -
函数节流、防抖函数,面试/优秀代码必备
函数节流、防抖函数是两个不同的出发点,但是方法论都是一样的。函数节流:节流,就是减少没必要的输出,就是防止一个函数没执行完,同个函数又开始执行了,性能的浪费。防抖函数:短时间执行多次函数,等他们都执行完了就会一起刷新展示出来,导致页面抖动。常用场景:重复点击查询列表、关键词搜索、屏幕大小改变监听函数等。eg:屏幕大小改变是个拖动过程,函数会执行超多次的,实际你只想要有意义的那么几次,怎么才算有意义呢,这个场景的话,一般是行为结束后0.几秒时候才是有意义的。那么就可以设置一个定时器。解决办法都是原创 2021-03-22 12:06:17 · 98 阅读 · 3 评论 -
(一分钟搞懂)纯前端导出excel——Vue-json-excel
这个很简单的,很方便。看过很多文章都是偏复杂的,代码量多不易维护,兼容性还未知。安装vue-json-excel插件npm install vue-json-excel --save引入vue-json-excel组件明明就能局部引入,那么多文章带偏新人让人家全局引入(main.js)?import JsonExcel from 'vue-json-excel'components: { 'download-excel': JsonExcel },上代码因为是组件形式,原创 2021-03-17 19:19:35 · 840 阅读 · 0 评论 -
导出excel文件 ——(从接口获取、纯前端导出、解析excel)
前言操作文件流,第一个想到肯定是new FileReader(),这次涉及到一个Blob对象,它是原始数据的类似文件对象。FileReader对象操作的就是Blob对象。从接口获取文件,并下载这里有两种都能实现,左边是更正确的,axios请求的时候就要指定返回的类型是blob类型,是不需要再new一个对象。我们用FileReader处理res,得到一个base64字符串,赋给a标签来实现下载。(当然如果是几乎不带参数、速度很快的接口。可以直接window.open(url) )axios({原创 2021-03-09 15:37:43 · 765 阅读 · 0 评论 -
Js-日期时间戳互转,时间比较(不用插件)
小tips:new Date()这个东西的意义,他是用来格式化数据的,然后我们才能用js提供的各种方法,以这个思路去看下面的内容日期转–>时间戳当前时间转时间戳:let a = new Date().getTime()目标时间转时间戳:let a = new Date(‘2021-08-31 13:05:05’).getTime()let a = new Date(‘2021/08/31 13:05:05’).getTime()getTime()是毫秒级别的。Date.parse()是原创 2021-03-08 19:14:53 · 902 阅读 · 0 评论 -
页面刷新关闭前弹窗、页面关闭前弹窗、IOS(H5)页面返回不刷新
先说本次问题ios在微信上面点开h5,点击a标签后,下方左后退页面不刷新,其实是浏览器读取了缓存,而不进行页面刷新(缓存存了你的整个页面),这货名叫“往返缓存”(back-forward cache,或bfcache)解决方法监听htmlDom事件,监听pageshow事件,触发的时候window.location.reload()页面刷新就好了科普:一、load、unload和pagehide、pageshow的主要应用场景1)一般用于页面的首次加载、刷新、关闭、前进后退、超链接等操作的监听;原创 2021-02-27 17:31:37 · 804 阅读 · 0 评论 -
H5、vue动态复制文本功能,ClipboardJS
先明确一点,vue的话不是vue clipboard因为vue clipboard有个缺陷,就复制动态数据时候,会因为异步问题永远都是获取到上一次复制的内容,截至2个月前我是没看到有修复,如果有动态复制的需求看这里(vue的)H5部分用的clipboardjs :http://www.clipboardjs.cn/先说这个插件大概实现思路把1.给复制按钮绑定了个属性,该属性的值指向了要被复制的元素2.要被复制的元素绑定val=“xxxx”3.js层面实例化并监听复制按钮,复制成功/失败回调。原创 2021-02-08 12:00:27 · 552 阅读 · 0 评论 -
vue自定义table表头个数,拖拽调整表头顺序draggable
先上效果图先说下难点在哪不知道用什么插件,显示css层面样式列表是一个JSonelement多选框绑定值只能是普通数组(可以绑定对象,但是无法回显)拖拽后如何影响到多选框绑定值的数据的顺序的思路先准备好一个全量的JSon列表数据alldataeg:[ {label:‘学员姓名’,val:‘studentname’}…]在准备一个默认显示表头的JSon数据nowdata(即目前展示的表头)把这两传给子弹窗,子弹窗监听目前展示的表头nowdata,利用map()转普通数组arry原创 2021-01-22 12:03:20 · 1470 阅读 · 0 评论 -
vue 前端导入excel解析出Json,xlsx解析excel
今天接到一个需求,导入excel查询看起来不难,文件传后端就行,但是要分页,没法做到点击下一页时候再传一次{ 文件,pageNum,pageSize }的。因为没法缓存的了文件(起码很麻烦)————那么我们解析出来,直接传参数给后端就好了————xlsx.js引入:npm i xlsx import XLSL from 'xlsx'html: <input type="file" @change="readWorkbookFromLocalFile" >js:原创 2021-01-20 16:53:06 · 677 阅读 · 0 评论 -
vue2-editor富文本,图片上传url、工具栏详解
1.引入npm install vue2-editor --save // 安装import { VueEditor } from “vue2-editor”;components: { VueEditor }, //注册组件<vue-editor v-model="content"></vue-editor>2.覆盖上传方法多加中间这两行配置<vue-editor useCustomImageHandler@image-added="han原创 2020-12-27 15:11:47 · 2092 阅读 · 10 评论 -
前端视觉优化(三)css动画过渡,transition过渡属性
视频主总结的太好了。直接截图了四要素介绍过渡属性啥是过渡属性,color:xxxx,font-size:xxx,transform:xxxxcolor,font-size,transform就是你要过渡的属性,你指定他们,过渡时候他们就遵循你的规则过渡时间可以设置秒s,或者毫秒ms过渡函数可能会有兼容问题,注意下浏览器前缀的使用ease:默认,慢-快-慢的过渡效果liner:匀速ease-in:加速ease-out:减速ease-in-out:慢-加速-减速-慢。和ease差不原创 2020-12-23 19:12:11 · 293 阅读 · 0 评论 -
前端视觉优化(二)css动画,transform属性
视觉优化一:阴影篇transform(2D转换)以前图片转换都依赖js,现在css3可以做到倾斜,旋转,缩放css3的transform是用函数来定义的translate(x,y)沿着xy轴移动,以前可以通过margin来动,现在先进一点,向右移动30px:transform:translate(30px);一般用于,指向时配合阴影模拟浮起。代码不难rotate(20deg)旋转20°。没什么好讲的。都是顺时针使用场景比较少吧。。。scale(x,y),xy轴分别缩放一个参原创 2020-12-22 23:04:38 · 292 阅读 · 0 评论 -
浏览器前缀(css属性兼容文件)
有一些css属性是还没有全面支持,各个浏览器内核各做各的,所以想要兼容各个浏览器,就需要给这些属性加一个前缀,表明兼容火狐/谷歌/IE/欧朋内核假如ababa属性,-moz-ababa:18px; //在火狐中肯定能用-webkit-ababa:18px; //谷歌肯定能用-ms-ababa:18px; //IE-o-ababa:18px; //欧朋ababa:18px; //记得最后补一句这个,万一以后支持了呢值得一提的是,safari浏览器、360急速、猎豹、世界之窗都是用的谷原创 2020-12-22 11:11:33 · 273 阅读 · 0 评论 -
记一次前端《性能优化》,首屏优化
首先要知道,性能优化无非两点:更快的请求、更轻的体态更快的请求DNS缓存了解一下,内容不多,一搜就有cdn,现在各种云的都能提供这个,看谁做的更好了(命中率,回源率),核心原理是负载均衡:你请求后给你找到一个最佳的服务器节点。其实大概知道就好了,实际上你都碰不到这些代码,都是七牛、腾讯阿里云都给你做好的了,你花钱部署上去,直接请求地址就好了。浏览器缓存,两点:强缓存,协商缓存。简单说就是前者直接使用首次请求的内容。后者每次会问后端内容有变吗?再做决定。资源合并、域名分片。前者代表就是雪碧图,小小原创 2020-12-14 18:33:49 · 259 阅读 · 2 评论 -
各种刷新的区别,和缓存304/200
先说下缓存tip:想了解缓存更多,可以去看强缓存、协商缓存为切入口的内容在使用强缓存时候,会有个过期时间的,这段时间内请求都是用的缓存文件文件过期后请求,请求头会多一个If-Modified-Since Mon, 04 Jul 2011 10:12:40 GMT这时间是服务器端之前就告诉你的,是该文件最后的修改时间。现在后端收到该请求会看看文件最新修改时间。如果时间一致,说明文件没改过,返回304,内容为空。如果有改动,返回200,和新内容。浏览器会更新缓存.缓存和刷新、强制刷新、原创 2020-12-14 17:09:29 · 282 阅读 · 0 评论 -
vue虚拟dom,Render、h函数的运用
大部分情况目的:有些地方你没法写html,你就需要在js中函数给他返回一个htmltip:要讲的就是代码里的h();至于什么是虚拟dom,是面试必懂的东西,这里不赘述了用法:createElement()方法,别名是h(),它有三个参数,前2必选,栗子:h(“p”, { style: “color:red” }, “是否让这个预约定金活动立刻结束?”)参数一:接受一个字符串、对象、组件字符串时候就是标签名,就是‘div’标签参数二:接收对象、或者数组接收数组是设置子组件的。比如div里面原创 2020-12-14 16:56:17 · 650 阅读 · 1 评论 -
前端使用html2canvas,生成海报并下载图片
html2canvas插件官网有点铁打弊端,只能截图可视的部分,你可以缩小截图官网的实例,截图后再全屏浏览器,你会发现也是只截了一部分。然后网上各种方法,什么滚动回到顶,复制节点,scale。。。。我是看了很多连续花了五个小时没实现。所以最后方案是:小图在pc端可以搞。大图(大于可视窗口)不行,得让后端合成(后端难点在于文字合成)小程序无视第一条,可以前端搞,但是难度高得多小图pc端用html2canvas截图,有一定兼容问题,用插件就有问题使用: html2canvas(documen原创 2020-12-03 14:55:56 · 962 阅读 · 0 评论 -
js、html前端pc端根据url点击下载图片
直接复制进去就好了(变量只有imgsrc和文件名)当然也有通过通过a标签下载的(有坑,也不适用手机端),还是看下方代码吧uploadPoster(imsrc,name) { let imgsrc='https://res.miaocode.com/adf442a7-1080-4c01-bf3b-f2cewea5f78b6d.png' try{ let image = new Image();原创 2020-12-03 14:18:00 · 999 阅读 · 0 评论 -
vue-cli3和4 引入scss,scss常用语法
搜了好多。基本没用的。记录下一个有用的装载的用这个scss,主要还是用他的嵌套语法。还有下面这几个语法。就没什么特别的了。规范层面的意义更多吧。补充~所谓的嵌套写法,对应html的嵌套 .s2 { font-size: 20px; .s3 { color:red } }...原创 2020-12-01 19:15:56 · 262 阅读 · 0 评论 -
前端上传七牛云服务器(企业级方案)+入门
以往我们所知道的都是前端上传到后端,后端回传地址。后端是指自己服务器,而不是花钱~嫩来的第三方。第三方除了贵没什么别的坏处。为什么用七牛什么是七牛云,自行百度。我只讲几点重要的图片压缩、裁剪,人脸识别,CDN加速,不占后端资源代码为什么和csdn大部分不同?他们是直接一个ajaxj就请求了,没有配置可言这是官方前端上传七牛详细文档首先是声明了好几个变量,都是配置来的。最后qinniu.upload()上传key是上传后的文件名,为什么有个/,是命名规范吧,也是为了防止命名重复原创 2020-11-16 11:20:16 · 387 阅读 · 0 评论 -
七牛云对图片压缩、裁剪、缩小等处理
官方文档文档相对正经,建议先看看这边 <img :src="form.courseBanner+'?imageView2/2/w/400'" @click="showUploadDialog">这是企业级应用的代码。imageView2是七牛云字段名(可以这么理解)。imageView2/2后面的2是指模式2,官方提供了0-5六种模式。格式为:模式数/w/参数一/h/参数二0模式:参数一是长边最多为xxx,参数二是短边最多为yyy。进行等比缩放,不裁剪。如果不写/h/参数二,意原创 2020-11-10 15:03:06 · 3773 阅读 · 1 评论 -
vue/H5点击复制动态内容(手机号)
经过踩坑,如果复制的内容是通过接口来的,不要用vue clipboard(先说结果,用它,有bug,需要点两次才能复制好,网上有攻略是点击之前指向触发一次。但是库里会有两次调取记录,说近的你还需要上cdn搜,吃力不讨好)重点来了,原生调用复制不香吗(插件还要引入,多用原生,日后写H5受益)<el-button size="mini" type="primary" @click="copy(xx)" >复制</el-button>中间要声明copyData变量async原创 2020-11-06 22:15:31 · 906 阅读 · 0 评论 -
element-图片文件上传,多图合并请求(各种踩坑)
先上图1 .认识属性:file-list=“fileList”上传的话选中文件后,会加载到页面中供我们预览。这个属性就是存预览的照片数组的。(你不配置这属性,当然也能看到预览,但是你无法对其进行操作,比如删除)2.:auto-upload=“false” 选中文件后是否直接上传。记住这个很重要,文档几乎不提3.:on-change 官方解释“文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用”,当你添加文件也会调用,使用这个的时候,记得把第二点属性设置成fa原创 2020-10-16 17:20:30 · 920 阅读 · 0 评论 -
vue中计算属性computed——基础必懂
计算属性是什么?他是把一个值修改成别的值。{{ message.split(’’).reverse().join(’’) }},类似于这种场景。怎么使用?记得fullName是不用去data里面去重复声明的。稍微复杂的操作会在计算属性里面处理。比如对一个大的数据块进行去空值并且穿插一些新东西。data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { re原创 2020-08-28 11:18:54 · 275 阅读 · 0 评论 -
一文必懂cookie+session、token区别和用法
首先要明白cookie+session、token。是两套东西,并且session不是前端存储的session什么是session+cookie?seesion+cookie 举例:第一次请求时候,服务器生成一个信物,并要求客户端也定一个信物。每次请求时候你都带上信物,你我信物一比对,欧了。信物有过期时间。服务器会生成一个信物储物柜(占空间),用来存取信物(cookie),本质是空间换时间,时间即没有计算耗时。什么是token?token 举例:一开始登录给你一个暗号,定一套密钥,下次你发起原创 2020-08-16 13:41:57 · 3838 阅读 · 0 评论 -
vue,BUG,正常显示,但是报错undefinde
正常显示,但是报错undefinde,肯定是执行时间差问题。比如请求的数据有这个属性,但是你的页面先执行了一些判断比如计算属性,就报错了。后来请求的数据到了,自然该属性就有了,重新计算时候没问题并且成功渲染,那就看不出问题了。(我是父组件获取数据,子组件对数据进行筛选,不要某值为0的数据并return新数据,结果是报错该值未定义)衍生问题:父组件请求的数据(子组件要用),一些数据计算就不要放在子组件,不然会出现上述问题。当然解决办法也有。list: { atten原创 2020-08-13 12:42:52 · 484 阅读 · 0 评论 -
关于NaN、undefined、null——基础必懂
null 与undefined等价(==);在if语句中,undefined和null都会被自动转换为false。undefined表示"缺少值",就是此处应该有一个值,但是还没有定义(1)变量被声明了,但没有赋值时,就等于undefined。(2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。(3)对象没有赋值的属性,该属性的值为undefined。(4)函数没有返回值时,默认返回undefinednull表示"没有对象",即该处不应该有值(1) 作为函数的参数原创 2020-08-04 19:06:27 · 2417 阅读 · 0 评论 -
+变量,JS规则/数据转换
+变量:这是规则转换,可以理解为Number(变量)对于boolean:true返回1,false放回0对于null:返回0对于undefined,放回NaN-对于字符串,返回十进制,忽略前面的0,空字符串返回0,十分方便...原创 2020-08-04 19:03:58 · 113 阅读 · 0 评论 -
vue之watch——基础必懂
Vue 实例将会在实例化时(生命周期created实例完成)调用 $watch(),遍历 watch 对象的每一个 property,大白话就是能用了。想监听某个变量1.直接在watch对象里 : 变量(参数){ 。。。} 数据变动时候就执行函数了2.变量:‘函数名’3.变量:{ handler(){…},配置项immediate:布尔值,配置项deep:布尔值}第三种用的也不少(相关配置):immediate:为true时候,表示变量被声明时候就执行handler函数,否者是数原创 2020-08-04 19:00:59 · 190 阅读 · 0 评论 -
一键Top回到顶部
直接上效果图,html、样式就不写了.wrapper-content表示的就是类。你想哪个div哪个class一键置顶就选哪个。scrollTop是指滚动栏querySelector的介绍它会比较详细HTML 的DOM querySelector()方法可以不需要额外的jQuery等支持,也可以方便的获取DOM元素,语法跟jQuery类似backTop () { let el = document.querySelector('.wrapper-content')原创 2020-07-23 18:41:19 · 306 阅读 · 0 评论 -
职场新人之git必懂
一、初始化本地仓库在放项目的文件夹,右键git bash here,敲命令:git init二、克隆代码下来git clone 项目链接三、修改你推送代码时候的名称(让组长拉你进线上仓库成员先)1.查看用户名和地址git config user.namegit config user.email2.修改用户名和地址git config --global user.name 'your new name'git config --global user.email 'your new原创 2020-07-23 18:16:19 · 163 阅读 · 0 评论