![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
小前端半半
这个作者很懒,什么都没留下…
展开
-
前端使用js压缩图片上传
后端要求前端上传图片时进行压缩,本文记录js和canvas来压缩图片,时间有点久,忘记原文的地址了 // 上传图片压缩, 调用此方法返回的blob文件,在FormData.append的时候file字段必须传第三参数为文件名字 compressImg(file) { const _that = this; var fileSize = parseFloat(parseInt(file["size"]) / 1024 / 1024).toFixed(2); var read =原创 2022-04-29 10:11:45 · 2414 阅读 · 0 评论 -
vue 插槽(slot)v-slot 使用
插槽是什么?官方解释 插槽就是Vue实现的一套内容分发的API,将元素作为承载分发内容的出口。通俗解释 插槽就是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签。简单理解就是子组件中留下个“坑”,父组件可以使用指定内容来补“坑”。基本用法现在,有两个组件,A与B,分别如下:A.vue<template> <div> <p>我是A组件</p>原创 2021-12-03 15:14:24 · 1441 阅读 · 0 评论 -
关于浏览器的协商缓存与强缓存
什么是浏览器缓存浏览器缓存(Brower Caching)是浏览器在本地磁盘对用户最近请求过的文档进行存储,当访问者再次访问同一页面时,浏览器就可以直接从本地磁盘加载文档。 浏览器缓存的优点有:1.减少了冗余的数据传输,节省了网费2.减少了服务器的负担,大大提升了网站的性能3.加快了客户端加载网页的速度在前端开发面试中,浏览器缓存是web性能优化面试题中很重要的一个知识点,从而说明浏览器缓存是提升web性能的一大利器,但是浏览器缓存如果使用不当,也会产生很多问题,正所谓是,想说爱你,并不是很容易的原创 2021-12-01 10:44:22 · 342 阅读 · 0 评论 -
vite 快速搭建vue,react 项目命令
了解viteVite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个 基于原生 ES-Module 的前端构建工具。vite官网地址:https://vitejs.cn/guide/ 传送地址兼容问题兼容性注意Vite 需要 Node.js 版本 >= 12.0.0。cmd打开终端,输入node -v查看当前node版本信息1,搭建vite项目命令vue + TypeScriptnpm init vite@latest vite-vue-ts --t原创 2021-11-05 15:51:56 · 642 阅读 · 0 评论 -
空值合并运算符了解一下?
空值合并运算符空值合并操作符(??)是一个逻辑操作符,当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数。与逻辑或操作符(||)不同,逻辑或操作符会在左侧操作数为假值时返回右侧操作数。也就是说,如果使用 || 来为某些变量设置默认值,可能会遇到意料之外的行为。比如为假值(例如,’’ 或 0)时。见下面的例子。const foo = null ?? 'default string';console.log(foo);// expected output:原创 2021-10-21 12:18:30 · 424 阅读 · 0 评论 -
数组去重,记录一下
//数组去重 arrUnique(arr, key) { let returnArr = []; if (key) { // 对象数组去重 const obj = {}; returnArr = arr.reduce((cur, next) => { obj[next[key]] ? "" : (obj[next[key]] = true && cur.push(next)); .原创 2021-10-19 11:27:55 · 64 阅读 · 0 评论 -
前端使用JavaScript保存图片
在最近的开发当中,需要将一个生成的二维码保存在本地,然后网上找了一些资料,记录一下~1.在你需要保存的img元素上绑定一个类名 <vue-qr class="QRImg" :size="260" :text="QRCodeUrl" :logoSrc="QrlogoSrc" colorLight="#fff" colorDark="#000" :margin="0"></vue-qr> 2.使用img保存 // 下载二维码 downloa原创 2021-09-25 15:34:34 · 2443 阅读 · 0 评论 -
git 常用命令,死记!!!
git branch 查看本地所有分支git status 查看当前状态 git commit 提交 git branch -a 查看所有的分支git branch -r 查看本地所有分支git commit -am "init" 提交并且加注释 git remote add origin git@192.168.1.119:ndshowgit push origin master 将文件给推到服务器上 git remote show origin 显示远程库origin里的资源 git原创 2021-09-15 17:06:52 · 66 阅读 · 0 评论 -
input只能输入数字或含两位小数的正则
var reg=/^\d+(\.\d{0,2})?$/;\d:首位必须是数字+拼接后面的()拼接的内容\.挨着必须是小数点\d小数点后面必须是数字{0,2}两位有效数字$:匹配任何结尾为之前所写的字符串 即 小数点和两位小数 <el-input v-model="price" oninput="value=value.match(/^\d+(?:\.\d{0,2})?/)" clearable原创 2021-09-01 14:29:13 · 1137 阅读 · 0 评论 -
前端获取浏览器类型和版本,记录一下~
前端开发有时候需要判断浏览器类型,在网上找了一些,记录一下,方便以后使用 /* * 获取浏览器版本信息 */ getBrowerInfo() { let userAgent = window.navigator.userAgent.toLowerCase(); let browserType = ""; let browserVersion = ""; // let isIE = // userAgent.match(/msie/) != nu原创 2021-08-19 17:21:40 · 918 阅读 · 0 评论 -
vuex模块化管理 state ,mutations ,actions ,getters
因为项目越写越大,之前就是直接在store下的index.js文件直接写状态和数据,然后越写越多,也不方便维护,现在抽时间把项目store分一下模块管理,不懂的同学建议多参考vue官网api1.首先创建Module文件夹,根据自己项目的需求创建自己的模块2.在index.js文件引入你创建好的模块import Vue from "vue";import Vuex from "vuex";import createPersistedState from "vuex-persistedstate原创 2021-07-26 17:15:20 · 182 阅读 · 0 评论 -
ES6数组的合并和取值
ES6数组的合并和取值 工作中遇到一个一维数组的操作,根据id取出二级数组里相应的数据,数据结构类似下面 const list = [ { name:"线控玩具", id:"1", children:[ { id:"a1", name: "线控车"原创 2021-07-23 16:01:41 · 761 阅读 · 0 评论