- 博客(38)
- 收藏
- 关注
RSS订阅转载 vue项目 微信支付 和 支付宝支付
做了一个项目，有充值功能，充值方式为 微信和支付宝，效果如下：代码：<template> <el-card class="box-card"> <ul class="msg-box"> <li> <h4>我要充值</h4> ...
2019-07-30 11:27:05
6457
原创 ECMAScript6（ES6）标准之class类的定义、继承及静态方法
1 类定义我们先来看看我们一般的原型链方法function Person(name, age){ this.name = name; this.age = age;}Person.prototype.say = function(){ console.log('my name is ' + this.name + ', ' + this.age + ' yea...
2019-07-30 11:06:28
632
转载 JavaScript try-catch语句（错误处理）
错误处理在处理程序设计中的重要性是毋庸置疑的，任何有影响力的web应用程序都需要一套完善的错误处理机制。当然，大多数佼佼者确实做到了这一点，但通常只有服务器端应用程序才能做到如此。实际上，服务器端团队往往会在错误处理机制上投入较大精力，通常要考虑按照类型、频率，或者其他重要的标准对错误进行分类。这样一来，开发人员就能够理解用户在使用简单数据库查询或者报告生成脚本时，应用程序可能会出现的问题。虽...
2019-07-29 16:59:15
734
原创 js数组操作大全
// #数组的操作方法 // # 变异方法 // 1 shift() // 定义：shift()方法删除数组的第一个元素，并返回这个元素。 // 参数： 无 // let a = [1,2,3]; // let item = a.shift(); // 1 ...
2019-07-29 15:32:38
275
原创 js实现简单的拖拽
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
2019-07-29 14:15:04
249
原创 js 数组推导
js1.7的数组推导也是从python中借过来的概念。他是一种利用另外一个数组或可迭代对象来初始化数组元素的技术。数组推导的语法基于定义元素集合的数学模型的，也就是说，表达式和从句的写法和JS程序程序员的期望不一致。let evensquares = [ x*x for (x in range(0,10)) if (x%2 === 0) ]等价于let evensquares = ...
2019-07-27 09:17:27
816
原创 iview DatePicker组件
<DatePicker type="daterange" :start-date="new Date(1991, 4, 14)" :options="optionsWeek" placement="bottom-start" placeholder="填选时间" v-model="formValidate_week.date" style="width: 200px;z-index: 10...
2019-07-25 11:22:00
574
原创 vue 时间处理filter
{{getDetailData.updated_time | formatDate}} filters: { formatDate (time) { if(time) { let timestamp = (new Date()).valueOf() ...
2019-07-25 11:14:25
610
原创 前端导入Excel
1 html<Button @click="imFile.click()" type="primary" :loading="excelLoading" style="margin-right: 5px;" v-if="importClassIsShow">导入Excel</Button><input type="file" @change="imp...
2019-07-24 21:27:39
3531
原创 vscode添加新建文件头部注释和函数注释
新建文件作者注释和方法函数注释搜索添加koroFileHeader插件，安装之后reloadctrl+shift+p 搜索setting,然后搜索FileHeader点击并且进入setting界面（json界面亦可） //配置新建文件注释和方法注释 "fileheader.configObj": { "createFileTime": true, /...
2019-07-24 13:19:51
3932
原创 vue移动端项目真机调试
1.电脑和手机连接到同一个WIFIa.台式电脑和手机同时链接一个路由器，使用同一个wifi；b.笔记本也可以直接启用一个wifi，手机链接笔记本wifi也可以；2.查询本地IP地址WIN+R，输入cmd回车，打开命令提示符，输入ipconfig，查看本地IPv4；3.修改本地项目中IP地址找到项目中config文件夹，下面index.js文件打开；找到host: ‘...
2019-07-21 10:00:58
888
原创 vue使用动态组件
<!-- html 部分 --><div id="app" class="demo"> <button v-for="(tab,key) in tabs" @click="tabIndex=key"> {{ tab }} </button> <keep-alive> <c...
2019-07-20 14:32:05
117
原创 扫码盒获取微信支付宝付款码等信息的前端处理
<Row class="left-middle"> <Col span="24" > <Form ref="formAdd" :model="formAdd" :label-width="80"> <FormItem label="车票号" prop="newAddText"> <Input v-model.lazy=...
2019-07-19 11:29:05
3028
转载 vue.$nextTick()
一、示例先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用。模板<div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="msg1">Message got outside $nextTick: {{msg1}}</div> <...
2019-07-18 09:23:47
102
转载 v-model指令
v-model指令所谓的“指令”其实就是扩展了HTML标签功能(属性)。先来一个组件，不用vue-model，正常父子通信 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 2...
2019-07-17 15:39:27
135
转载 vue事件名命名
事件名不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子，如果触发一个 camelCase 名字的事件：this.$emit('myEvent')则监听这个名字的 kebab-case 版本是不会有任何效果的：<!-- 没有效果 --><my-component v-on:my-event...
2019-07-17 14:22:47
1864
原创 promise的三种状态
.Promise的三种状态：pending、fulfilled、rejected(未决定，履行，拒绝)，同一时间只能存在一种状态,且状态一旦改变就不能再变。promise是一个构造函数，promise对象代表一项有两种可能结果（成功或失败）的任务，它还持有多个回调，出现不同结果时分别发出相应回调。1.初始化，状态：pending2.当调用resolve(成功)，状态：pengding...
2019-07-16 22:08:21
8094
1
原创 组件的通信
几种常见的Vue组件间的传参方式Vue父子组件通讯的方法其实有很多，本文只是做一个总结，说说他们的优缺点，具体如何使用相关文档和网上大神已经总结的很多里，这里就不再说明。1.Vuex介绍Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工...
2019-07-16 20:47:53
79
原创 移动端UI库
1、Vux(mob)：类似微信样式的移动端组件库2、Mint UI(mob)：饿了么前端团队开发的移动端组件库3、Vant(mob)：有赞团队开发的移动端组件库4、cube-ui(mob)：滴滴团队开发的移动端组件库5、MUI(mob)：最接近原生APP体验的高性能前端框架6、Muse-ui(mob):基于 Vue 2.0 优雅的 Material Design UI 组件库7、vo...
2019-07-16 20:07:29
567
转载 webpack优化之HappyPack实战
由于运行在 Node.js 之上的 Webpack 是单线程模型的，所以Webpack 需要处理的事情需要一件一件的做，不能多件事一起做。我们需要Webpack 能同一时间处理多个任务，发挥多核 CPU 电脑的威力，HappyPack 就能让 Webpack 做到这点，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。由于 JavaScript 是单线程模型，要想发...
2019-07-16 09:52:51
919
原创 iview分页
<Page :total="total" show-total :page-size="size" :current="currentPage" @on-change="getCurrentPage" show-sizer :page-size-opts = [12,50,100,200,500] style="margin-top: 10px;" @on-page-size-change...
2019-07-15 21:16:04
1054
原创 vue首屏加载慢
大文件定位我们可以使用webpack可视化插件Webpack Bundle Analyzer查看工程js文件大小，然后有目的的解决过大的js文件。安装 1 npm install --save-dev webpack-bundle-analyzer 在webpack中设置如下，然后npm run dev的时候默认会在8888端口显示。 ...
2019-07-15 20:21:06
2075
原创 iview table renderHeader用法
{ title: '平均正确率', key: 'correctRate', renderHeader: (h, params) => { return ...
2019-07-15 09:28:14
7690
原创 axios多次发起相同的请求
const pending = {};const CancelToken = axios.CancelToken;const removePending = (key, isRequest = false) => { if (pending[key] && isRequest) { pending[key]('取消重复请求') } ...
2019-07-10 14:53:34
2195
原创 qrcode的项目代码
<template> <div class="queslink"> <cr-header :topTitle='topTitle'> </cr-header> <div class="content"> <p>链接与二维码：</p> <div class=...
2019-07-09 10:58:32
388
原创 js执行浏览器的复制命令
goCopy () { var Url2=this.links; var oInput = document.createElement('input'); oInput.value = Url2; document.body.appendChild(oInput); oInput.select(); // 选择对象 document.execComman...
2019-07-09 10:48:41
2451
原创 vue处理原生表格
<template> <div class="contentTemplate"> <cn-header :topTitle='topTitle'></cn-header> <div class="content" ref="content" @scroll="dropDown()"> ...
2019-07-09 10:15:47
1713
原创 js函数节流
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="styl...
2019-07-08 11:09:33
88
原创 vue处理加载状态
这里的异步组件工厂函数也可以返回一个如下格式的对象：const AsyncComponent = () => ({ // 需要加载的组件 (应该是一个 `Promise` 对象) component: import('./MyComponent.vue'), // 异步组件加载时使用的组件 loading: LoadingComponent, // 加载失败时使用的...
2019-07-08 10:47:49
1129
原创 vue异步组件
一 基础异步组件demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...
2019-07-08 10:26:05
151
原创 深入了解js单线程
1 引言 setTimeout( () => { console.log(0); }) setTimeout(() => { console.log(1); Promise.resolve( 3 ).then( data => console.log( data)) }, 10); setTimeout( () => { c...
2019-07-07 23:57:37
104
转载 h5应用程序缓存
HTML5应用程序缓存Application Cache什么是Application CacheHTML5引入了应用程序缓存技术，意味着web应用可进行缓存，并在没有网络的情况下使用，通过创建cache manifest文件，可以轻松的创建离线应用。Application Cache带来的三个优势是：① 离线浏览② 提升页面载入速度③ 降低服务器压力而且主要浏览器皆以支...
2019-07-04 09:34:43
189
转载 axios.defaults.withCredentials = true
Vue和django的前后端分离项目，之前通过在django中允许跨域访问实现了跨域请求，但为了使每个请求带上session信息，我设置了withCredentials ,即：axios.defaults.withCredentials= true然后跨域请求时会出现如下问题：Response to preflight request doesn't pass access con...
2019-07-02 21:54:57
1935
原创 iview中的render应用
h('Button', { props: { type: 'warning', size: 'small', ...
2019-07-02 21:52:03
127
转载 vue axios全攻略
vue axios全攻略不再继续维护vue-resource，并推荐大家使用 axios 开始，axios 被越来越多的人所了解。本来想在网上找找详细攻略，突然发现，axios 的官方文档本身就非常详细！！有这个还要什么自行车！！所以推荐大家学习这种库，最好详细阅读其官方文档。大概翻译了一下 axios 的官方文档，相信大家只要吃透本文再加以实践，axios 就是小意思啦！！如果您觉得本文...
2019-07-02 21:44:20
5072
原创 前端调后台导出报表
exportList () { let config = { responseType: "blob", withCredentials: false }; this.spinShowExport = true listExport(this.activityId,config).then((...
2019-07-02 21:39:35
1196
转载 前端如何在H5页面调起微信支付
在微信服务号开发的时候经常会遇到微信支付的功能实现，通过实际经验自己总结了一下，前端在H5页面调起微信支付有两种办法，一是利用内置对象，二是通过引用微信的js sdk，亲测都能支付成功，从写法上来看用内置对象方法比较简单。这里讲的只是前端要做的事情，整个微信支付还有多一半的工作量需要后台去实现，这里就不讲了。方法一（利用内置对象）：function onBridgeReady(){W...
2019-07-01 19:29:07
9654
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人