- 博客(15)
- 收藏
- 关注
原创 vue proxy代理流程
vue 中的 proxy 就是利用了 Node 代理,原理还是服务器端没有跨域这一说,也是用了这么一个插件 -- 摘http-proxy-middlewaregithub地址:地址暂时理解vue代理原理流程为:vue3.0配置文件:vue.config.js ---> devServer.proxy ---> webpack ---> http-proxy-middleWare中间件 ---> express ---&...
2021-08-30 22:27:02 418
原创 Echarts图表根据DIV和窗口大小自适应容器
项目场景:vue单页面项目新增一个首页,内容主要为数据展示,包括饼图、折线图、柱状图,通过echarts图表库开发页面。#实现:普通页面会展开左侧菜单,但首页是全屏展示,需要在打开首页的同时隐藏菜单并使首页宽度100%,图表根据容器宽度自适应问题描述:一般echart图通过监听window窗口大小并使用this.myChart.resize() 重新调整尺寸来自适应容器的大小。但目前遇到一个问题,#question:首页的左侧菜单栏属于document内容,不触发窗口监听,所以需要#监.
2021-08-30 21:03:58 3072 1
原创 引入css的4种方式
1、内联样式表:<div style="color: red;"></div>2、内部样式表:<style type="text/css">span{color: red;}</style>3、外部样式表:<link href="myStyle.css" rel="stylesheet" type="text/css" />4、导入式样式表:<style type="text/css">@import url("mySt..
2021-08-10 23:40:28 385
原创 文本超出省略号
// 1、文本一行,超出省略号white-space: nowrap; // 不换行overflow: hidden; // 超出隐藏text-overflow: ellipsis; // 超出省略号// 2、文本一行,超出隐藏white-space: nowrap;overflow: hidden;// 3、多行展示,超出省略号(父高度需自适应,否则可能会漏出)display: -webkit-box; /*值必须为-webkit-box或者-webkit-inline-box*/.
2021-08-10 23:36:12 87
原创 css滚动条样式修改
::-webkit-scrollbar{ width: 5px; height: 5px;}//定义背景颜色和圆角::-webkit-scrollbar-thumb{ border-radius: 1em; background-color: rgba(50,50,50,.3);}//定义滚动条轨道 内阴影+圆角::-webkit-scrollbar-track{ border-radius: 1em; background-color: rgba(50,50,50,..
2021-08-10 23:31:06 71
原创 JS 数组filter方法的使用
filter() 方法创建一个新的数组,对每个元素遍历,符合条件则可以返回,不符合就过滤掉。接收两个参数,一个是函数,返回一个布尔类型的值,决定元素是否保留,一个是函数的this指向(类似map方法);// 1、筛选普通数组----------------------------------const array = [1, 2, 3, 4]const obj = { name: 'tom' } const temp = array.filter(function(el, index, a
2021-07-29 23:30:28 1069
原创 数组遍历map方法的简单使用
接收两个参数,一个是回调函数,一个是回调函数的this指向;// 普通数组 用例一 ----------------------------------------------------------------------const array = [1, 2, 3, 4]const obj = { name: 'tom' }const temp = array.map(function(el, index, arr){ // 当前对象, 索引, 总数组对象 console.log(t
2021-07-28 23:08:19 367
原创 两栏布局与三栏布局的几种方式
一、两栏布局左侧(a)宽度固定,右侧(b)自适应1、a浮动,定宽高;b定高,并添加margin-left值为a的宽度;// 子元素默认占比100%2、ab全浮动,a定宽高,b定高,并且b的宽度使用css计算属性calc(100% - a的宽度);3、都是用绝对布局,b的left值为a的宽度;4、使用display:flex布局,a定宽,b使用flex:1自适应剩余宽度;二、三栏布局左(a)右(c)固定,中间(b)宽度自适应1、a和c宽高固定,b使用margin-left:a的
2021-07-27 23:28:02 135
原创 VUE props验证格式及注意点
子组件使用props接收父组件注入属性的最简单的方式是:props: [ 'name', 'age']注意点:1、父子组件单项数据流;2、子组件不能直接修改父组件的值;3、动态响应,父变则子变;4、可规定传入变量类型等规则(常用于公共组件的封装);5、未接收的porps属性值会绑定在子元素的根元素上,如果不想要,使用inheritAttrs:false去掉;6、使用多个class属性的值会合并。...
2021-07-25 16:41:22 308
原创 computed和watch的相同和不同点
先看一下代码格式的区别// 计算属性computed: { fullName: function() { return this.firstName + ' - ' +this.lastName; }}// 监听属性 方式一watch: { firstName: function(newV,oldV) { this.fullName = newV + ' - ' + this.lastName; }, lastNam
2021-07-25 16:31:09 347
原创 JS对象数组根据中文拼音排序
// 1.中文数组排序const arr= ['蓝天', '白云', '晴空', '万里'];arr = arr.sort((a, b) => { return a.localeCompare(b);});// 2.对象数组排序const arr = [ {label: '蓝天', text: '100'}, {label: '白云', text: '200'}, {label: '晴空', text: '300'}.
2021-07-20 22:47:01 360
原创 为什么JS是单线程?
为了避免复杂性,从一诞生,JavaScript就是单线程,这已经成了这门语言的核心特征。为了利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,但是子线程完全受主线程控制,且不得操作DOM。所以,这个新标准并没有改变JavaScript单线程的本质。
2021-07-20 22:05:22 471
原创 Git、Gitlab和Maven、Oracle管理工具
Git:是一个开源的分布式版本控制系统,可以有效、高速的处理从很小到非常大的项目版本管理。SourceTree是一个免费的Git GUI开发工具,一个GUI Client。 Gitlab是一个用于仓库管理系统的开源项目,使用Git作为代码管理工具,并在此基础上搭建起来的web服务。Maven:是一个项目管理和整合工具,Maven 使用了一个标准的目录结构和一个默认的构建生命周期在有多个开发团队环境...
2018-05-31 18:45:02 850
原创 SourceTree和Maven
SourceTree简介SourceTree 是 Windows 和Mac OS X 下免费的 Git 和 Hg 客户端,拥有可视化界面。同时它也是Mercurial和Subversion版本控制系统工具。支持创建、提交、clone、push、pull 和merge等操作。1.克隆:本地或远程目录中的git项目克隆到本地2.拉取:把远程仓库的更新拉取到本地仓库(合并)3.获取:把远程仓库的更新拉取...
2018-05-28 17:33:45 252
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人