- 博客(31)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 vue2工具函数
前言今天利用空余时间看了一下 vue2 的工具函数。目标是学习动力的来源，原来只有自己是懒散的，没有目标的看一些无聊的博客感觉进步也不少很大。遇到不懂的也懒得去深究知其所以然。坚持每周打卡一次学习源码加入若川团队，每天进步一小点来成长。不求成为多厉害的大牛，只要不被社会淘汰足矣。一、flow是什么？示例：flow 能在 JS 运行前找出常见的 bug 是检查代码的一种工具 flow官网/* @flow */export const emptyObject = Object.freeze({})
2022-03-03 17:33:57
393
原创 第一期 axios源码常用的工具类
axios源码中那些实用的基础工具函数今天我们看一下axios 中的utils.js 文件。基础工具函数包含了数据类型判断，typeof适用于null、object 以外的类型的判断。用 Object.prototype.toString() 方法 来判断 object 类型。类型判断1.1 typeof方法typeof运算符后可跟着一个操作数，用于判断该操作数的数据类型；typeof适用于下面7种数据类型中除null、object的其他5种类型的判断：typeof ''; // stri
2022-03-01 16:15:26
294
原创 Vue数据劫持代理 数据双向绑定的原理
原理（记录一下个人想法，并非完全正确）通过 defineProperty 劫持vue 实例上的data， 通过get()方法挂在到_this组件实例上， 通过set()方法修改组件data 中的值defineProperty介绍Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。Object.defineProperty(obj, prop, descriptor)obj要定义属性的对象prop要
2021-08-19 10:52:38
172
原创 记录一次element 二次封装的密码输入安全等级显示
<template> <div> <el-input :type="type" v-model="localValue" @input="onInput" :placeholder="placeholder" autocomplete="off" :maxlength="maxlength" show-password> </el-input> <div class="pasTips" v-if="pastips"> &l
2020-09-24 16:18:45
285
原创 Vue 路由--角色的权限控制
Vue 路由–角色的权限控制下面介绍两种权限控制的方法：路由元信息(meta)动态加载菜单和路由(addRoutes)路由元信息(meta)在一个网站上有不同的角色，要求不同的角色来访问不同的页面，我们的所有的路由都在路由表里，只要访问的时候通过（beforeEach 导航守卫）判断一下角色的权限。如果有权限就访问。没有权限就拒绝访问404。在构建routers 路由信息的时，我们添加 meta 配置，在meat中添加路由对应的权限，然后在路由导航守卫中判断相关权限，控制路由跳转。可以在每一个
2020-09-24 16:07:18
4552
原创 记录几个常用的函数封装
class Utils { /** 日期格式化 * @param {string} formmat - 日期格式 * @param {date} timestamp - 要转换的时间 * @return {string} * */ static formmatData(formmat='Y-M-D h:m:s', timestamp = Date.now()){ let date = new Date(timestamp) let deteInfo = { Y: da
2020-09-03 11:16:25
105
原创 uni-app 小程序生成二维码传参
<template> <div> // 显示二维码的容器 <canvas class='canvas' canvas-id="myQrcode"></canvas> <button bindtap='tapHandler' data-code='555444333222111'>转为二维码</button> </div></template><script> // 导入外部JS
2020-08-20 17:17:09
2123
3
原创 uni-app网络请求封装
// baseUrl只是请求url的前半部分const baseUrl = 'http://127.0.0.1:8080/api';const request = function(options) { options.url = baseUrl + options.url; try { // 获取放入缓存的字段token const token = uni.getStorageSync('token'); if (token) { // 如
2020-08-19 17:13:29
946
原创 几道前端面试题的自我检测
12道常见的面试题1. 防抖和节流深考呗数组扁平化单列模式数组去重手写promise.all和promise.race模拟实现new实现call/apply/bind模拟Object.creact()的实现千分位分隔符实现三角形实现三栏布局，双兰布局1. 防抖和节流防抖：连续触发事件中只有最后一次是执行成功的。当连续触发事件时，一定时间段内没有在触发事件，事件处理才会执行一次，如果规定时间内又触发了事件，那么就重新开始计时。例如：用户输入的oninput事件， 用户输入后并不执行 fn，如果用户继续
2020-07-31 11:02:25
126
原创 10个非常实用的JS工具函数
JS工具函数生成一周时间类型判断对象属性剔除数组去重日期格式化防抖节流base64数据导出文件下载检测是否为PC端浏览器识别浏览器及平台获取系统根路径生成一周时间function getWeekTime(){ return [...new Array(7)].map((j,i)=> new Date(Date.now()+i*8.64e7).toLocaleDateString())}类型判断/** * @param {any} target * @param {string} t
2020-07-20 16:40:42
224
原创 JavaScript 数组+字符串处理的方法总结
最新数组方法（包括es6）函数msgarr.push()从后面添加元素，返回值为添加完后的数组的长度arr.pop()从后面删除元素，只能是一个，返回值是删除的元素arr.shift()从前面删除元素，只能删除一个 返回值是删除的元素arr.unshift()从前面添加元素, 返回值是添加完后的数组的长度arr.splice(i,n)删除从i...
2020-06-16 10:55:43
184
原创 前端电商 sku 的全排列算法
描述将分开的属性排列成自己想要的结果如下： let names = ["iPhone X", "iPhone XS"] let colors = ["金色", "银色"] let storages = ["64g", "128G", "256g"] // 结果排列成 [ 'iPhone X', '金色', '64g' ], [ 'iPhone X', '金色', '128G' ], [ 'iPhone X', '金色', '256g' ], [ 'iPhone X', '银
2020-06-16 10:54:20
671
原创 vue 父子组件传值以及表单数据双向绑定
父子组件传值前言父传子prop子传父$emit()表单的双向绑定前言本文是记录自己的学习心得，本人不是大牛会有一些理解不对的地方，共同学习欢迎大家提问纠错。父传子propprop 父子组件之间的传值是单向的，也就是父组件通过prop 规定（name=“name”）向子组件传值，子组件可以获得props 的值，但是子组件改变props 的 name 值父组件的 name 不会改变。例如：有一个组件 GInput<template> <div> <input :t
2020-06-11 17:21:18
3398
原创 vue 表单数据双向绑定
子组件在传值的时候，选用input，如this.$emit(‘input’,val)，在父组件直接用v-model绑定，就可以获取到而子组件也可以通过$emit(‘input’,this.val)，去改变父组件中v-model 和 子组件中 value 的值 。<ywselect v-model="form.name" :author="author"></ywselect><ywinput :value.sync="form.input" placeholder=.
2020-06-11 16:32:49
426
原创 记录element-ui分页组件二次分装
前言本文是基于elementUI 的el-pagination二次分装，如果还不懂el-pagination请先看官网介绍后 在看本文。查看element官网HTML部分<template> <div :class="{'hidden':hidden}" class="pagination-container"> <el-pagination :background="background" :current-page.sync=
2020-06-11 15:04:15
322
原创 vue-cli 脚手架vue.config.js配置详解
vue-cli 3.x配置文件一个前端菜鸡的记录笔记，不喜勿喷。如有不对请大佬多多包涵，向您学习改正。/** * *@describe vue-cli 3.x配置文件 */const path = require('path');const vConsolePlugin = require('vconsole-webpack-plugin'); // 引入 移动端模拟开发者工具 插件 （另：https://github.com/liriliri/eruda）const CompressionP
2020-06-03 10:45:06
557
原创 高性能渲染十万条数据(时间分片)
前言在实际工作中，我们很少会遇到一次性需要向页面中插入大量数据的情况，但是为了丰富我们的知识体系，我们有必要了解并清楚当遇到大量数据时，如何才能在不卡主页面的情况下渲染数据，以及其中背后的原理。对于一次性插入大量数据的情况，一般有两种做法：时间分片虚拟列表本文作为开篇，着重来介绍如何使用 时间分片的方式来渲染大量数据，虚拟列表相关的内容，日后会持续整理。最粗暴的做法（一次性渲染）我们...
2020-06-02 15:50:57
780
原创 js 实现打乱数组？
1. for循环向另一个数组里面随机丢数据var arr=[]; //存放1-20var randomArr=[]; //这个数组存放乱序数字for(var i=0;i<20;i++){ arr.push(i+1);}for(var i=0;i<arr.length;i++){ getNoRepeatNum();} console.log('原数组',arr);console.log('现数组',randomArr); function getNoRep
2020-06-02 15:23:32
265
转载 h5手机键盘收起事件
//这里区分不同系统，可以参考之前的文档记录 https://www.cnblogs.com/wind-wang/p/10737110.htmlconst ua = typeof window === ‘object’ ? window.navigator.userAgent : ‘’;let _isIOS = -1;let _isAndroid = -1; function isIOS() { if (_isIOS === -1) { _isIOS = /iPhone
2020-05-22 14:38:49
698
原创 JS 对象属性名排序Sort
var data = { QTSUSERGROUPID:1, Anonce_str:3, QTSSNO:2 } console.log(objNameSort(data)) // Anonce_str=3&QTSSNO=2&QTSUSERGROUPID=1 function objNameSort(data) { var arr=[]; var newdata = {}; var str = ''; for(var key in data){ arr.push(k.
2020-05-14 09:15:43
223
原创 elememt ui table样式修改
这里写自定义目录标题自定义滚动条样式隐藏滚动条样式背景色调整合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入自定义滚动条样式 ...
2020-04-29 11:39:06
795
原创 js精准查询与模糊查询，学习笔记
js精准查询与模糊查询，学习笔记js条件查询测试数据精准查找涉及的知识点indexof() 模糊查询includes() 模糊查询js条件查询前端处理数据的需求越来越多。记录一下轻量级列表的搜索功能。将服务器的返回的数据储存到前端，前端来做按条件查询，可以减少向服务器发送请求的次数，从而大大的提高性能。文中使用了ES6的语法不懂的可以查阅资料。学习记录，如有不对请各位大佬多多指教相互学习。测...
2020-04-22 13:59:17
2204
原创 使用git将代码上传到码云
一、首先电脑里应该安装Git，这里不再赘述（另外，后期解决冲突需要使用vscode，或者mergetool图形界面工具kdiff3、beyound compare等）二、本地项目上传到远程仓库1.创建本地仓库在本地项目目录下点击右键，选择Git Bash Here，输入git init命令2.配置全局变量git config --global user.name “码云用户名”git...
2020-03-09 16:03:00
131
原创 element table 表格 修改背景为透明并去除边框
.el-table { /* 表格字体颜色 */ color: white; /* 表格边框颜色 */ /* border: 0.5px solid #758a99; */ height: 500px; } /* 表格内背景颜色 */ .el-table th, .el-table tr, .el-table td { border: 0; backgrou...
2019-12-09 10:46:08
1840
1
原创 HTTP服务&AJAX编程
HTTP服务&AJAX编程文件上传的小案例(客户端怎么处理)(服务端怎么接收数据)http 协议的基本概念(客户端与服务器端进行交互的一种数据格式)http 请求的数据格式以及响应的数据格式分析(http 协议就是基于请求响应的协议.)get 请求以 post 请求的区别常见的请求头以及响应头的作用(检测客户端浏览器的版本)（浏览器客户端过几秒钟之后自动...
2019-11-12 10:46:47
142
原创 js获取url参数值
js获取url参数值思路通过location的search就可以获取到url中问号后面的值。字符串过滤到问号通过split方法分割参数集合循环赋值匹配对应的参数值返回值分装函数/** * 获取url参数（主要解决iframe传递参数） */ function getUrlParams(name) { // 不传name返回所有值，否则返回对应值 var u...
2019-10-16 10:03:58
202
原创 js 日期转换函数 自用
将日期时间转换为指定格式，如：YYYY-mm-dd HH:MM表示2019-06-06 19:45let date = new Date() var thisdate = dateFormat("YYYY-mm-dd HH:MM:SS W", date) console.log(thisdate) function dateFormat(fmt, date) { let ret;...
2019-10-12 10:09:57
212
原创 安装npm cnpm
安装npm：1.前往node.js官方网站下载下载地址并安装工具，我这里是默认的安装路径，C:\program Files\nodejs2.以管理员的身份进入命令提示符界面安装完毕在命令行输入node -v , npm -v命令测试是否安装成功，安装成功会出现版本号。如图下：安装cnmp安装命令：npm install -g cnpm --registry=https://reg...
2019-09-26 10:45:33
138
原创 elementui icon图标大全
基本用法Element内置丰富的图标库，主要有以下2种用法：设置类名el-icon-xxx，通常使用i元素在Element部分组件中设置icon属性页面效果以下是通过上述两种用法制作的简单导航工具条：在这里插入图片描述参考文献https://element.eleme.cn/#/zh-CN/component/icon实例<template> <el-...
2019-09-25 16:16:07
40107
7
element-admin.rar
2019-11-11
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人