qq_57443373的博客

原创 Vue实现一键复制文本内容

记录一下使用到的东西，将文字识别结果一键复制代码 // 文本复制 copyText () { //使用textarea的原因是能进行换行，input不支持换行 var copyTextArea = document.createElement("textarea"); //自定义复制内容拼接 var str = `银行卡卡号 ${this.recognizeList.card_num}\n有效期 ${this.recognizeList.da

原创 Vue以formdata的格式将文件传给后端

最近在项目中有使用到图片上传，在此记录一下。使用步骤1.使用了element-ui的upload组件 <el-upload class="avatar-uploader" action="" :on-change="(val)=>changeFile(val)" :auto-upload="false" a

原创 Echarts解决默认单位为PX

    在使用echarts绘制图表时，遇到不适配不同大小的屏幕的问题，这是因为echarts默认的单位为px，我们可以采用类似于rem的单位来实现一定程度的大小屏适配。方法这个方法是在网上找的，亲测有效。 adjustSize(res) { let docEl = document.documentElement, clientWidth = window.innerWidth || document.doc

原创 Vue解决页面刷新时vuex中的值被清空的问题

问题描述：使用Vuex存储数据时，会出现刷新页面时Store中的值丢失的情况。这种情况下，可以将Store中的值存储在sessionStorage中。思路分析：1.监听页面刷新事件，可以使用beforeunload，页面刷新前，将Store中的值存储到sessionStorage中2.页面刷新时，从sessionStorage中取出存储的值，重新存储到Store中代码：created () { //重新将sessionStorage中的值存储到Store中，判断是否是初次进入的方法视

原创 vue中使用lang=“scss“

记录一下要安装sass-loader和node-sass，且版本组合适配一个适配的版本组合 sass-loader-7.3.1 node-loader-4.14.1下载命令:npm install [email protected] [email protected] --save-dev

原创 Vue过渡实现div的展开和收起的动画效果

记录一下在项目中使用过的vue过渡效果//template部分//移入和移出改变mainDiv的显示状态<div @mouseover="mouseOver1" @mouseleave="mouseLeave1"></div>//vue的过渡<transition name="draw"> <div class="mainDiv" v-show="show1"> </div></transition>//s

原创 Vue中对象的某个新增属性在页面中不显示

总结在开发中，我们有时会给对象新增一个新的属性。这个属性虽然在控制台显示，但在页面中却不显示。这是因为Vue无法探测普通的新增属性，这时候可以使用this.$set()代替 写法this.$set( target, 'key', value ) => this.$set( 要改变的对象, '要新增的属性名', 新增的属性值 )...

原创 组件化开发中使用Vuex存储数据

原创 GitLab团队开发中常用的命令

初始化Git配置信息git config --global user.name “your full name”git config --global user.email “your starbucks email”在拉取代码或者上传代码代码前需要先完成配置信息，不然可能没有权限去执行操作拉取代码到本地文件夹git clone “需要克隆的SSH地址”查看有哪些分支git branch切换分支git checkout “某一个分支”添加文件到暂存区git add .将暂存区的内容提

原创 ES6的一些题目

1.举例说明，如何访问promise实例的内部状态？let promise=new Promise((resolve,reject)=>{ console.log('start...'); setTimeout(()=>{ let random=Math.random(); console.log('结果',random); if(random>0.5){ resolve(random); }else{ reject(ran

原创 HTML5笔试题

今天笔试遇到了一些题目，让我看到了对HTML知识的不足，在此总结一下。HTML5的优点与缺点？优点：网络标准统一多设备跨平台及时更新提高可用性并改进用户的友好体验有几个新标签，有助于开发人员定义重要的内容可以给站点带来更多的多媒体元素（video和audio）涉及到网站的抓爬和索引时，对SEO很友好缺点：安全性完善性：许多特性各浏览器的支持成都也不一样性能：某些平台的引擎问题导致HTML5的性能低下浏览器兼容性：这是HTML5最大的缺点，IE9以下浏览器几乎全军覆没HT

原创 JavaScript快速排序代码

function QuickSort(arr,begin,end){ if(begin>end){ return false; } let temp=arr[begin]; let i=begin; let j=end; while(i!=j){ while(arr[j]>=temp&&j>i){ j--; } while(arr[i]<=temp&&j>i){ i+

原创 JavaScript输出字符串中字符出现的次数

function sumStr(str){ let arr=[]; for(item of str){ if(!arr[item]){ arr[item]=1; }else{ arr[item]++; } } for(item in arr){ console.log(item+':'+arr[item]); }}let str='helloworld'sumStr(str)

原创 JavaScript数组去重的几种方法

文章目录一、Set去重二、双重for循环去重三、利用indexOf去重四、利用icludes去重五、filter六、Map一、Set去重 function funSet(arr){ return Array.from(new Set(arr)); }二、双重for循环去重function funFor(arr){ for(let i=0,len=arr.length;i<len;i++){ for(let j=i+1,len=arr.length;j<len;j+

原创 Vue中过滤器的使用

概念： 对要显示的数据进行特定格式化后再显示（适应于一些简单逻辑的处理）Vue.js允许自定义过滤器，可被用于一些常见的文本格式化格式：过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示过滤器可以用在两个地方，插值语法和v-bind表达式<!-- 插值语法中-->{{time|formatTime}}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></div&g

原创 Vue组件化

Vue组件化开发文章目录一、Vue中使用组件的步骤1.创建组件2.注册组件3.使用组件二、组件的嵌套一、Vue中使用组件的步骤1.创建组件Vue.extend(options),options为配置对象，与创建Vue实例的配置对象很相似，区别是data必须为函数形式。const myHeader=Vue.extend({ template:` <div> <h2>我是Header</h2> </div> `, .

原创 Vue生命周期

Vue生命周期是什么？在vue的创建、使用、销毁的过程中，有许多事件，这些事件统称为生命周期函数。换而言之，生命周期就是Vue在关键时刻帮我们调用的一些特殊名称的函数。Vue生命周期主要分为四个阶段，八个过程四个阶段：Create 创建Mount 挂载Update 更新Destroy 销毁八个过程：beforeCreate      创建完成之前created      &nbsp

原创 Vue.js学习

学习Vue文章目录一、Vue.js是什么？二、Vue的特点三、html中引入Vue并使用一、Vue.js是什么？Vue.js是一套用于构建用户界面的渐进式JavaScript框架。构建用户界面：使用某种方式拿到数据，将数据放到合适的位置。渐进式：Vue可以自底而上逐层应用二、Vue的特点1.采用组件化开发，提高代码复用率，并且让代码更好维护2.使用声明式编码，让程序员无需直接操作DOM，提高开发效率3.使用虚拟DOM+Diff算法，尽量复用DOM节点虚拟DOM：使用普通的js对象来.

原创 ES数组API

Array.prototype.push()作用： 向数组的末尾添加一个或多个元素，并返回新的长度参数： array.push(item1, item2, …, itemX)返回值： 数组的新长度是否改变原数组： 改变重写：Array.prototype.mypush=function(){ for(item in arguments){ this[this.length]=arguments[item]; } return this.length;}Array.pro

原创 ES6-Promise学习

概念：Promise是javascript解决异步编程的一种解决方案。从语法上说，Promise是一个构造函数，可以构造一个promise对象。简单来说，Promise就是一个容器，保存着某个未来才会结束的事件（通常是异步操作）的结果。Promise的英文意思就是“承诺”。Promise对象有三个状态：最初的状态 pending （进行中）成功的状态 fulfilled （已成功）失败的状态 rejected （已失败）Promise对象的特点：对象的状态不受外界影响，只有异步操作

原创 响应式布局之@media媒体查询

今天学习媒体查询文章目录一、什么是媒体查询？二、使用步骤1.引入库2.读入数据总结一、什么是媒体查询？媒体查询可以让我们可以根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，就是说我们可以设置多个CSS样式表，根据不同的条件使用不同的样式表来改变样式。媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可以用于检测的媒体特性有width、height、color等。来看例子媒体类型—@media媒体特性–"(max-width:800p.

原创 ES6中遍历Set和Map数据结构的方法

文章目录一、Set1.forEach2.keys3.values4.entries二、Map1.forEach2.keys3.values4.entries一、Setkeys方法、values方法、entries方法返回的都是遍历器对象1.forEachSet 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。let set=new Set([1,2,3,4,5]);set.forEach((key,value)=>{ console.log(k

原创 JavaScript-冒泡排序、选择排序、插入排序

今天学习一下算法文章目录一、冒泡排序二、选择排序三、插入排序一、冒泡排序算法思想：以升序排序为例，即最小的数在前对数组进行一次遍历，如果相邻的两个数，前面的比后面的大，则交换他们的位置。第一次遍历会将最大的数字排到最后的位置第二次遍历会将第二大的数字排到倒数第二的位置以此类推，遍历n-1次后，整个数组就有序了。引用一下菜鸟教程的图片,很形象的描绘了冒泡排序的思想。来看代码const sort=(arr)=>{ let result=[...arr]; let te.

原创 ES6学习day05

今天学习ES6文章目录一、Set二、WeakSet1.引入库2.读入数据三、Map一、SetES6提供了新的数据结构Set，类似于数组，但是成员得值都是唯一的，没有重复得值。Set本身是一个构造函数，用来生成Set数据结构。const s=new Set();[1,2,3,3,4,4,5].forEach(x=>s.add(x));for(let i of s){ console.log(i);// 1 2 3 4 5}通过add()方法加入成员，结果表明Set结构不会添加.

原创 Vue脚手架的创建

学习如何创建vue脚手架文章目录一、创建准备二、创建步骤1.引入库2.读入数据三、允许一、创建准备二、创建步骤1.引入库代码如下（示例）：import numpy as npimport pandas as pdimport matplotlib.pyplot as pltimport seaborn as snsimport warningswarnings.filterwarnings('ignore')import sslssl._create_default_htt.

原创 Vue中使用watch监听route.query传参的变化

在Vue项目中，当路由传参jquery的值发生变化时，需要重新发送请求获取数据，刷新页面的数据。这时我们就能通过监听器来监听路由的变化，重新发送请求。watch用于观察和监听页面上的vue实例，当你需要在数据变化响应时，执行异步操作，或高性能消耗的操作，那么watch为最佳选择一个简单的例子 // 侦听器 watch:{ //监听路由 //监听路由的categoryId属性的数据变化 '$route.query.categoryId': function(){ /

原创 ES6学习day04

今天学习Symbol文章目录一、Symbol1.概述2.Symbol的创建3.Symbol.prototype.description4.作为属性名的Symbol一、Symbol1.概述   在ES5中对象的属性名都是字符串，这就很容易出现命名冲突。当你引用了别人定义的对象，但你又想对这个对象添加新的方法，那么新的方法和旧的方法可能就会产生冲突。   这种情况下，如果有一种机制保证每个对象的属性名都是独一无二的就好了，这样就可以从根本上

原创 ES6学习day03

字符的Unicode表示法ES6加强了对Unicode的支持，允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的Unicode码点。但是这种表示法只限于在\u0000~\uFFFF之间的字符。超出这个范围的字符，必须用两个双字节的形式表示。let a="\u0061";a;//"a"let a="\uD842\uDFB7";a;//"????"let b="\u20BB7";b;//"7"…字符串的遍历器接口ES6为字符串添加了遍历器接口，使得字符串可以被for…of循环遍

原创 ES6学习day02

ES5中的变量的赋值方式let a=1;let b=2,c=3,d=4;直接指定其值而在ES6允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，这被称为解析。数组解析let [a,b,c]=[1,2,3];console.log(a,b,c);//1 2 3本质上，这种写法属于"模式匹配"，只要等号两边的模式相同，左边的变量就会被赋予对应的值。解析不成功时，变量的值都会等于undefined。let [a]=[];console.log(a);//undefinedlet

原创 js中的闭包

文章目录一、概念1.闭包的含义2.闭包的组成3.生成闭包的条件二、特点1.优点2.缺点三、案例案例1案例2一、概念1.闭包的含义简单了解一下什么是闭包？闭包：有权访问另一个函数作用域中的变量的函数引用别人的一句话理解闭包的关键在于：外部函数调用之后其变量对象本应该被销毁，但闭包的存在使我们仍然可以访问外部函数的变量对象，这就是闭包的重要概念。2.闭包的组成闭包由函数和创建该函数的环境组成的这个环境由闭包创建时在作用域中的任何局部变量组成的。3.生成闭包的条件函数嵌套函数内部函数引

原创 ES6学习day01

文章目录一、let命令1.基本用法2.let和var的区别3.暂时性死区4.块级作用域二、const命令1.基本用法2.const和var的区别3.暂时性死区4.const的本质三、顶层对象的属性一、let命令1.基本用法let ES6新增的命令 用于声明变量{ let a=123; console.log(a);/123 块级作用域内}//块级作用域外console.log(a); //ReferenceError: a is not defined2.let和var的区别l..

原创 div水平垂直居中的四种方式

让div水平居中的方式，我所知道的就是以下这四种。文章目录一、margin二、绝对定位三、子元素绝对定位父元素相对定位四、flex布局总结一、margin第一种方式我们可以利用外边距属性来使div水平垂直居中先来看一段有问题的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=d..

原创 ES5对象学习-多个对象的创建

文章目录一、工厂模式二、构造函数模式三、原型模式四、组合模式一、工厂模式在之前我们所了解的创建对象的方法，无非就是字面量方式或者构造函数创建对象。当我们使用字面量方式来创建对象时，我们来思考一下，假如我们要创建一个学生类型的对象，属性有姓名、年龄、性别这三个简单的属性。var student1={​ name:'xiaoming',​ age:20,​ gender:'male'}可以看到，创建一个学生，我们只需要5行代码就能创建一个对象了。但是如果我们要同时创建一个班级的学

原创 ES5对象学习—单个对象的创建

JavaScript中的对象作为一名优秀的程序猿，不会还有人没有对象吧。既然如此，下面我们就来学习一下如何让自己拥有一个对象。    首先来了解一下对象，在JavaScript中，对象(Object)是一个很重要的概念，对象是JS最重要的数据类型。那么什么是对象呢?    对象不是你的boyfriend或girlfriend。在JavaScript中，对象是一组"键值对"的集合,是一组无序的数据集合。创建对象的方式

原创 JavaScript--获取用户输入的值进行比较--小案例

这是一个很简单的JS小例子，主要使用getElementById获取Input中输入的值，再将这三个值来进行比较，输出结果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>判断</titl

原创 CSS-animation-梦幻西游小案例

这是我学习了CSS的动画效果之后，动手练习的小案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>梦幻西游</title> <style> /* 通配符取

原创 HTML小案例之太极两仪图画法

学习了CSS的浮动布局和定位布局，下面使用这两种布局来画一个太极图。思路：        1.我们首先要做的就是画出最外层的圆形 我们画一个半径为250像素的圆，给它设置1像素的黑色边框,利用border-radius属性把它从正方形变成一个圆形。 margin:100px auto 把它移到屏幕相对中间的位置<!DOCTYPE html><html lang="en"><head&

原创 Git命令的使用

git：一个开源的版本控制工具使用git命令首先要做：1、安装Git2、创建一个文件作为本地仓库3、进入文件夹路径CMD打开终端4、执行git init命令 初始化本地仓库初始化本地仓库，初始化成功就会在当前文件夹下生成一个.git的隐藏文件git操作1、git add 文件名 (提交文件，让git管理)2、git status （查看提交记录）3、git pull origin master (下载最新)4、git commit --no-verify -m "(编辑