- 博客(17)
- 收藏
- 关注
RSS订阅原创 Docker 说明及相关常用命令
容器是完全使用沙箱机制，相互之间不会有任何接口（类似 iPhone 的 app）,更重要的是容器性能开销极低。Docker 从 17.03 版本之后分为 CE（Community Edition: 社区版） 和 EE（Enterprise Edition: 企业版），我们用社区版就可以了。Windows Docker 安装Win10 系统。
2024-08-29 11:42:17
225
原创 前端使用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
2429
原创 vue3中 ref、reactive、toRef、toRefs的区别
vue3.0里给数据添加响应式有很多api可用，有时傻傻分不清，分享一下个人的理解。原文链接：https://blog.csdn.net/u010059669/article/details/112287552一、reactivereactive 用于为对象添加响应式状态。接收一个js对象作为参数，返回一个具有响应式状态的副本。获取数据值的时候直接获取，不需要加.value参数只能传入对象类型import { reactive } from 'vue'// 响应式状态const sta
2022-01-04 16:29:34
345
原创 less全局引入和配置使用
前言:sass和less都是css的拓展语言，less和sass最主要的区别是less是通过Javascript编译，而sass是通过ruby编译的，如果没有引入前端工程化，less会消耗客户端性能，sass会消耗服务端性能，但是引入前端工程化的话，gunt，gulp，webpack等，less和sass在打包阶段都会转化成css，所以不会有区别一. 安装less插件安装lessnpm i less-loader或npm install less-loader --save-dev或np
2022-01-03 17:33:11
2659
原创 vue 插槽（slot）v-slot 使用
插槽是什么？官方解释 插槽就是Vue实现的一套内容分发的API，将元素作为承载分发内容的出口。通俗解释 插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。基本用法现在，有两个组件，A与B，分别如下：A.vue<template> <div> <p>我是A组件</p>
2021-12-03 15:14:24
1473
原创 关于浏览器的协商缓存与强缓存
什么是浏览器缓存浏览器缓存(Brower Caching)是浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载文档。 浏览器缓存的优点有：1.减少了冗余的数据传输，节省了网费2.减少了服务器的负担，大大提升了网站的性能3.加快了客户端加载网页的速度在前端开发面试中，浏览器缓存是web性能优化面试题中很重要的一个知识点，从而说明浏览器缓存是提升web性能的一大利器，但是浏览器缓存如果使用不当，也会产生很多问题，正所谓是，想说爱你，并不是很容易的
2021-12-01 10:44:22
350
原创 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
661
原创 空值合并运算符了解一下？
空值合并运算符空值合并操作符（??）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。与逻辑或操作符（||）不同，逻辑或操作符会在左侧操作数为假值时返回右侧操作数。也就是说，如果使用 || 来为某些变量设置默认值，可能会遇到意料之外的行为。比如为假值（例如，’’ 或 0）时。见下面的例子。const foo = null ?? 'default string';console.log(foo);// expected output:
2021-10-21 12:18:30
437
原创 数组去重，记录一下
//数组去重 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
74
原创 前端使用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
2522
原创 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
76
原创 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
1167
原创 前端获取浏览器类型和版本，记录一下~
前端开发有时候需要判断浏览器类型，在网上找了一些，记录一下，方便以后使用 /* * 获取浏览器版本信息 */ getBrowerInfo() { let userAgent = window.navigator.userAgent.toLowerCase(); let browserType = ""; let browserVersion = ""; // let isIE = // userAgent.match(/msie/) != nu
2021-08-19 17:21:40
940
原创 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
193
原创 ES6数组的合并和取值
ES6数组的合并和取值 工作中遇到一个一维数组的操作，根据id取出二级数组里相应的数据，数据结构类似下面 const list = [ { name:"线控玩具", id:"1", children:[ { id:"a1", name: "线控车"
2021-07-23 16:01:41
773
原创 video标签点击视频全屏播放
早上一来有一个小需求，业务部需要点击表格里面的视频就可以全屏播放，然后我就去看了需求页面video标签不是有一个控件可以全屏播放吗，为啥还要点击视频元素，别问，打工人服从安排因为我是用vue框架自己封装的table组件，所以直接在table里面修改因为在video标签上绑定click事件无用，就在下面加了一个空div，使用position定位到video元素上，然后把click事件绑定到这个div上，然后把当前元素的唯一id传到这个函数里requestFullscreen(...
2021-07-21 12:37:16
14890
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人