小皇帝web前端-优快云博客

原创 Vue Element正则验证（所有）

1. 手机号： var validateMobilePhone = (rule, value, callback) => { if (value === '') { callback(new Error('手机号不可为空')); } else { if (value !== '') { var reg=/^1[3456789]\d{9}$/; if(!reg.tes.

2021-02-02 08:58:41 1809 1

通常我们在vue项目中都是前端配置好路由的，但在一些项目中我们可能会遇到权限控制，这样我们就涉及到动态路由的设置了。动态路由设置一般有两种：(1)、简单的角色路由设置：比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置(2)、复杂的路由权限设置：比如OA系统、多种角色的权限配置。通常需要后端返回路由列表，前端渲染使用1、简单的角色路由设置（1）配置项目路由权限// router.jsimport Vue from 'vue'import Router f

2020-09-22 15:42:59 4217 3

原创 async await处理异步请求数据

vue使用axios向后端发送请求。默认是异步发送请求。例如： handleSubmitTest(systemId) { fetchGetProjectInfoBySystemId(systemId).then(response => { const projectObj = response.data.data const branchObj = this.getBranchInfoB...

2020-06-22 16:09:56 1490

原创原生JS获取HTML DOM元素

通过ID获取（getElementById） document.getElementById('id')通过name属性（getElementsByName） document.getElementsByName('name')通过标签名（getElementsByTagName） document.getElementsByTagName('div');通过类名（getElementsByClassName） document.getElementsByClassName('anim.

2020-05-25 14:40:05 263

转载 js递归函数

递归函数：是指函数直接或间接调用函数本身，则称该函数为递归函数。function foo(){ console.log("函数 foo 是递归函数。"); foo();}这是一个死循环使用递归函数必须要符合两个条件：1、在每一次调用自己时，必须是（在某种意义上）更接近于解；这句话怎么理解？大家家里都有楼梯吧？比如从一楼走到二楼，那么我们的起点是一楼，目的地是二楼，当你往上每走一个台阶是不是越接近二楼，也就是越接近目的地。因此这句话可以这样理解：函数每一次调用自

2020-05-11 11:12:44 702

原创 vue中nextTick和$nextTick的区别

<ul id="app"> <li v-for="item in Array">{{item}}</div></ul><script>new Vue({ el:'#demo', data:{ Array=[0,1,2,3,4,5,6,7,8,9,10] }, methods:...

2020-05-07 10:08:34 1077

原创 Promise-当一个接口需要依赖另一个接口的请求数据

场景一：先调用getData1，再调用getData2，再调用getData3 ...//创建一个Promise实例，获取数据。并把数据传递给处理函数resolve和reject。需要注意的是Promise在声明的时候就执行了。var getData1=new Promise(function(resolve,reject){ $.ajax({ type:"get...

2020-04-13 10:54:27 5565

原创 vue中async await请求处理

Promise.all()用法示例：const wait = ms => new Promise((resolve, reject) => { setTimeout(() => { console.log(`wait ${ms}ms`) resolve() }, ms)})const PA = Promise.all([...

2020-04-13 10:38:31 6566

转载 vue组件之间的通信传值方式

vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家，坐着一屋子的陌生人，相互之间怎么称呼，这时就需要先知道自己和他们之间是什么样的关系。vue组件中关系说明:如上图所示, A与B、A与C、B与D、C与E组件之间是父子关系； B与...

2020-04-02 16:23:22 457

转载解决vuex在页面刷新后数据丢失的问题

一、原因　　js代码是运行在内存中的，代码运行时的所有变量、函数也都是保存在内存中的。　　刷新页面，以前申请的内存被释放，重新加载脚本代码，变量重新赋值，所以这些数据要想存储就必须存储在外部，例如：Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API，让你可以将数据存储在硬盘上，做持久化存储。具体选择哪一个就根据你实际需求来选择。二...

2020-03-30 18:42:52 2048

翻译 Vue性能优化

Vue性能优化今天来谈一谈Vue中一些性能优化的问题，仅仅是个人使用中的一些小心得，来，今天我一句废话不多说，直接上内容好吧　　1.v-if和v-show的使用，　　　　我们都知道这两个都可以控制显隐，那我们用哪个呢，个人觉得要从两个方面入手来确定使用哪个，　　　　1.权限的问题，只要涉及到权限相关的展示用v-if比较好　　　　2.切换地频率，如果频繁的切换我们用v-show，...

2020-03-10 16:43:44 402

翻译 vue中实现登录控制

sessionStorage.username = this.username; 上面的登录页面注意：login方法中登录成功需要写入sessionStorage以便路由进行判断 import Vue from 'vue'import Router from 'vue-router' Vue.use(Router) const routes = [ {...

2019-12-13 10:08:07 177

原创 Vue入门小结

1、指令{{msg}}/v-text #文本插值v-html #原始html v-once #只渲染一次 v-show #css控制显示隐藏 v-if #根据表达式渲染元素 #用 key 管理可复用的元素 v-else/v-else-if #紧跟v-if的else v-for #列表渲染可以循环数字、数组、对象和对象数组 v-on...

2019-11-28 19:12:40 208

原创点击登录弹出层以及遮罩层关闭

function openNew(){ //获取页面的高度和宽度 var sHeight=document.documentElement.scrollHeight; var sWidth=document.documentElement.scrollWidth; //可视区域的高度和宽度 //如果说页面是一个竖向的页面那么可视区域的宽度和高度是一样的 v...

2019-11-28 19:11:02 324

原创字符串拼接多请求数据合并确保都请求成功才执行

var name = '小明';var age = 20;var message = '你好, ' + name + ', 你今年' + age + '岁了!';alert(message);es6写法var name = '小明';var age = 20;var message = `你好, ${name}, 你今年${age}岁了!`;alert(message);...

2019-11-28 19:10:19 312

原创回调函数和闭包

回调函数就是一个通过函数指针调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用为调用它所指向的函数时，我们就说这是回调函数。回调函数不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，用于对该事件或条件进行响应。在JavaScript中：回调函数的具体定义为：函数A作为参数(函数引用)传递到另一个函数B中，并且这个函数B执...

2019-11-28 19:08:29 1073

原创 created和mounted区别

有改变dom的时候就用mounted 没有改变dom操作就用createdcreated:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。备注:其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行...

2019-11-28 19:06:45 1579

原创 sessionStorage和localStorage区别

localStorage 关闭浏览器不会清除添加window.localStorage.serItem('name','rosen')查看window.localStorage.getItem('name')删除window.localStorage.removeItem('name')

2019-11-28 19:05:02 119

原创 JS 多维数组扁平化处理

// 多维数组扁平化 var arr=[1,2,[3,4,[5,6,7]],9,[10,11]]// 1) 方法一循环数组+递归调用function steamroller (arr){ // 1.创建一个新数组，保存扁平后的数据 var newArr=[]; // 2.for循环原数组 for(var i=0;i<arr.length;i++){ if...

2019-11-28 19:01:08 674

原创 var let const区别

1. varif (true) { var foo = 3;}console.log(foo); // 3for (var i = 0; i < 9; i++) { var j = i;}console.log(i); // 9console.log(j); // 82.let添加了块级作用域if (true...

2019-11-28 18:58:33 134

原创多个数组对象求和

var arr=[{a:1,b:2,c:3}, {a:2,b:2,c:2}, {a:1,b:2,c:7}, {a:2,b:2,c:3}]; var obj={}; var numa_i=0; var numb_i=0; var numc_i=0; for(var i in arr){ for(var j in ar...

2019-11-28 18:56:33 1535

原创时间戳转时间

var nowdate = new Date();var starttime=Math.round(new Date().getTime()/1000);var y = nowdate.getFullYear();var m = nowdate.getMonth()+1;var d = nowdate.getDate();var formatnowdate = y+'-'+m+'-'+...

2019-11-28 18:55:53 443

转载 vue extend 的基本使用

vue extend 的基本使用vue.extend 局部注册的应用2请注意，extend创建的是一个组件构造器，而不是一个具体的组件实例。所以他不能直接在new Vue中这样使用：new Vue({components: fuck})最终还是要通过Vue.components注册才可以使用的。<!doctype html><html><h...

2019-03-26 14:32:13 3868

翻译 js 时间戳转为日期格式

js 时间戳转为日期格式什么是Unix时间戳(Unix timestamp)： Unix时间戳(Unix timestamp)，或称Unix时间(Unix time)、POSIX时间(POSIX time)，是一种时间表示方式，定义为从格林威治时间1970年01月01日00时00分00秒起至现在的总秒数。Unix时间戳不仅被使用在Unix系统、类Unix系统中，也在许多其他操作系统中被广...

2019-01-28 19:58:07 477

翻译 jQuery常用

0、常用代码:请容许我在1之前插入一个0，我觉得我有必要把最常用的代码放在第一位，毕竟大部分时间大家都是找代码的。(1)AJAX请求$(function() { $('#send').click(function() { $.ajax({ type: "GET", //GET或POST, async:true, //默认设置为true，所有请求均为异步请求。 ...

2018-10-23 09:57:49 168

翻译 npm安装 vue-cli安装

一、使用之前，我们先来掌握3个东西是用来干什么的。npm: Nodejs下的包管理器。webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）开始：...

2018-10-09 08:57:40 1861

翻译 Android开发学习总结(一)——搭建最新版本的Android开发环境

一、下载相关软件　　android开发环境　　　　准备工作：下载Eclipse、JDK、Android SDK、ADT插件　　下载地址：JDK：http://www.oracle.com/technetwork/java/javase/downloads/index.html　　　　　　　Eclipse:http://www.eclipse.org/downloads/...

2018-08-22 08:43:42 250

翻译数组去重

1.最基本的去重方法思路：定义一个新数组，并存放原数组的第一个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中。function unique(arr){　　var res = [arr[0]];　　for(var i=1;i<arr.length;i++){　　　　var repeat = false;　　　　for(var j=0;j<...

2018-08-20 18:51:19 130

翻译 Jquery制作弹窗效果

Jquery弹窗效果1.主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">...

2018-08-16 10:59:04 1398

翻译 ajax处理增删改查

前端处理<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>&

2018-08-16 10:56:02 1997 1

翻译日期范围操作以及比较

格式为yyyyMMdd，如20120101的日期比较大小： 2 样例代码： 3 格式为yyyy-MM-dd，如2012-01-01的日期比较大小： 4 样例代码： 5 格式为yyyy/MM/dd，如2012/01/01的日期比较大小： 6 样例代码： ...

2018-08-15 14:32:28 696

翻译 JQuery Easy Ui dataGrid 数据表格此文章解决easy ui 足矣

JQuery Easy Ui dataGrid 数据表格使用方法（Usage Example）从现有的表单元素创建数据表格，定义在html中的行，列和数据。table class="easyui-datagrid"> thead> tr> th data-options="field:'code'">

2017-12-04 09:39:45 3161

原创 js中this用法详解（2）

js中的this我们要记住：this永远指向函数运行时所在的对象！而不是函数被创建时所在的对象。this对象是在运行时基于函数的执行环境绑定的，在全局环境中，this等于window先来看个例子：script> var fullname = "Trigkit4"; var person = { fullname : 'Jack', p

2017-11-08 14:20:31 202

原创 js中this用法（1）

this的用法非常的单一，因为他们没有js特有的动态绑定。function funcA() { this.name = "hello"; console.log(this.name); this.show = function() { console.log(this.name); }}funcA();// 1、hellovar a =

2017-11-08 14:13:54 748

原创 web前端页面性能优化小结

一、提倡前端开发工程师在书写xhtml的时候做到结构语义化。结构中主要包括了head和body两个部分，但是我们经常说的是结构语义化主要是body中的标签，但是我在这里还是简单的说一下head，head中其实包括了一些对于我们seo很有用的一些东西，比如title,Description,Keywords,这些东西在蜘蛛抓取的时候都是有帮助的，当然，还有其他的一些，我在此就不一一说明了，比

2017-11-06 13:13:37 253

原创浏览器兼容-----前端最头疼的问题

1 ie6.0横向margin加倍产生因素：块属性、float、有横向margin。解决方法：display：inline；2 ie6.0下默认有行高解决方法：overflow:hidden;或font-size:0;或line-height：xx px；3 在各个浏览器下img有空隙(原因是：回车。)解决方法:让图片浮动。4 一个父标签与几个子标签嵌套，父

2017-11-03 10:28:00 287

信心比天才重要