自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(41)
  • 收藏
  • 关注

原创 async await 与async Promise

async await 直接上题async function fun1(){ console.log("start-fun1") await fun2 () console.log("end-fun1")}async function fun2(){ console.log("run-fun2")}fun1()console.log('running')分析:fun1()和console.log(‘running’),先调用fun1(),那么先执行console.log("s

2021-01-26 19:55:59 160

原创 学习React的N天

<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>Hello React!</title><script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script><script src="https://cdn.staticfi

2020-12-23 13:39:02 263

原创 构造函数与它的崽子们

构造函数:Class 关键字、静态属性、实例属性1. function 构造函数function Person (name,age) { this.name = name this.age = age}const me = new Person('zzz','18') //me 实例console.log(me.name) //zzzconsole.log(me.age) //18const me = new Person('zzz','18')做了三件事new Person():

2020-12-18 10:06:08 157

原创 Vue组件完整生命周期(按顺序,1.创建;2.挂载;3.更新;4.销毁)

Vue组件完整生命周期(按顺序,1.创建;2.挂载;3.更新;4.销毁)beforeCreate createdbeforeMount mountedbeforeUpdate updatedbeforeDestroy destroyed<!DOCTYPE html><html lang="en"> <head> <...

2020-12-08 13:36:03 304

原创 无奖问答系列:你所理解的IntersectionObserver

异步操作,不随着目标元素的滚动同步触发。即只有线程空闲下来,才会执行观察器。这意味着,这个观察器的优先级非常低,只在其他任务执行完,浏览器有了空闲才会执行。作用监听目标元素与其祖先或视窗交叉状态的手段,其实就是观察一个元素是否在视窗可见。语法创建原生构造函数 IntersectionObserver的一个实例,接受两个参数两个参数:callback是当元素可见性变化时的回调函数,option是配置对象(该参数可选)。let io= new IntersectionObserver(callbac

2020-12-04 14:13:55 561

原创 Proxy代理拦截器

前言Proxy 也就是代理,可以帮助我们完成很多事情,例如对数据的处理,对构造函数的处理,对数据的验证,说白了,就是在我们访问对象前添加了一层拦截,可以过滤很多操作,而这些过滤,由你来定义。语法let p = new Proxy(target, handler);target: 需要使用Proxy包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。handler: 一个对象,其属性是当执行一个操作时定义代理的行为的函数(可以理解为某种触发器)。具体的handler相关函数

2020-11-30 17:14:34 352

原创 什么是事件循环Event Loop

由于js是单线程的,执行一连串的事件时,这些事件会分配给不同的任务队列。以先进先出的规则给这些事件排队、形成一条或者多条任务队列。事件循环就是一个执行任务队列的机制。首先优先级最高的任务队列中最先进入一个任务(相当于宏任务),没有任务可以选择,则执行微任务给事件循环做个标记(说明这个事件循环机制已经存在执行任务了)执行任务结束这个事件循环就执行完毕了,再做个标记null(说明没有任务在执行)把这个已经执行的任务从队列里踢出渲染页面回到第一步...

2020-11-10 16:33:22 2800

原创 Vuex结合sessionStorage存储公用的用户信息

前言:在一个系统中,我们经常会用到用户的用户名、用户手机号、用户ID等信息,可以将它们用于展示在系统中或者根据ID获取权限之类。因为各个页面都需要这些公用信息,当然是存储在store的状态字中拉。但是由于Vue是响应式的,我们存储在store中的状态字一旦刷新或者关闭窗口,网页都会初始化,重置,所以得想个方法动态更新store数据。问题一:每次刷新页面store中数据都会重置。方法一:我们需要知道,每次刷新加载一次页面,都会加载一次入口html文件(一般都是App.vue文件,页面间跳转是不会重

2020-05-27 20:51:03 827

原创 this.$router.go()和this.$router.push()的差别

this.router.go()和this.router.go()和this.router.go()和this.router.push()的差别1.this.$router.go(val) => 在history记录中前进或者后退val步,当val为-1时回到上一页。当val为0时刷新当前页面。当val为1到下一页。2.this.$router.push(path) => 在...

2020-05-25 20:24:35 447

原创 flex和float的布局的区别

<template> <div class="income-container"> <div class="income-list" v-for="item in dataList"> <div class="income-title">{{item.title}}</div> <div class="incom...

2020-05-25 20:23:48 5649

原创 图片的展示:css3 之 object-fit

object-fit理解CSS3 background-size出现的比较早,大家应该知道其支持的一些值,除了数值之外,其还支持几个关键字,例如:cover, contain等。object-fit也是类似的,但还是有些差异,具体有5个值(默认值:fill):.fill { object-fit: fill; }.contain { object-fit: contain; }.cove...

2020-05-25 20:20:00 996 1

原创 H5&IOS&Android-入坑指南

入坑零:IOS不支持position:fixed。有问题。入坑一:解决overflow: auto在Ios与安卓系统中滑动不流畅的问题(chrome模拟测试没问题)法一:body {-webkit-overflow-scrolling: touch;}在滚动容器内加-webkit-overflow-scrolling: touch但这个方案有一个问题,在页面内具有多个overflow:...

2020-05-25 20:14:06 176

原创 git常用命令

昨天认认真真请教了男朋友,关于git的常用命令的使用方法。拉取代码:git clone 项目地址修改好代码,关于提交就会有很多不同的差异性,我认为最好的方法还是 git commit =》git pull =》git push;首先解释一下,git add 、git commit 、git pull、git push几个命令的含义;git add:就是将工作区的代码勾选了(git add . 全选的意思),保存到暂存区;git commit :提交到本地仓库;git push :将本地

2020-05-25 20:09:08 110

原创 曾经学会但是现在忘记的冒泡排序

原理:循环,双重循环,如下所示;// 冒泡排序function bubbleSort(arr) { var i = arr.length, j; var tempExchangVal; while (i > 0) { for (j = 0; j < i - 1; j++) { if (arr[j] > arr[j + 1]) { tempExchangVal = arr[j];

2020-05-25 19:53:21 181

原创 element-ui template scope v-if 表格列动态展示时出现排序错乱问题

当使用element-ui 的el-table时,只要在中满足一下两个条件时,表格列动态展示时会出现排序错乱条件一:el-table-column中使用template slot-scope=“scope”比如:<el-table-column> <template slot-scope="scope"> {{scope.row.name}} </t...

2020-05-21 15:47:05 1878 1

原创 只展示n行文字,多出的文字省略号...

<div class=content-text''>只展示n行文字,多出的文字省略号只展示n行文字,多出的文字省略号只展示n行文字,多出的文字省略号</div>//文字多行.content-text { width: 200px; font-size: 14px; overflow: hidden; //超出隐藏 display: -webkit-box;...

2020-05-21 15:40:17 118

原创 用echart的tooltip属性解释箭头函数this指向问题

formatter:(params)=>{//this指向vue,this.lineDateData为vue的data中的值}formatter:function(params)=>{//this指向tooltip,this.lineDateData为underfined}tooltip: { trigger: 'axis', ...

2020-04-30 16:49:51 743 1

原创 巨复杂真的脑子抓破的el-table与el-form验证

需求呢是这样滴,简单地描述一下。一张商品价格列表,最主要的有一列原价,一列(折扣价,减金额价,销售价)。原价是固定的,折扣价,减金额价,销售价可以分别输入,输入验证其中一项,计算其他两项。输入那一项字体为黑色,其他的为灰色;输入限制:0.1≤折扣价≤9.9,减金额价≤最低价,销售价≤最低价,不然就是报错;输入的是什么值,展示的就是什么优惠类型;最后传给后端的就是什么值,如果输入的值是打折...

2020-04-02 11:24:35 280

原创 Promise与它的四个小伙伴resolve、reject、all、race

Promise 的基本用法示例如下:一秒钟之后打印“finished” function sleep(duration) { return new Promise(function(resolve, reject) { setTimeout(resolve,duration); }) } sleep(1000).th...

2020-03-18 11:30:39 895

原创 捕获与冒泡

原文(来自Winter-《重学前端》):很多文章会讲到捕获过程是从外向内,冒泡过程是从内向外(或者捕获从上到下,冒泡从下到上),但是这里我希望讲清楚,为什么会有捕获过程和冒泡过程。我们刚提到,实际上点击事件来自触摸屏或者鼠标,鼠标点击并没有位置信息,但是一般操作系统会根据位移的累积计算出来,跟触摸屏一样,提供一个坐标给浏览器。那么,把这个坐标转换为具体的元素上事件的过程,就是捕获过程了。而冒泡过...

2020-03-09 11:47:42 726 1

原创 CSS 三大经典问题:垂直居中问题,两列等高问题,自适应宽问题。

flex布局:父级称为盒子,子级称为元素垂直居中:justify-content:center; align-items:center;justify-content:center;<div id="parent"> <div id="child"> </div></div><style> #parent { ...

2020-03-06 10:51:58 254

原创 为什么加载 JavaScript 使用 "src",CSS 使用 "href"?

鄙人的总结就是:历史遗留问题,先贤们的bug;比个不太恰当的比喻,就像javaScript叫javaScript一样。src:本质是引入嵌入式内容,比如image,video,iframe这类替换型元素;如果说是一个网页,引入的内容相当于一个网页内部的元素,一个部分,一个实体。可以直接展示,直观的看到!href:本质是一种引入超链接,比如a链接,link链接这类链接型元素。引入的内容时外部...

2020-03-05 17:14:22 957

原创 element-ui 渐变色table

先上图,根据数值的大小,实现渐变(0%->100%十个色阶)HTML部分:<div class="table" > <el-table border :data="retentionList" :cell-class-name="cellStyle" :loading='tableLoading'> <el-table-column :k...

2019-12-25 16:45:26 3091

原创 ES6之Set 和 WeakSet和Map 数据结构

Set 数据结构ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set本身是一个构造函数,用来生成 Set 数据结构。Set 结构的实例de属性。-Set.prototype.constructor:构造函数,默认就是Set函数。-Set.prototype.size:返回Set实例的成员总数。Set 实例de方法分为两大类:操作方法(用于操作数...

2019-08-30 14:40:12 55

原创 vant list的列表,瀑布流滚动加载,用于展示长列表,当列表即将滚动到底部时,会触发事件并加载更多列表项。

由于手机的屏幕长度限制,如果获取的列表数据有很多条,就需要使用预加载的形式。手机下滑多少,就加载多少条数据。主要后端传参的字段:take(每次加载获取多少条数据,初始化一般为8,列表足够填满手机屏幕就好),skip(再次获取数据时跳过多少条数据,一般都是跳过take*skip条)。data() { return { Skip: 0, Take: 8, },...

2019-07-11 15:01:57 1476

原创 关于this.$XXXXXXX

一般在vue中,这些$的都是一个全局对象,这些都会在main.js中进行全局引用。如下所示main.js文件。1.this.$router :vue-router路由,import router from ‘./router/’。2.this.$toast :vant有赞移动端ui的一个“轻提示”组件,import { Toast, Dialog } from ‘vant’;。import ...

2019-07-05 09:42:47 7201

原创 关于AJAX异步获取的bug

关于AJAX异步获取的bug首先先贴上一张效果图如下,bug就是,实时获取的月份(10月,9月),刷新一下有时候显示,有时候不显示.再来看看我写的获取时间的代码以及获取表中数据queryData的代码修改前: async mounted () { this.queryData()//ajax获取echarts数据 this.theMonth = `${(await ge...

2019-06-03 12:44:09 179

原创 vue,v-for制作滑动翻页table表

vue,v-for制作翻页table表template代码// An highlighted block&amp;amp;amp;amp;amp;lt;div class=&amp;amp;amp;amp;quot;chart-bottom&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;h3 class=&amp;amp;amp;amp;quot

2019-06-03 12:43:50 1676

原创 上传代码新建的gitlab仓库

首先登陆gitLab, 新建一个project,此时是一个空的仓库,随便新建一个文件,如:这样我们就看到了仓库里面的东西。复制git地址,新建一个文件夹在git Bash Here窗口中clone项目。git clone http://192.168.2.115:18080/xxxx/my-test.git然后出来一个my-test文件夹,将项目的文件复制在该文件下一:将本地代码上传到...

2019-06-03 12:43:27 355

原创 搜索框模糊查询--关键字查询,不区分大小写并且设备高亮显示

搜索框模糊查询–关键字查询,不区分大小写一个输入框和一个搜索按钮&lt;template&gt; &lt;div slot="footer" class="mybtn"&gt; &lt;p class="searchBody"&gt; &lt;Input v-model="waterCoversName" class="search

2019-06-03 12:43:16 3459

原创 Vue的数字滚动效果

Vue的数字滚动安装插件npm install vue-count-to,重新运行:npm run dev全局安装 main.js:import countTo from 'vue-count-toVue.use(countTo)相应的页面下:写入:引入:import countTo from ‘vue-count-to’comments: {countTo}写入...

2019-06-03 12:43:05 1608

原创 (五) 父子组件结合$emit $on $refs设置重置按钮

一、$emit1、this emit(′自定义时间名′,要传送的数据);2、触发当前实例上的时间,要传递的数据会传给监听器;二、emit(&amp;amp;amp;#x27;自定义时间名&amp;amp;amp;#x27;,要传送的数据);2、触发当前实例上的时间,要传递的数据会传给监听器;二、emit(′自定义时间名′,要传送的数据);2、触发当前实例上的时间,要传递的数据会传给监听器;二、on1、VM.on(′事件名...

2019-06-03 12:42:58 479

原创 Vue设置路由

首先在router文件下设置index.js文件,以askLog子路由为例,由于主界面没有设置内容,所以为空index.js主路由代码//在router文件下不可以有注释,此处只为了解释import Vue from 'vue'import Router from 'vue-router'import taskManage from './taskManage.router.js'...

2019-06-03 12:42:45 179

原创 echarts-合集

1.强制分割y轴的间隔并且设置最大值(前提,y轴的数据必须会在一定范围内,比如说24小时) yAxis: {//每段强制间隔为4个数值,最大为24,所以会分为6段 interval: 4, max: 24, }...

2019-06-03 12:42:35 165

原创 Router合集

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ routes: [ { path: '/', name: 'index', redirect: 'user', component: r =...

2019-06-03 12:42:20 109

原创 Iview日期和时间范围选择器组件的封装

成品示意图:一. 在iView组件库中选择:DatePicker 日期选择器,这是一个封装好的时间选择器,里面还有很多不同的类型,这次我们主要使用的是,用具体到时分秒的日期选择器type=“datetime”二. 在components文件下子组件,timeRange/main.vue,放时间选择器子组件的文件。父组件,tastLog/dispatch/index.vue,将时间选择器的...

2019-06-03 12:40:59 4275

原创 Vue格式化日期时间为(YYYY-MM-DD hh:mm:ss)

在src下创建一个文件plugins的文件,如图在里面的format.js文件下写入function format (date, format) { if (!date) { return '' } let d = new Date(date) // 年 if (/YYYY/.test(format)) { format = format.repl...

2019-06-03 12:40:23 17699 2

原创 两个子组件之间的传值

举例:将A的drawerStart数值传递给B,来决定B的某个样式是否显示,并且点击 @click="changerDrawerStart"会改变 drawerStart的数值(这里可以使用监听watch,监听drawerStart的改变),通过$emit方法来实现传参的方式组件A代码:思路:如果两个子组件在同一个父组件上,可以将父组件作为一个桥梁(用一个中间值),中间商,先将决定性元素的子组...

2019-06-03 12:39:45 4815

原创 js跨域下载图片(vue也实用)

现在从后台请求一张图片,点击按钮就能下载到本地,并能设置图片名。1.首先看一下图片操作界面2.点击下载按钮对应的icon,需要将后台的图片下载到本地3代码展示<Icon class="operate-btn bold" type="md-download" @click="downloadIamge(t.url,t.name)"></Icon>//.icon图标...

2019-06-03 12:39:09 6376 9

原创 ajax get请求status=200,但是没有response

原因就是在正确请求之前,一定出现过错误的请求,导致 get出现缓存,无论你后来怎么请求,都是请求缓存的数据,只要在get的参数后面加上一个时间错就好...

2019-06-03 12:37:21 8527 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除