- 博客(44)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 element-ui渲染el-table表格小技巧
element-ui中table的使用当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。相当于是要枚举出所有需要展示的参数，这种情况在参数比较少的情况下是比较方便的，但是在有很多数据或者参数不确定的情况下，这种枚举的方式就不太适合了常规用法<template> <el-table :data="tableData"
2021-10-12 09:34:14
3893
原创 css高频使用片段，提高幸福感的小技巧
1. 解决图片5px间距方案1：给父元素设置font-size: 0// html<div class="img-container"> <img src="图片地址" /></div>// css.img-container { font-size: 0;}img { width: 100%;}方案2：给img设置display：block// cssimg { width: 100%; display: block;}方案3
2021-10-08 17:07:48
170
原创 鉴权必须了解的5个知识点：cookie，session，token，jwt，单点登录
从状态说起[HTTP 无状态]我们知道，HTTP是无状态的，也就是说，HTTP请求方和响应方间无法维护状态，都是一次性的，它不知道前后的请求都发生了什么但有的场景下，我们需要维护状态，最常见的，一个用户登录微博，发布，关注，评论，都是应该在登录后的用户状态下的[标记]在学校或公司，入学入职那一天起，会录入你的身份、账户信息，然后给你发个卡，今后在园区内，你的门禁、打卡、消费都只需要刷这张卡[前端存储]这就涉及一发，一存，一带，发好办，登录接口直接返回给前端，存储就需要前端想办法了，前提是，你要
2021-10-08 14:52:10
3738
4
原创 vue手把手带你撸项目系列之动态面包屑
常见方式首先我们想到的最笨的方法就是在每个需要面包屑的页面中固定写好<template> <div class="example-container"> <el-breadcrumb separator="/"> <el-breadcrumb-item v-for="(item, index) in breadList" :key="index" :to="{ path: item.path }" > {{i
2021-10-08 11:32:54
227
原创 手把手带你实现vue全屏loading插件
功能分析vue项目中所有的请求一般都是通过axios，所以我们需要给axios新增请求和响应拦截，在请求拦截中显示loading,和响应拦截中关闭loading。所以我们需要定义两个全局方法，一个是显示loading，叫showLoading(),另一个叫showLoading(),另一个叫showLoading(),另一个叫hideLoading()关闭全屏loading。代码实现上面的梳理，我们明确了，需要定义两个全局方法，一个显示loading一个关闭loading，这里我们定义一个Vue的插
2021-10-08 11:00:24
1491
1
原创 echarts 实现各种图表
地图（china map）// html<div ref="fillcontainer"> <div id="fundPosition"></div></div>//js<script>import echarts from 'echarts'; // 引入echarts插件import '../../../node_modules/echarts/map/js/china.js'; // 引入china map数据import
2021-09-26 17:54:02
359
原创 vue实现后台管理excel导入导出
导入// 结构<template> <div> <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport" >导入</el-button> <el-dialog :title="upload.title" :visible.sync="upload.open" width:
2021-09-22 16:55:39
798
原创 vue 实现自定义表格工具扩展
工具组件<template> <div class="right-btn"> <el-row> <el-tooltip effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" > <el-button size="mini" circle icon="el-icon-search"
2021-09-18 16:36:35
547
原创 vue实现动态面包屑导航
<template> <el-breadcrumb separator="/"> <transition-group name="breadcrumb"> <el-breadcrumb-item v-for="(item, index) in levelLst" :key="item.path" > <span v-if="item.redirect === 'noRedirect' || index === l
2021-09-18 16:17:30
1115
原创 vue 登录页面逻辑详解
登录页面<template> <div class="login"> <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" > <h3>vue公众号后台管理系统</h3> <el-form-item prop="username"> <el-input v
2021-09-18 15:31:03
1304
原创 vue slot slot-scope v-slot使用详解
slot 不具名插槽// App 组件<template> <div id="app"> <Test> <div>slot插槽占位内容</div> </Test> </div></template><script> import Test from '@/component/Test.vue'; export default { components: { T
2021-09-18 11:39:36
879
原创 vue computed 计算属性内传参
如果有传参数的需求比如说做数据筛选功能可以使用闭包函数（也叫匿名函数）实现<div> <tr v-for="(item, index) in arr" v-if="myfilter(index)"> <td>{{item.username}}</td> <td>{{item.sex}}</td> <td>{{item.grade}}</td> </tr></div>
2021-09-18 11:11:58
105
原创 vue mixins之学习系列
什么是mixinsmixins是一种分发Vue组件中可复用功能的一种灵活方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项如何应用mixins定义一个混入对象// mixin.jsexport const myMixin = { data () { return { num: 1 } }, created () { this.getList(); }, methods: { getList () { con
2021-09-18 10:57:47
140
原创 vue 项目开发实践
安装vuexnpm install vuex --save在main.js中使用import Vuex from 'vuex';Vue.use(Vuex);state.js（用来定义初始化状态）const state = { name: 'heqiuyu', age: 18};export default state;getters.js （用来获取state的状态，而不是直接使用state）export const name = (state) => { retur
2021-09-17 22:39:56
101
原创 使用 vue 事件总线（EventBus）
EventBus的简介EventBus又称为事件总线。在Vue中可以使用EventBus来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。如何使用EventBus初始化首先创建事件总线并将其导出，方便其他模块使用或者监听它，有两种方式来处理第一种，创建一个event_bus.js文件//
2021-09-17 21:55:02
281
原创 vue项目中使用全局变量，全局函数
在项目中，经常有些函数和变量是需要复用，比如说网站服务器地址，从后台拿到的：用户的登录 token, 用户的地址信息等使用全局变量原理: 设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用 export default 暴露出去，在 main.js 里面使用 Vue.prototype 挂载到 vue 实例上面或者在其它地方需要使用时，引入该模块便可。全局变量模块文件// global.jsconst token = 'sjldkfsjdlfksjdf';const isLo.
2021-09-17 21:08:27
1106
原创 Vue登录注册，并保存登录状态
项目中有一些路由是需要登录才可以进入的，比如首页，个人中心等等有一些路由是不需要登录就可以进入，比如登录页，注册页，忘记密码等等那如何判断路由是否需要登录呢？在router.js中添加meta区分比如登录注册页面，不需要登录即可进入，那么我们把meta中的isLogin标志设置为false{ // 登录 path: '/login', component: login, meta: { isLogin: false }},{ // 注册 path: '/register',
2021-09-16 22:47:32
2806
原创 Vue项目性能优化技巧
我们将从以下三个层面来优化Vue代码层面的优化webpack配置层面的优化3.基础的Web技术层面的优化代码层面的优化1.1 v-if 和 v-show区分使用场景v-if是真正的条件渲染，确保切换过程中条件快内的事件监听器和子组件适当的被销毁和重建，也是惰性的，如果在初始渲染时条件为假，什么都不做，知道条件为真时，才会渲染v-show，元素总是会被渲染，并且只是简单的基于CSS的display属性进行切换总结：v-if适用于在运行时很少改变条件，不需要频繁切换条件，而v-sho.
2021-09-16 22:23:55
120
原创 js判断一个对象为空
for…in…遍历属性，为真则为"非空数组"；否则为"空数组"var newObj = function (obj) { for (var item in obj) { return true; } return false;}通过JSON自带的.stringify方法来判断var newObj = function (obj) { if (JSON.Stringify(obj) == "{}") return true; else return false;}ES6.
2021-09-16 21:22:27
60
原创 js统计字符串中字符出现的次数
思路是定义一个空对象来保存字符和它对应出现的次数var str = "ksdfjsldkfj", json = {};for (var i = 0; l = str.length; i < l; i++) { json[str[i]] = (json[str[i]] + 1) || 1;}console.log(JSON.stringify(json));字符串中第一个重复的字符var str = "ksdfjsldkfj", json = {};for (var .
2021-09-16 21:15:09
997
原创 实现图片上传http-request
// 页面结构<el-upload class="avatar-uploader" :action="uploadUrl" :http-request="upload" :show-file-list="false" :before-upload="beforeUpload" list-type="picture-card"> <img v-if="addSizeForm.siteLogo" :src="addSizeForm.sizeLogo" class="avata
2021-09-16 12:02:16
1226
原创 js字符串判断方法
根据id得到对象function obj$ (id) { return document.getElementById(id);}根据id得到对象的值function val$ (id) { var obj = document.getElementById(id); if (obj !== null) { return obj.value; } return null;}删除左边和右边空格function trim (str) { return str.rep.
2021-09-15 20:38:20
431
原创 在vue项目中使用vuex（状态管理器）
Vuexvuex是一个专为vue.js应用程序开发的状态管理模式，它采用几种存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，简言之，就是全局状态管理Statevuex使用单一状态树，用一个对象就包含了全部的应用层级状态，意味着，每个应用将仅仅包含一个store实例，state为store中最基本的状态，state中的状态是响应式的，那么当状态变更时，监视状态的vue组件也会自动更新，提前在store中初始化所有属性，当需要在对象上添加新属性时，使用Vue.set(o.
2021-09-11 17:43:24
229
原创 JS 数组对象排序
假设有一个对象数组，我们想要根据某个对象属性对数组进行排序，而传递给数组sort()方法的比较函数要接受2个参数，即要比较的值可是，我们需要一种方式指明按照哪个属性来排序。要解决这个问题，可以定义一个函数，它接收一个属性名，然后根据这个属性名来创建一个比较函数function createComprisonFunction (propName) { return function (object1, object2) { var value1 = object1[propName]; var
2021-09-07 12:36:49
1944
1
原创 JS 对对象中的属性名进行排序
var obj = { name: 'zhangsan', age: 16, ace: 5, sec: 'list'} // 要排序的对象// var newKey = Object.keys(obj).sort();// console.log(newKey)// 排序函数function objKeysSort (obj) { /** * 先用Object内置类的keys方法获取要排序对象的属性名 * 再利用Array原型上的so
2021-09-07 12:27:08
1593
原创 处理地址栏url技巧
// 例var url = 'http://www.deikang.com/index.php?tel=15811296111&status=1&id=100';// 通过?分割var fir = url.indexOf('?');console.log(first) // ?tel=15811296111&status=1&id=100// 通过substring从第一位开始截取var sec = url.substring(n + 1, url.lengt
2021-09-06 10:26:08
109
原创 JavaScript深入之实现多维数组扁平化
function init (arr) { var newArr = []; if (arr instanceof Array) { arr.forEach(function (value) { newArr = newArr.concat(init(value)); }) } else { newArr.push(arr); } return newArr;}init([1, [2], [3, [[4]]]]);
2021-09-02 17:42:40
127
原创 JavaScript深入之数组去重
双重for循环 去重var arr = [1, 1, 2, 3, 1];function unique (arr) { var res = []; for (var i = 0; arrLen = arr.length; i < arrLen; i++) { for (var j = 0; resLen = res.length; j < resLen; j++) { if (arr[i] === res[j]) { break; } } // 如果.
2021-09-02 17:34:09
72
原创 防抖与节流机制
防抖/* 定义一个按钮，并绑定一个点击事件，执行要触发的事件*/// 第一步：定义一个按钮<input type="button" id="btn" value="按钮" />// 第二步// 获取标签var btn = document.getElementById("btn");// 绑定事件btn.addEventListener('click', debounce);// 点击按钮，要触发的事件function debounce (e) { console.
2021-09-02 16:25:56
253
原创 封装通用loading组件
our-loading组件<tempalte> <transition name="fade"> <view class="mask" v-show="isActive" :class="{ "full-screen": isFullScreen }" :style="{ backgroundColor }" > <view class="spinner" :style="{ transform: `translate(-
2021-09-02 14:48:51
160
原创 需求：实现搜索关键字高亮显示
搜索关键字高亮显示<template> <div class="container"> <input v-model="searchValue" type="text" placeholder="请输入关键字" /> <div class="search-list" v-for="(v, i) in list" :key="i" > <div class="search-wrap"> <p class="s.
2021-09-02 09:30:39
100
原创 面向对象OOP
从零开始面向对象的程序设计构建函数和对象有些人认为 JavaScript 不是真正的面向对象的语言，比如它没有像许多面向对象的语言一样有用于创建class类的声明。JavaScript 用一种称为构建函数的特殊函数来定义对象和它们的特征构建函数提供了创建您所需对象（实例）的有效方法，将对象的数据和特征函数按需联结至相应对象// 例：利用普通函数定义一个人function createNewPerson (name) { var obj = {}; obj.name = name; obj
2021-09-01 13:51:22
67
原创 React Hook详解
HooksHook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性什么是Hooks？Hook是一些可以让你在函数组件例钩入React state及生命周期等特性的函数，Hooks不能在class组件中使用Hook和函数组件const Example = (props) => { // 你可以在这使用Hook return <div />;}// 或者是function Example (p.
2021-08-25 23:29:50
202
原创 React 基础
初识React步骤一：添加一个DOM容器到HTML<div id="app"></div>步骤二：添加Script标签// 加载 React<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.d.
2021-08-24 23:14:57
435
原创 JavaScript 代码技巧合集 （2021-08-17）
代码技巧多表达式多if判断：我们可以在数组中存储多个值，并且可以使用数组include方法// 长if (x === 'a' || x === 'b' || x === 'c') { // logic}// 短if (['a', 'b', 'c'].includes(x)) { // logic}&& 运算符如果仅在变量值为 true 的情况下才调用函数，则可以使用 && 运算符。// 长if (test) { callMehtod.
2021-08-17 22:33:51
97
原创 深入理解数组slice全解析（2021-08-17）
sliceslice() 方法可从已有的数组中返回选定的元素，原数组不改变返回新选定的元素组成的新数组arr.slice(start, end)start：可选，数组从什么位置开始选择，如果没设置默认值是0，从头开始选择end：可选，数组截取到哪里，默认截取到数组的尾部// 例子var arr = [1, 3, 5, 7, 9];var arr1 = arr.slice(); // [1, 3, 5, 7, 9] 从头开始选取var arr2 = arr.slice(1); /.
2021-08-17 21:46:55
418
原创 函数工具库合集 （2021-08-17）
函数工具合集export default class Utils { constructor () { } static ce(type, style, data, prop) { let elem = document.createElement(type); if (style) Object.assign(elem.style, style); if (data) Object.assign(elem, data); if (prop) { for (let k in.
2021-08-17 21:05:30
94
原创 数组扩展方法重写（2021-08-15）
forEach方法Array.prototype.myForEach = function (cb) { var _arr = this; var _len = _arr.length; var _arg2 = arguments[1] || window; for (var i = 1; i < _len; i++) { cb.apply(_arg2, [_arr[i], i, _arr]); }}map方法Array.prototype.myMap = funct.
2021-08-15 17:12:31
58
原创 对象深拷贝（2021-08-15）
ES5实现/* origin: 原对象 target: 目标对象*/function deepClone (origin, target) { var tar = target || {}; var toStr = Object.prototype.toString; var arrType = '[object, Array]'; for (var k in origin) { // 判断原型 if (origin.hasOwnProperty(k)) { if (t.
2021-08-15 15:59:16
73
原创 作用域，作用域链，预编译（2021-08-15）
[[scope]]函数创建时，生成的一个JS内部的隐式属性函数存储作用域链的容器，作用域链AO / GOAO 函数的执行期上下文GO 全局的执行期上下文函数执行完成以后，AO是要销毁的AO是一个即时的存储容器function a () { function b () { var b = 2; } var a = 1; b();}var c = 3;a();总结：当函数被定义时，生成作用域，作用域链，当函数被执行那一刻，生成AO当a函数被定义时，系统生成[
2021-08-15 15:04:15
69
JS数据类型转换.txt
2020-03-22
###JS数据类型转换###.txt
2020-03-22
CSS3基础相关知识点.txt
2020-03-08
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人