
web前端学习笔记
前端菜鸟的进阶之路
终不似、少年游
这个作者很懒,什么都没留下…
展开
-
js 怎么判断数组里是否有空
【代码】js 怎么判断数组里是否有空。原创 2022-11-25 22:49:08 · 904 阅读 · 0 评论 -
git放弃修改把远程的某个文件覆盖本地
git checkout 要放弃修改的文件路径。2.放弃修改的文件,用远程文件覆盖本地文件。1.git status查看本地分支状态。发现修改的文件内容被覆盖了。3.再次查看本地分支状态。原创 2022-08-23 10:31:40 · 869 阅读 · 0 评论 -
vue中element table 单选,添加单选框
vue项目中,element table需要单选,但是组件自带的单选选中样式为高亮,不如单选框明显,想要改为单选框。原创 2022-08-10 18:29:34 · 2581 阅读 · 0 评论 -
vue安装ant-design-vue后报错 Uncaught TypeError: Object(...) is not a function “export ‘XXX‘ was not found
vue安装完ant-design-vue后报错 Uncaught TypeError: Object(…) is not a function我们向下图一样安装完ant-design-vue后运行完,先看下控制台报错,页面出不来再看看vscode 的报错一堆"export 'XXX' was not found in 'vue'类似的东西,经过排查后发现,其实是ant-design-vue 的版本问题。 注意:1.7.6版本这样全局引入没问题查看我们ant的版本我们降低一下版本先卸载再原创 2022-05-03 21:59:44 · 3980 阅读 · 2 评论 -
怎么让别人访问自己的本地vue项目
怎么让别人访问自己的本地vue项目原创 2022-04-29 15:54:10 · 2004 阅读 · 1 评论 -
前端表格分页的功能快捷实现
前端表格分页的功能快捷实现<el-table v-if="activeName == item.name" ref="multipleTable" :data="outTable.slice( (currentPage - 1) * pageSize, currentPage * pageSize原创 2022-04-24 21:31:49 · 215 阅读 · 0 评论 -
Http请求中Content-Type和Accept讲解
Http请求中Content-Type和Accept讲解在Http请求中,我们每天都在使用Content-type来指定不同格式的请求信息,但是却很少有人去全面了解content-type中允许的值有多少,1.Content-TypeMediaType是Internet MediaType,互联网媒体类型;也叫做MIME类型,在Http协议消息头中,使用Content-Type来表示具体请求中的媒体类型信息。1.类型格式:type/subtype(;parameter)?type原创 2022-03-29 19:49:40 · 1653 阅读 · 0 评论 -
vue 动态添加class类名
vue 动态添加class类名 <button class="timeButton" :class="[isButton == 'today'?'hotButton':'']" @click="selectTime('today')"> 今日 </button>.hotButton{ background:#409EFF !important;}原创 2022-03-28 19:45:57 · 1138 阅读 · 0 评论 -
uni-app生产环境去掉console
uni-app生产环境去掉console运行期判断 运行期判断是指代码已经打入包中,仍然需要在运行期判断平台,此时可使用 uni.getSystemInfoSync().platform 判断客户端环境是 Android、iOS 还是小程序开发工具(在百度小程序开发工具、微信小程序开发工具、支付宝小程序开发工具中使用 uni.getSystemInfoSync().platform 返回值均为 devtools)。我们就可以采用这个方式把console.log变为一个空函数if (uni.getS原创 2022-02-25 14:42:51 · 14335 阅读 · 0 评论 -
ES6 扩展运算符 三点(...)
ES6 扩展运算符 三点(…)扩展运算符( spread )是三个点(…)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 该运算符主要用于函数调用。function push(array, ...items) { array.push(...items); } function add(x原创 2022-01-29 21:16:54 · 599 阅读 · 0 评论 -
Echarts柱状图常用属性
Echarts柱状图常用属性 var option = { //-------------- 标题 title ---------------- title: { text: "主标题", textStyle: { color: "#fff", }, subtext: "副标题", subtextStyle: { color: "#bbb", }, padding:转载 2022-01-18 10:47:27 · 3038 阅读 · 0 评论 -
修改el-button--primary的背景颜色
修改el-button–primary的背景颜色如上图,我想给el-button 的type="primary"的背景色加以改变,但是发现加了deep不生效。/deep/.el-button.el-button--primary{ background:#409EFF }打开F12发现添加的颜色没有生效于是想到利用!important加以提高权重,这样就生效了,代码如下/deep/.el-button.el-button--primary{ background:#409E原创 2022-01-08 17:43:36 · 5975 阅读 · 0 评论 -
Vue中 循环出来的Select选择器,禁用掉某一个选项
Vue中 循环出来的Select选择器,禁用掉某一个选项先说需求,需要在非最后的一个选下拉框选项里面,禁用掉无的选项上代码 <el-col :span="4" style="margin-left: 8px; margin-top: 4px"> <el-select v-model="item.relation" placeholder="请选择逻辑"> <el-option原创 2021-12-31 09:01:48 · 2516 阅读 · 2 评论 -
vue(前端)字符串导出文件
vue(前端)字符串导出文件首先安装 FileSaver包npm install file-saver --save在main.js中引入import {saveAs} from 'file-saver';将字符串转为Blob对象let str = new Blob(['要导出的字符串'], {type: 'text/plain;charset=utf-8'}); saveAs(str, `导出文件时的名字.txt`);...原创 2021-12-15 21:13:38 · 1299 阅读 · 0 评论 -
vue-codemirror定位光标位置并在光标处插入信息
vue-codemirror定位光标位置并在光标处插入信息业务场景如下图:在代码编辑器外点击按钮,向代码编辑器内的光标处新增一条拼接好的信息。//插入信息 copyValue(param) { let post1=this.$refs.myCode.codemirror.getCursor(); console.log('post1',post1); let pos2={ line:post1.line, //行号原创 2021-12-01 18:57:35 · 3691 阅读 · 4 评论 -
子组件中$parent获取不到父组件属性及函数
子组件中$parent获取不到父组件属性及函数涉及到很多的前端插件的使用的时候我们并不能直接通过 this.$parent.status找到他的父组件里面的变量。因为有些子组件里面可能外包了一个框架的组件. addNewScript() { console.log("$ref", this.$parent.$parent.$parent.changeStatus()); },...原创 2021-11-25 19:02:54 · 942 阅读 · 0 评论 -
前端怎么获取导入的文件(基于vue)
前端怎么获取导入的文件我们上传文件使用的是input,代码如下<input type="file" style="display: none" ref="json_fil" accept="" @change="importJson"/>```<el-button style=“width:68px;height:32px;line-height:8px;color: #409EFF;border:1px solid #409EFF” @click=“importFile”>原创 2021-11-19 19:14:53 · 852 阅读 · 0 评论 -
vue-codemirror—基于vue的代码在线编辑
vue-codemirror—基于vue的代码在线编辑器CodeMirror(下面简称为cm)是一款基于JavaScript、面向语言的前端代码编辑器。它支持开箱即用,自带了超过100种语言的库,同时还有很多附加功能,目前得到了jetbrains等公司的支持。在这个分类下,能够与cm并驾齐驱的另一个编辑器则是ACE。CodeMirror官网:https://codemirror.net/1. CodeMirror引入在cm官网使用手册中,介绍了在项目中引入cm的方式。如果是传统项目,使用cdn或者原创 2021-11-12 17:39:31 · 31360 阅读 · 8 评论 -
el-autocomplete中给列表添加tooltip提示
el-autocomplete中给列表添加tooltip提示当我们使用了elementUI当中的el-autocomplete,如下图我们不难发现,当内容过长列表内容用省略号代替的时候,如果结果前面的部分都是相似的,那我们的搜索结果可能意义意义就不大。我们可以给我们的列表加上一个鼠标悬浮提示效果,像这样。代码如下 <el-autocomplete v-model="state" :fetch-suggestions="querySear原创 2021-11-02 11:47:49 · 2112 阅读 · 1 评论 -
vue + elementUI (el-autocomplete)实现点击复制功能
vue + elementUI (el-autocomplete)实现点击复制功能 需求:根据提示搜索出结果,并实现点击复制的功能上图:代码: <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="h原创 2021-10-29 11:40:08 · 1861 阅读 · 0 评论 -
修改数组对象的属性名
修改数组对象的属性名有时候接口返回的数组对象属性名不符合我们的要求,这个时候我们就可以去替换其中的属性名。我想要属性名由desc改为value代码:let array=[{ desc:'111' }] array=array.map(v => { return {value : v.desc} }); console.log(array);打印结果...原创 2021-10-28 11:47:09 · 914 阅读 · 0 评论 -
el-input textarea 内部文字标红
el-input input textarea 内部文字标红在chrome中,input、textarea中英文单词的红色波浪线是浏览器默认开启了语法检查导致的。只需要在textarea或者input中添加属性spellcheck=“false” 即可去除该波浪线:<textarea spellcheck="false" autocomplete="off" autocapitalize="off" autocorrect="off"></textarea>...原创 2021-09-26 21:00:47 · 3074 阅读 · 0 评论 -
vue 如何在一个页面上调用另一个页面的方法
vue 如何在一个页面上调用另一个页面的方法首先同一个vue实例来调用两个方法。所以可以建立一个中转站。建立 util.js 中转站文件(任意位置,我是在/assets/js/util.js)import Vue from 'vue'export default new Vue分别在两个页面引入该文件(注意路径)import Utils from '../../assets/js/util.js';调用方代码:methods: { functionA() {原创 2021-09-17 14:50:44 · 3468 阅读 · 1 评论 -
git中Updates were rejected because the tip of your current branch is behind
git中Updates were rejected because the tip of your current branch is behind出现这个错误的原因是git本地仓库的当前版本低于远程仓库的版本,即:你在github上进行的修改没有同步到本地git仓库中。指令git pull origin master...原创 2021-09-09 21:55:36 · 131 阅读 · 0 评论 -
vue中快速使用百度地图:vue-baidu-map
先上效果图:安装 vue-baidu-map:npm install vue-baidu-map --save引入全局引入 vue.use(BaiduMap,{ ak:' ' // }) ``` 局部引入import baiduMap from 'vue-baidu-map/components/map/Map.vue';在需要的页面使用 <template> <div> <原创 2021-09-05 11:04:40 · 505 阅读 · 0 评论 -
常用的git分支管理指令
常用的git分支管理指令查看本地分支$git branch查看本地和远程分支$git branch –a 更新$git pull查看有没有修改$git status更新远程分支git remote update origin -p创建t-master分支$git branch t-master 切换到t-master分支$git checkout t-master 创建分支且切换到t-master分支上$git checkou原创 2021-09-05 09:59:31 · 309 阅读 · 0 评论 -
Content type ‘application/x-www-form-urlencoded;charset=UTF-8‘ not supported
问题点1:如果Content-Type设置为“application/x-www-form-urlencoded;charset=UTF-8”无论是POST请求还是GET请求都是可以通过这种方式成功获取参数,但是如果前端POST请求中的body是Json对象的话,会报上述错误。请求中传JSON时设置的Content-Type 如果是application/json或者text/json时,JAVA中request.getParameter("")怎么也接收不到数据。这是因为,Tomcat的HttpSer原创 2021-08-25 09:29:39 · 1226 阅读 · 0 评论 -
Unable to find instance for XXXX
当你的控制台报了这样的错误这就是请求的后端服务没启动,联系后端启动后端就行。原创 2021-08-24 14:16:27 · 9188 阅读 · 2 评论 -
vuex store 简笔
每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store中的状态发生变化,那么相应的组件也会相应地得到高效更新。你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit)mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而原创 2021-08-19 15:34:15 · 112 阅读 · 0 评论 -
Vue 穿透修改饿了么样式
Vue 穿透修改饿了么样式/deep/ 第三方(类名)代码/deep/ .el-textarea__inner{ width:1200px; height: 1000px; }原创 2021-08-19 15:17:15 · 677 阅读 · 0 评论 -
JS纯前端实现文件保存
JS纯前端实现文件保存<body> <a href="" id="a">click here to download your file</a> <button onclick="download('file text', 'myfilename.txt', 'text/plain')">Create file</button></body><script>function down原创 2021-08-09 14:11:25 · 3169 阅读 · 0 评论 -
JavaScript中的防抖函数与节流函数
防抖函数与节流函数函数防抖(debounce):当持续触发事件时,在设置的周期内没有再触发事件,事件处理函数才会执行一次,如果设定的周期没有结束,又一次触发了事件,就重新开始延时。当用户频繁点击button按钮时,控制台会频繁的输出结果,这种频繁调用事件处理程序,会加重浏览器的负担,导致用户体验非常糟糕。为了解决上述问题,我们在编码中可以使用debounce防抖技术。防抖原理:是维护一个计时器,在规定的delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置原创 2021-07-21 17:18:37 · 163 阅读 · 0 评论 -
JS && 与运算
逻辑运算又称布尔代数,就是布尔值(true 和 false)的“算数”运算。逻辑运算符包括:逻辑与&&、逻辑或||和逻辑非!逻辑与运算逻辑与运算(&&)是 AND 布尔操作。只有两个操作数都为 true 时,才返回 true,否则返回 false。具体描述如表所示。第一个操作数第二个操作数运算结果truetruetruetruefalsefalsefalsetruefalsefalsefalsefalse.原创 2021-07-14 17:43:18 · 119 阅读 · 0 评论 -
JS数组前加三点什么意思
JS数组前加三点什么意思数组加三点,表示将数组内元素以空格为罗列出来,常用于寻找数组内的最优值。var arr = [11, 22, 33, 44,55];console.log(...arr);输出:11 22 33 44 55原创 2021-07-13 16:57:44 · 1880 阅读 · 0 评论 -
JS获取前半个月的日期信息
JS获取前半个月的日期信息var myDate=new Date(); // console.log(myDate.getMonth(),'月份') // console.log(myDate.getFullYear(),'年份') var maxDate= new Date(myDate.getFullYear(), myDate.getMonth()+1, 0).getDate() // console.log(my原创 2021-07-07 15:53:04 · 612 阅读 · 0 评论 -
Js获取当前日期时间及其他操作
Js获取当前日期时间及其他操作var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)myDate.getMonth(); //获取当前月份(0-11,0代表1月)myDate.getDate(); //获取当前日(1-31)myDate.getDay(); //获取当前星期X(0-6原创 2021-07-07 13:45:58 · 2354 阅读 · 0 评论 -
echarts饼图标题居中以及调整主副标题的间距、字号
echarts饼图标题居中以及调整主副标题的间距、字号text:主标题subtext:副标题textStyle: {} //主标题的属性设置subtextStyle: {} //副标题的属性itemGap:主副标题之间的间距textAlign:整体(包括 text 和 subtext)的水平对齐 title: { show: true, text: '本月参评项目', s原创 2021-07-05 10:47:28 · 10312 阅读 · 0 评论 -
echarts环形图小结
echarts环形图小结就是这样的图来看optionoption = { tooltip: { //提示条的意思, trigger: 'item' //trigger是触发器的意思,就是鼠标放上去显示的 }, legend: { top: '5%', left: 'center' }, series: [ { name: '访问来源',原创 2021-06-30 22:32:27 · 760 阅读 · 2 评论 -
switchHost工具的使用
host介绍Hosts是一个没有扩展名的系统文件,可以用记事本等工具打开,其作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”,当用户在浏览器中输入一个需要登录的网址时,系统会首先自动从Hosts文件中寻找对应的IP地址,一旦找到,系统会立即打开对应网页,如果没有找到,则系统会再将网址提交DNS域名解析服务器进行IP地址的解析为什么需要使用SwitchHost1.你的域名没有在DNS备案的时候 你需要修改hosts文件来转换2.还有就是一些破解软件需要一个虚假host来欺骗原创 2021-06-21 22:39:55 · 854 阅读 · 1 评论 -
暂时性死区
只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。var tmp = 123;if (true) { tmp = 'abc'; // ReferenceError let tmp;}上面代码中,存在全局变量tmp,但是块级作用域内let又声明了一个局部变量tmp,导致后者绑定这个块级作用域,所以在let声明变量前,对tmp赋值会报错。ES6 明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了转载 2021-05-27 10:38:01 · 123 阅读 · 0 评论