- 博客(41)
- 收藏
- 关注
RSS订阅原创 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
265
原创 构造函数与它的崽子们
构造函数：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
158
原创 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
2801
原创 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
448
原创 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
5652
原创 图片的展示：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
998
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
1880
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
282
原创 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
958
原创 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
180
原创 vue，v-for制作滑动翻页table表
vue，v-for制作翻页table表template代码// An highlighted block&amp;amp;amp;amp;lt;div class=&amp;amp;amp;quot;chart-bottom&amp;amp;amp;quot;&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;h3 class=&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
原创 搜索框模糊查询--关键字查询，不区分大小写并且设备高亮显示
搜索框模糊查询–关键字查询，不区分大小写一个输入框和一个搜索按钮<template> <div slot="footer" class="mybtn"> <p class="searchBody"> <Input v-model="waterCoversName" class="search
2019-06-03 12:43:16
3460
原创 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
1610
原创 (五) 父子组件结合$emit $on $refs设置重置按钮
一、$emit1、this emit（′自定义时间名′,要传送的数据）；2、触发当前实例上的时间，要传递的数据会传给监听器；二、emit（&amp;amp;#x27;自定义时间名&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
166
原创 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
4277
原创 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
6379
9
原创 ajax get请求status=200，但是没有response
原因就是在正确请求之前，一定出现过错误的请求，导致 get出现缓存，无论你后来怎么请求，都是请求缓存的数据，只要在get的参数后面加上一个时间错就好...
2019-06-03 12:37:21
8528
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人