_hakim-CSDN博客

原创关于webpack打包 js、css 压缩优化总结

项目开发接近尾声，优化是不可忽略的，下面来说说我对项目的优化之路：开发环境：使用vue-cli安装项目"vue": "^2.4.2","vue-router": "^2.7.0","webpack": "^3.5.5","node": "8.12.0",一基础优化：路由按需加载、图片的懒加载、cdn地址引用，不多说了，直接上图：1、*部分路由按需加载；2、...

2019-04-02 17:17:19 2398

原创 vue+element-ui 身份证验证（获取出生日期，籍贯、年龄、性别）

基于vue.js 和 element-ui <el-form> 的validate验证实现html代码 <el-form :model="baseInfo" ref="baseForm" :rules="baseFormRules" label-width="110px" class="departmentDetail-ruleForm">

2019-03-06 11:52:43 14497 3

原创 JS 获取n个月后的日期（使用在vue 框架）

<template> <el-form-item label="合同到期日期：" prop="endDate"> <el-date-picker type="date" placeholder="年-月-日" v-model="contractInfo.endDate" :value="getYmd(3

2019-02-26 14:50:45 2284 1

原创 vue element-ui table 滚动条位置缓存

需求：浏览器不关闭的情况下，每次进入指定页面，element-ui table的滚动条保留在上次离开页面时的位置；开发步骤：1、经过代码测试，在vue里面给el-table 添加ref来获取元素dom，然后给refs设置scrollTo(left,top)无效；2、添加自定义指令可以获取和设置元素属性和方法，给class为el-table__body-wrapper的元素绑定滚动事...

2018-12-07 15:47:52 3712

转载 Vue.js 插件开发详解

前言随着 Vue.js 越来越火，Vue.js 的相关插件也在不断的被贡献出来，数不胜数。比如官方推荐的 vue-router、vuex 等，都是非常优秀的插件。但是我们更多的人还只停留在使用的阶段，比较少自己开发。所以接下来会通过一个简单的 vue-toast 插件，来了解掌握插件的开发和使用。认识插件想要开发插件，先要认识一个插件是什么样子的。Vue.js 的插件应当有一个公开...

2018-08-30 10:26:32 155

转载基于webpack的React项目搭建(一)

前言工欲善其事，必先利其器。为了更好的学习React，我们先简要的把开发环境搭建起来。本文主要介绍使用webpack搭建React项目，如果你对React或es6的基础语法还不了解，建议先去学习学习。基础环境 node/npm webpack 现代JavaScript程序应用的模块打包器。它主要分析你的项目结构，找到JavaScript模块以及其他一些浏览器不能直接运行...

2018-08-21 09:38:32 101

原创 vue tab滑动置顶

当内容区域的tab 滚动到屏幕顶部时，将tab区域固定在顶部不动，内容单独滚动。具体实现方法如下：1、设置html <div> <div class="tab" id="fixedBar" :class="{fixedBar:isFixed}"> <span :class="tabActive===1?'active':''" @cli

2018-08-14 13:49:08 2190

原创 JS 中数组 slice() 方法和 splice() 的区别

1、slice(start,end) 方法定义：返回一个新的数组，该方法可从已有的数组中返回选定的元素。参数：start 数组的开始位置（不可为空）；end 数组的结束位置（为空数组最后位置）实例：如下var arr = new Array(3);arr[0] = "lisi";arr[1] = "wangwu";arr[2] = "zhouyi";console.lo...

2018-08-03 10:20:05 658

原创 JS数组去重实用的四种方法

1、利用对象的属性去重思路：每次取出原数组的元素，然后再对象中访问这个属性，如果存在就说明重复function unique(arr){　　var res =[];　　var json = {};　　for(var i=0;i<arr.length;i++){　　　　if(!json[arr[i]]){　　　　　　res.push(arr[i]);　　　　　　json...

2018-08-02 16:46:54 239

转载关于rem和px全局设置问题

rem布局非常简单，首页你只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'onorientationchange' in window ? 'onorientationchange' : 'resize', ...

2018-08-02 11:40:06 4862

到现在，接触vue也小段时间了，项目进行到了一定程度，然而项目缺少了缓存机制，所以每次跳转页面都会重新created一下数据，虽说系统的数据请求速度很快，但是这样做对系统的性能会有很大的坏处的，所以到这里就要对系统优化下，添加缓存了。其实到现在，对于vue还是没有玩通，每深挖一次，就会发现一次vue的精彩，开始不清楚要用什么实现缓存，找了好久，有好几种说法，就是用vuex、vuet或者keep-...

2018-08-02 11:38:48 5073

转载 ES6/ES2015 Promise 用法讲解

ES6/ES2015 Promise 用法讲解Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。那就new一个var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ ...

2018-08-02 11:38:06 1826 1

转载 ES2015/ES6 扩展运算符三个点（...）

1 含义扩展运算符（ spread ）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5[...document.querySelectorAll('div')]// [<...

2018-08-02 11:37:29 2548

Hakim