weixin_45965632的博客

原创 webpack配置优化

webpack详细配置和优化

原创 echarts图表堆叠图点击legend排序

multi_bubbleSort(obj) { let data0 = obj.data0;//横坐标数组 let data = new Array(data0.length).fill(0);//定义一组与横坐标数组相同大小的且全部为0的数组，用来存储堆积柱状图的和 let len = obj.data0.length;//横坐标数组长度 for (let k = 0; k < len; k++) { for (let m = 0;

原创 echarts柱状图折线图

原创 JAVASCRIPT

DOM常见兼容汇总//1. 滚动条距顶端的距离var scroll_top = Math.floor(document.documentElement.scrollTop || document.body.scrollTop);//2. 滚动条距左端的距离var scroll_left = Math.floor(document.documentElement.scrollLeft || document.body.scrollLeft);//3. byClassName//byClassNam

转载 js 宿主对象的属性和方法总结

js 宿主对象的属性和方法总结(1)属性：//height,width;a=document.documentElement.clientHeight;//文档可视高度,由浏览器决定b=document.documentElement.scrollHeight;//文档可滚动高度，由文档内容决定c=document.body.clientHeight;//文档内容body体高度，由文档内容决定d=document.documentElement.scrollTop;//文档滚动高度，由已

原创 移动web开发之响应式布局___day07小白到大神

移动端WEB开发之响应式布局1.0 响应式开发原理1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。设备的划分情况：小于768的为超小屏幕（手机）768~992之间的为小屏设备（平板）992~1200的中等屏幕（桌面显示器）大于1200的宽屏设备（大桌面显示器）1.2 响应式布局容器响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和

原创 移动web开发_rem布局___day06小白到大神

移动web开发之rem布局rem基础rem单位rem (root em)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。/* 根html 为 12px */html { font-size: 12px;}/* 此时 div 的字体大小就是 24px */ div { font-size:

原创 移动web开发_flex布局___day05小白到大神

移动web开发——flex布局1.0传统布局和flex布局对比1.1传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局1.2 flex布局操作方便，布局极其简单，移动端使用比较广泛pc端浏览器支持情况比较差IE11或更低版本不支持flex或仅支持部分1.3 建议如果是pc端页面布局，还是采用传统方式如果是移动端或者是不考虑兼容的pc则采用flex2.0 flex布局原理flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活

原创 移动web开发_流式布局___day04小白到大神

移动web开发流式布局1.0 移动端基础1.1浏览器现状PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。总结：兼容移动端主流浏览器，处理Web

原创 HTML5---CSS3___day03小白到大神

cHTML5 第三天一、 认识 3D 转换3D 的特点近大远小物体和面遮挡不可见三维坐标系x 轴：水平向右 – 注意：x 轴右边是正值，左边是负值y 轴：垂直向下 – 注意：y 轴下面是正值，上面是负值z 轴：垂直屏幕 – 注意：往外边的是正值，往里面的是负值​二、3D 转换3D 转换知识要点3D 位移：translate3d(x, y, z)3D 旋转：rotate3d(x, y, z)透视：perspctive3D呈现 tran

原创 _vue前端工程化--新手小白必看

目标1.能够了解模块化的相关规范2.了解webpack3.了解使用Vue单文件组件4.能够搭建Vue脚手架5.掌握Element-UI的使用1.模块化的分类A.浏览器端的模块化 1).AMD(Asynchronous Module Definition,异步模块定义) 代表产品为：Require.js 2).CMD(Common Module Definition,通用模块定义) 代表产品为：Sea.jsB.服务器端的模块化 服务器端的模块化规范是使

原创 HTML5---CSS3___day02小白到大神

HTML5 第二天一、rotate2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转使用步骤：给元素添加转换属性 transform属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度div{ transform: rotate(0deg);}二、三角代码演示二、设置元素旋转中心点(transform-origin)transform-origin 基础语法transform-origin:

原创 vue学习---前端路由

前端路由后端路由：URL请求地址与服务器资源之间的对应关系前端路由： 用户事件与事件处理函数之间的对应关系vue-router基本使用步骤路由规则中component不接收字符串

原创 HTML5---CSS3___day01小白到大神

HTML5 第一天一、什么是 HTML5HTML5 的概念与定义定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML两个概念：是一个新版本的 HTML 语言，定义了新的标签、特性和属性拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5HTML5 拓展了哪些内容语义化标签本地存储兼容特性2D、3D动画、过渡CSS3 特性性能与集成H

原创 vue--接口调用 axios用法

axios—接口调用1.axios基本特性axios(官网：https://github.com/axios/axios）是一个基于promise用于浏览器和node.js的http客户端支持浏览器和node.js支持promise能拦截请求和响应自动转换JSON数据2.基本用法3.GET传递参数通过URL传递参数通过Rextful方式传递参数通过params选项传递参数4.DELETE传递参数与GET一样以上三种方式都可以5.POST传递参数6.P

原创 接口调用fetch用法

fetch–接口调用1.基本特性更加简洁的数据获取方式，功能更强大 更灵活，可以看作是xhr的升级版基于promise实现2.基本用法3.请求参数get请求方式的参数传递delete请求方式的参数传递post请求方式的传递put请求方式参数的传递4.fetch响应结果...

原创 vue组件化开发---新手学习

vue组件化开发1.组件化开发思想组件化规范：Web Components此方法并没有完全解决，还存在兼容性的问题官网：https://developer.mozilla.org/zh-CN/docs/Web/Web_Components2.注册组件全局注册3.组件注册注意事项data必须是一个函数组件模板内容必须有且只有一个根元素组件模板内容可以是模板字符串4.组件命名方式短横线方式驼峰式命名**注意：**如果使用驼峰式命名组件，那么在使用组件时，只能

原创 新手学vue

vue常用特性1.表单操作表单域修饰符number转化为数值trim去掉开始和结尾的空格lazy将input事件转化为change事件input事件，每次输入都会触发change事件，只有当失去焦点时才会触发（注册时验证用户名等）<input v-model.number='age' type='number'/>2. 自定义指令语法规则3. 计算属性表达式的计算逻辑复杂时，使用计算属性可以使模板内容更加简洁4.侦听器侦听器应用场景数据变

原创 初识VUE---新手学习中

初识VUEmvvm设计思想渐进式框架声明式渲染——组件系统——客户端路由——集中式状态管理——项目构建差值表达式闪动问题数据的响应式数据绑定指令v-text 填充纯文本不存在闪动问题相对用户体验更好v-html 填充html片段存在安全问题本网站内部数据可以使用，来自第三方的数据不可以用v-pre 展示原始信息，跳过编译过程v-once 只编译一次，显示内容后不再具有响应式功能，不需要持续监听数据变化，提高性能v-model 双