- 博客(37)
- 收藏
- 关注
RSS订阅原创 【初学vue3笔记】
【初学vue3笔记】值得注意的新特性1. TeleportTeleport 是什么？它解决的是什么问题？用法？Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术应用场景：一个常见的场景是创建一个包含全屏模式的组件。在大多数情况下，你希望模态框的逻辑存在于组件中，但是模态框的定位很快就很难通过 CSS 来解决，或者需要更改组件组合。类似这种结构<body> <div style="position: relative;">
2021-08-10 16:55:08
436
原创 vue+vue2-ace-editor 代码编辑器支持groovy语言及自定义代码提示
vue+vue2-ace-editor 代码编辑器支持groovy语言及自定义代码提示效果如图所示安装npm install --save-dev vue2-ace-editor代码如下自定义代码提示部分符号不支持比如= +等<template> <div class="container"> <editor v-model="content" ref="aceEditor" @init="editorInit" lang="gro
2021-08-06 10:45:44
2404
原创 记录遇到的特殊问题
记录遇到的特殊问题苹果ios系统下不支持 yyyy-MM-dd 和 yyyy.MM.dd 的日期格式,仅支持 yyyy/MM/dd 日期replaceAll对浏览器的兼容性，可以用replace和正则结合代替使用如果不增加/g关键字，则表示替换第一个比如replaceAll(’"’,’\"’) 可替换成 replace(/"/g,’\"’)反斜杠会被转义导致值的变化比如需要将双引号替换成 " 需要在替换的时候增加一个反斜杠请求参数过长时需使用data进行传参highcharts 中默认开启
2021-08-05 16:51:39
157
原创 vue+echarts实现词云图表
要想实现词云图表需单独下载echarts-wordcloud效果如图安装npm install echartsnpm install echarts-wordcloudmain.js引入import echarts from "echarts"Vue.prototype.$echarts = echarts使用<template> <div class="container"> <div id="wordCloudChar
2021-08-05 16:35:50
685
2
原创 浏览器缓存问题
浏览器缓存问题浏览器设置禁止强制缓存(这种方法是不使用于生产环境的情况)在html文件中添加meta标签，告诉浏览器强制不缓存此文件<meta http-equiv="pragma" content="no-cache" /><meta http-equiv="Cache-Control" content="no-cache no-store must-revalidate" /><meta http-equiv="Expires" content="0"
2021-08-05 11:04:47
187
转载 为什么Vue3.0不再使用defineProperty实现数据监听？
为什么Vue3.0不再使用defineProperty实现数据监听？导 读vue3.0中，响应式数据部分弃用了Object.defineProperty，使用Proxy来代替它。本文将主要通过以下方面来分析为什么vue选择弃用Object.defineProperty。Object.defineProperty真的无法监测数组下标的变化吗？分析vue2.x中对数组Observe部分源码对比Object.defineProperty和Proxy一 无法监控到数组下标的变化？在一些
2021-08-04 15:17:00
764
原创 【初学vue3笔记】
【初学vue3笔记】1. 创建项目npm init vite-app my-projectvue create my-projectnpm init @vitejs/app my-vue-app -- --template vue2. 值得注意的新特性组合式 API为什么通过创建 Vue 组件，我们可以将接口的可重复部分及其功能提取到可重用的代码段中。仅此一项就可以使我们的应用程序在可维护性和灵活性方面走得更远。然而，我们的经验已经证明，光靠这一点可能是不够的，尤其是当你的应用程序
2021-08-04 09:26:47
100
原创 vue使用html2canvas、jspdf将html转pdf导出
vue使用html2canvas、jspdf将html转pdf导出1.安装插件npm install --save html2canvasnpm install jspdf --save2.引入插件import html2canvas from 'html2canvas'import JsPDF from 'jspdf'3.设置导出内容<div id="code" ref="contentRef">1111111111111111</div>4.选择导出内容
2021-07-29 14:34:14
300
原创 vue+summernote富文本编辑器
vue+summernote富文本编辑器最近项目中有新增编辑报告的需求需使用富文本编辑器，在网上找了几篇相关博客，于是选择了summernote ，summernote是一款轻量级的富文本编辑器，比较容易上手，使用体验流畅，支持各种主流浏览器。参考文章 https://blog.csdn.net/davidhzq/article/details/100842866summernote官网 https://summernote.org/实现效果1.安装所需的依赖npm instal
2021-07-28 16:05:45
3200
2
原创 每天一条JS小知识点 break 或 continue 循环函数
每天一条JS小知识点 break 或 continue 循环函数停止循环是循环中一个常见的需求。使用for循环我们可以用break提前结束循环。const arr = [0, 1, 2, 3, 4];for (var i = 0; i < arr.length; i++) { if (arr[i] === 2) { break; // stop the loop } console.log(arr[i]);}// 0, 1另一个常见的需求使我们需要直接取得变量。一
2021-04-08 09:21:16
166
转载 总结18个webpack插件，总会有你想要的！
总结18个webpack插件，总会有你想要的！何为插件(Plugin)？专注处理 webpack 在编译过程中的某个特定的任务的功能模块，可以称为插件。Plugin 是一个扩展器，它丰富了 webpack 本身，针对是 loader 结束后，webpack 打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听 webpack 打包过程中的某些节点，执行广泛的任务。Plugin 的特点是一个独立的模块模块对外暴露一个 js 函数函数的原型 (prototype) 上定义了一个注入 c
2021-03-31 15:55:32
158
1
原创 vue项目中配置请求多个服务器解决方案
vue项目中配置请求多个服务器解决方案解决方案vue.config.js 配置devServer: { port: 3000, proxy: { // 第一台服务器配置 '/cgi': { target: 'http://localhost:8005', ws: true, changeOrigin: true, pathRewrite: { '^/cgi': '/cgi' } },
2021-03-31 09:30:51
2570
8
原创 javascript 一维数组与树形数据的转换
javascript 一维数组与树形数据的转换1. 将扁平化的数组转为树状结构模拟数据let datas = [ { label: '111', id: 1, parentid: 0 }, { label: '222', id: 2, parentid: 0 }, { label: '333', id: 3, parentid: 0 }, { label: '22221', id: 21, parentid: 2 }, { label: '22222221',
2021-03-30 16:32:15
446
1
原创 每天一条JS小知识点 Javascript多维数组扁平化
每天一条JS小知识点 Javascript多维数组扁平化var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];要求返回：[1, 2, 3, 4, 5, 6, 7, 8, 9]使用concat()和apply()var myNewArray = [].concat.apply([], myArray);// [1, 2, 3, 4, 5, 6, 7, 8, 9]使用reduce()var myNewArray = myArray.reduce(f
2021-03-30 09:12:38
97
1
原创 vscode console.log 插件
vscode console.log 插件在项目中经常会打印数据进行调试，每次敲console.log 好麻烦，(浏览器Sources断点更适用于复杂、异步的调试bug)发现了一个vscode插件 javascript console utils安装使用方法 随意选中变量ctrl shift + L也可以通过 ctrl shift + D 一键删除本页面所有console.log这里再分享个插件 babel-plugin-transform-remove-console 可移除produc
2021-03-29 17:59:34
2760
2
原创 vue 多页应用打包(使用html-webpack-plugin)
vue 多页应用打包(使用html-webpack-plugin)安装npm install --save-dev html-webpack-plugin使用const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports ={ entry: { index: './src/index.js', tod: './src/tod.js', }
2021-03-29 16:39:35
493
8
原创 vue 视频播放(使用vue-video-player)
vue 视频播放(使用vue-video-player)安装npm i vue-video-player -S引入import { videoPlayer } from 'vue-video-player'import 'video.js/dist/video-js.css'import 'vue-video-player/src/custom-theme.css'使用<template> <div class="container"> <vid
2021-03-29 16:04:08
2014
6
原创 每天一条JS小知识点 取得文件扩展名
每天一条JS小知识点 取得文件扩展名怎样取得文件扩展名 ?var file1 = "aaa.xsl";var file2 = "bbb.doc";getFileExtension(file1); //returs xslgetFileExtension(file2); //returs docfunction getFileExtension(filename) {}解决方法 1: 正则表达式function getFileExtension1(filename) { ret
2021-03-29 09:37:04
94
原创 每天一条JS小知识点 三个实用的javascript小技巧
每天一条JS小知识点 三个实用的javascript小技巧从后向前获取数组元素var arr = [1, 2, 3, 4]console.log(arr.slice(-1)) // [4]console.log(arr.slice(-2)) // [3, 4]console.log(arr.slice(-3)) // [2, 3, 4]console.log(arr.slice(-4)) // [1, 2, 3, 4]短路条件句如果想在某个条件逻辑值为true时，执行某个函数,比如
2021-03-25 10:35:51
191
原创 每天一条JS小知识点 为什么应该在相等比较中使用 Object.is()
每天一条JS小知识点 为什么应该在相等比较中使用 Object.is()我们都知道 JavasSript 是弱类型的，并且当我们使用 == 作比较时，在一些情况下由于类型转换或者说“把两个操作数中的一个转换成另一个，然后在比较”，会出现意想不到的结果。0 == ' ' // truenull == undefined //true[1] == true //true因此 JavaScript 中给我们提供了全等操作符 ===, 它比不全等操作符更加严格并且不会发生类型转换。但是用 === 来进行
2021-03-24 10:18:57
57
原创 数组去重的12种方法
数组去重的12种方法1. 利用ES6 Set去重function unique (arr) { return Array.from(new Set(arr))}var arr = [1,1,3,5,6,7,7,8,null,null,0,{},{}];console.log(unique(arr))[1, 3, 5, 6, 7, 8, null, 0, {…}, {…}] //不能去掉 {} 空对象2. 利用for嵌套for，然后splice去重function unique(arr)
2021-03-23 14:29:35
199
原创 dayjs使用总结
dayjs使用总结Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。安装 npm install dayjs --save项目使用var dayjs = require('dayjs')//import dayjs from 'dayjs' // ES 2015dayjs().format()浏览器<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.4.1/dayjs.min
2021-03-18 10:40:48
1186
3
原创 前端下载后台传来的流文件
前端下载后台传来的流文件1.window.open(url,’_blank’)2.使用Blob对象downfile() { axios .post(postUrl, params, { responseType: 'arraybuffer' }) .then((res) => { const link = document.createElement('a') let blob = new Blob([res.d
2021-03-17 14:48:17
119
原创 发布自己的npm工具包
发布自己的npm工具包1.注册NPM 账号注册地址：www.npmjs.com/2.新建目录初始化项目npm init模块名称需遵循相关政策要求:https://www.npmjs.com/policies,模块名称不能和已有npm模块名称冲突name 模块名 唯一性version 版本main 当你用require(‘modulename’)引用这个模块的时,引用的是哪个文件keywords为别人搜索到你的包的关键字author 作者3.新建index.js写自己的方法expo
2021-03-16 15:23:10
140
原创 vue导出表格数据
vue导出表格数据1.下载插件npm install xlsx --savenpm install file-saver --save2.引用插件import XLSX from 'xlsx'import FileSaver from 'file-saver'HTML<el-button @click="exportData" style="margin-bottom: 20px"> 导出数据</el-button><el-table re
2021-03-16 10:59:53
103
转载 这些 JS 中强大的操作符，总有几个你没听说过
JS 里的操作符大家每天都在使用，还有一些 ES2020、ES2021 新加的实用操作符，这些共同构成了 JS 灵活的语法生态。本文除介绍常用的操作符之外，还会介绍 JS 里一些不常用但是很强大的操作符，下面我们一起来看看吧～1. 数值分割符 _ES2021 引入了数值分割符 _，在数值组之间提供分隔，使一个长数值读起来更容易。Chrome 已经提供了对数值分割符的支持，可以在浏览器里试起来。let number = 100_0000_0000_0000 // 0太多了不用数值分割符眼睛看花了con
2021-03-16 10:33:46
87
原创 js进阶小技巧
检查日期是否为工作日const isWeekday = (date) => date.getDay() % 6 !== 0;console.log(isWeekday(new Date(2021, 2, 15)));获取随机布尔值 true/falseconst randomBoolean = () => Math.random() >= 0.5;console.log(randomBoolean());反转字符串const reverse = str => str
2021-03-15 20:01:15
82
原创 js-xlsx vue导入excel在线预览
js-xlsx vue导入excel在线预览导入XLSX库官方地址Github安装npm install xlsx --s引入import XLSX from ‘xlsx’HTML<template> <div class="upload-container"> <el-upload ref="upload" action="/" :show-file-list="false" :on-change="
2021-03-15 11:53:26
2961
1
原创 Echarts图表增加放大功能
Echarts图表增加放大功能<template> <div> <div class="chart" id="chart" style="width: 100% !important; min-width: 200px; height: 400px" ></div> <div id="fullScreenMask"> <!-- 点击任意区域取消放大 -->
2021-03-11 11:46:15
3169
1
转载 6 个没人讲过的 CSS 属性
6 个没人讲过的 CSS 属性数十年来，CSS 和 HTML 一直都是互联网的基石。虽然 HTML 能够负责创建网站结构并进行图文排列，但在设计网站上却无能为力。自 1994 年以来，设计网站一直是 CSS 的唯一目的，它是一门描述网站外观的语言。多年来，CSS 不断地推出更多的新属性，例如 Flexbox（弹性盒）或是 Grid（网格）。尽管创建 Web 应用广受欢迎且日趋复杂，但大多数开发者仍有很多不了解的 CSS 属性和技巧。以下是你可能从未听说过的 6 个 CSS 属性：1. all
2021-03-11 10:32:26
82
原创 时间戳转换日期格式
时间戳转换日期格式什么是时间戳Unix时间戳(Unix timestamp)，或称Unix时间(Unix time)、POSIX时间(POSIX time)，是一种时间表示方式，定义为从格林威治时间1970年01月01日00时00分00秒起至现在的总秒数。10位时间戳和13位时间戳的区别date默认精度是毫秒，也就是说生成的时间戳就是13位的，有的时间戳默认就是10位的，因为其精度是秒。时间戳转换日期格式// 时间戳转换 formatLinuxTime(data){ if
2021-03-10 16:12:19
919
原创 forEachr循环实现异步生成多个echarts图表
forEachr循环实现异步生成多个echarts图表需求：需要循环数组发起多个请求，生成多个echarts图表数据量过大，前端缓存查询结果保持1分钟本人使用的是vue框架，但是是创建一个id document.getElementById() 方式获取dom结构循环动态生成idJS里异步获取图表数据，循环获取每个dom的id，然后动态渲染每个图表上图使用 this.$nextTick是为了解决在图表元素并未加载的情况下进行eharts.init（），会报错 Cannot read p
2021-03-10 15:45:39
2438
原创 Echarts 踩坑
Echarts 踩坑接到一个需求，画个柱状图，两条线分别垂直与x轴与y轴感觉没什么难度看文档，开始在线测试Echarts里提供了markLine功能 （图表标线）option = { xAxis: { type: 'category', data: ['20', '30', '40', '55', '60', '70', '80'] }, yAxis: { type: 'value' }, series: [{
2021-03-10 10:57:46
353
1
原创 Node.js基础
Node.js基础Node.js 介绍是什么简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js 脱离了浏览器，可以操作网络、文件等Node.js = ECMAScript + 各种基于 ES 的模块（net、http、fs）用途服务端开发（通过网络提供各种数据）工具开发：vue-cli / create-react-app桌面端（electorn, nw.js）：vs
2021-03-09 19:58:44
196
2
原创 常用校验规则积累
常用校验规则积累校验是否有脚本语言<>var pattern = /<\/?[a-zA-Z]+(\s+[a-zA-Z]+=".*")*>/g;let isHtml = [] = event.target.value.match(pattern);if(isHtml && isHtml.length ){ return error;}名称不能包含【\\/?????"<>|】这些非法字符var regs = new RegEx
2021-03-09 17:28:23
214
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人