- 博客(46)
- 收藏
- 关注
RSS订阅原创 Vue导出json数据到Excel电子表格
网上看了很多文档感觉都不全，这里写一篇完整的详细教程。一、安装依赖npm install file-saver --savenpm install xlsx --savenpm install script-loader --save-dev二、下载两个所需要的js文件Blob.js和 Export2Excel.js。这里贴下下载地址：http://xiazai.jb51.net/...
2019-11-15 10:36:14
547
1
原创 工作日志4（用户换主题，一键换肤）
业务需求vue-i18n国际化时，发现表单，table等的label和placeholder等无法使用$t('')增加一键换肤功能解决方法1.只需要用v-bind动态绑定label把label ：改成:label="$t('user.oldPasswd')"就可以了一键换肤首先，先看一下目录和主要文件index.scss： 一些通用样式文件,入口文件，引入mixin.scss和...
2019-11-06 15:27:53
290
原创 工作日志5
业务需求用户管理员的禁用和启用解决方案html <el-button v-if="scope.row.isEnable" type="warning" @click="confirmIsEnable(scope.row)" > {...
2019-11-04 15:09:52
138
原创 vue中的template标签
1.template标签，HTML5提供的新标签，更加规范和语义化 ；可以把列表项放入template标签中，然后进行批量渲染2.在非单组件文件的vue.js的程序里，常会见到一个标签，似乎在官网上也没有专门讲到这个标签。 那这个到底是什么玩意？实际上 元素是被当做一个不可见的包裹元素，主要用于分组的条件判断和列表渲染。具体情况见官方文档： 1、“条件渲染”，其中的章节——在元素上使用...
2019-10-31 15:01:56
386
原创 工作日志3（增加管理员账号禁用，启用）
业务需求增加管理员账号禁用，启用思路后台已经存在接口，参数名为isenable:是否启用在table中，我定义一个tag标签，显示 是/否，在表单中实现用户的禁用启用，我直接将他放进表单里面，一起传到后台去，如图解决方案table页面<el-table-column label="是否启用"> <template slot-scope="scope...
2019-10-30 17:04:11
241
原创 工作日志2
业务需求增加修改密码的功能解决方案<template> <div class="app-container common-list-page"> <el-form :model="form" :rules="formRules" ref="form" status-icon label-wi...
2019-10-30 16:45:08
205
原创 工作日志1
业务需求一个页面通过接口获取oslist ,通过筛选出id ，然后赋值给release 中的os，因为我最后是提交release 中的表单数据数据release：{“msg”:“ok”,“data”:[{“appType”:1,“id”:58,“os”:1,“status”:0,“version”:“111”}],“code”:20000}oslist：{“createTime”:“201...
2019-10-30 16:30:49
77
原创 `this` undefined in filters（vue过滤器中的this为undefined）
this undefined in filters今天改bug的时候无意中发现过滤器中调用this 竟然为undefined ，所以我去github查了一下，搬运一下评论这是故意的，还是应该this成为组件？我希望它是组件。您可以将其this用作过滤器功能的参数。另外，我认为最好支持this可以利用pipe样式的上下文。例如，如果我们有fn1，fn2和fn3，并且这样的代码{{ ...
2019-10-30 10:01:36
1008
原创 vue项目,更新完数据后如何刷新当前页面
今天码的时候，我删除了一条数据，删除完后发现获取完之后当前页面的数据并没有刷新，只有做一下其他的操作比如往前跳转一页再跳回来，数据才会刷新。然后其他的新增、编辑功能并不会出现这种情况，都是在请求完成后数据立马刷新想了一下发现可以这样做如果你要刷新的页面是当前页面，那么你只需要直接重新调接口更新表格数据，不必刷新整个页面例如·：toDelete(id) { this.$co...
2019-10-21 17:32:31
5215
1
原创 什么是双飞翼布局和圣杯布局？
双飞翼布局和圣杯布局都是实现两边固定中间自适应的三栏布局的方式，最近在整理三栏布局实现方式的笔记，决定但拉出来一篇，记一下这两个经典布局。1、圣杯布局浮动、负边距、相对定位、不添加额外标签效果图html:<p class="header">Header</p><p class="bd"> <p class="main">Main...
2019-10-16 17:53:31
256
原创 ES6：展开运算符 (三个点 ... )
展开运算符,将一个数组转为用逗号分隔的参数序列合并数组let a = [1,2,3];let b = [4,5,6];let c = [...a,...b]; // [1,2,3,4,5,6]解构赋值let a = [1,2,3,4,5,6]let [c,...d] = aconsole.log(c); // 1console.log(d); // [2,3,4,5,6]//...
2019-10-16 16:01:21
229
原创 轮播图的实现思路
图片轮播，一个你再熟悉不过的小东西了。或许在你刚开始学习web的时候就能做出来得到效果。但是你会发现当面对不同的需求的时候又要重新写一个轮播。很是麻烦的对吧。LZ也是这样学习过来的，发现自己写的很多轮播的思路都不一样了。这次写出的下一次也许就写不出来了，或者说是用更好的方式来实现了。下面一起来总结下都...
2019-10-16 15:43:45
747
原创 ES6：箭头函数
了解箭头函数：出现的作用除了让函数的书写变得很简洁，可读性很好外；最大的优点是解决了this执行环境所造成的一些问题。比如：解决了匿名函数this指向的问题（匿名函数的执行环境具有全局性），包括setTimeout和setInterval中使用this所造成的问题。我们常见的window属性和方法有alter，document，parseInt，setTimeout，setInterval，...
2019-10-15 14:51:40
191
原创 ES6：模板字符串
内容转载自阮一峰老师的es6入门1.基本用法传统的JavaScript语言，输出模板通常是这样写的。$('#result').append( 'There are <b>' + basket.count + '</b> ' + 'items in your basket, ' + '<em>' + basket.onSale + '<...
2019-10-15 10:12:01
109
转载 深入Vuex的Actions
1.什么是actions？背景：在mutation中我们讲到，mutation中是存放处理数据的方法的集合，我们使用的时候需要commit。但是commit是同步函数，而且只能是同步执行。那我们想一步操作怎么办？作用：在actions中提交mutation，并且可以包含任何的异步操作。actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异...
2019-10-14 15:59:21
181
原创 深入Vuex的getters
1.什么是getters在介绍state中我们了解到，在Store仓库里，state就是用来存放数据，若是对数据进行处理输出，比如数据要过滤，一般我们可以写到computed中。但是如果很多组件都使用这个过滤后的数据，比如饼状图组件和曲线图组件，我们是否可以把这个数据抽提出来共享？这就是getters存在的意义。我们可以认为，【getters】是store的计算属性。２.如何使用定义：我们...
2019-10-14 15:52:44
270
原创 深入Vuex的state
理解state1.什么是state？Vuex就是提供一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data（后面讲到的actions和mutations对应于methods）。响应式存储：state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新。（这里“状态”=“数据”...
2019-10-14 15:34:20
189
原创 Vue案例之拖拽
Vue拖拽HTML<div id="box"> HTML 位置 <br>x:{{val.x}} <br>y:{{val.y}} <div v-drag="greet" id="drag" :style="style"&g...
2019-10-14 15:29:17
110
原创 ES6 计算属性名
语法应用JavaScript语言定义对象的属性，有两种方法。// 方法一obj.foo = true;// 方法二obj['a' + 'bc'] = 123;上面代码的方法一是直接用标识符作为属性名，方法二是用表达式作为属性名，这时要将表达式放在方括号之内。ES6 允许字面量定义对象时，用方法二（表达式）作为对象的属性名，即把表达式放在方括号内。let propKey = 'f...
2019-10-14 15:15:40
733
转载 深入Vuex的Mutations
理解Mutations什么是mutations？上一篇文章说的getters是为了初步获取和简单处理state里面的数据(这里的简单处理不能改变state里面的数据)，Vue的视图是由数据驱动的，也就是说state里面的数据是动态变化的，那么怎么改变呢，切记在Vuex中store数据改变的唯一方法就是mutation！通俗的理解mutations,里面装着一些改变数据方法的集合，这是Veu...
2019-10-14 14:24:50
105
原创 Vue实例中生命周期
什么是生命周期Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的...
2019-10-12 14:56:13
136
原创 ES6利用解构来删除和过滤对象中部分属性
let student={ age: 18, name: 'kysue', sex: "男" } // func1: const param = (({name,sex}) => ({name, sex}))(student) console.log(param) // {name: "kysue...
2019-10-11 15:10:26
3892
1
转载 2019下半年，该用用grid网格布局了！
前言现在我们大家在实际的开发中，可能用的最多的就是flex布局，当然还有浮动和定位，除此之外，这两年一直听到网格布局是趋势，即grid布局，但是项目中没有太多的应用，所以特此总结一下，希望对大家也对我自己有帮助。给大家一个直接的效果体验一下：网格布局：就是一个容器内部由一个个的项目组成，是一个二维布局，接下来，我们就会围绕 容器 和项目 来介绍网格布局，目录容器属性grid ...
2019-10-11 14:37:10
987
原创 详解js中的confirm方法；join和split方法；splice方法；sort方法
今天看到项目中一些不熟悉的方法，在此总结一下使用方法confirm()confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用 confirm() 时，将暂停对 J...
2019-10-10 16:16:11
388
转载 cnpm install 安装依赖出现 Install fail! Error: EBUSY: resource busy or locked, symlink...问题
原创 cnpm install 安装依赖出现 Install fail! Error: EBUSY: resource busy or locked, symlink...问题 npm insta...
2019-10-09 11:26:04
863
转载 vue-element Form表单验证踩坑（表单验证明明有值，却提示错误）
vue-element Form表单验证踩坑（表单验证明明有值，却提示错误）在使用element-UI 的表单时，发生一个验证错误，错误图片先贴出来输入有值，但报错代码如下所示：原绑定rules规则绑定都是没有错误的，然后我们利用自定义校验规则验证使用官网给出的这种形式，将value值打印出来，发现并不能获取到input中的值，显示undefine...
2019-10-09 11:21:34
7519
1
原创 vue 项目使用vue-i18n报错----爬坑
项目中使用vue-i18n ，报了一堆这种错 vue-i18n.esm.js:14 [vue-i18n] Cannot translate the value of keypath 'xxx'. Use the value of keypath as default.可以在lang文件夹下的index.js文件下，在创建 i1...
2019-10-09 11:16:45
2260
转载 用 async/await 来处理异步
用 async/await 来处理异步昨天看了一篇vue的教程，作者用async/ await来发送异步请求，从服务端获取数据，代码很简洁，同时async/await 已经被标准化，是时候学习一下了。先说一下async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async 函数...
2019-09-29 17:13:11
87
转载 ES6：Promise和Async/Await用法整理
Promise和Async/Await用法整理22018.01.24 21:50:25字数 1184阅读 23119[详情：](https://www.jianshu.com/p/fe0159f8beb4)1.Promise1.简介Promise,简单来说就是一个容器，里面保存着某个未来才会结束的时间(通常是一个异步操作的结果)Promise对象的基本语法：new Promise((r...
2019-09-29 14:48:51
127
转载 npm报错：A complete log of this run can be fund in: C\Users\用户\AppData\Roaming\npm-cache_logs\解决方案
.因项目中安装模块，多次不成功，所以导致报错。A complete log of this run can be fund in: C\Users\用户\AppData\Roaming\npm-cache_logs\2018-9-24T10_55_24_806Z-debug.log报错截图：解决方法一：这时你需要清理缓存了。1.注：将node_modules文件夹先删除2.清理缓存...
2019-09-27 16:09:23
2022
原创 uni-app 交互反馈
uni.showModal(OBJECT)显示模态弹窗，类似于标准 html 的消息框：alert、confirm。success返回参数说明uni.showModal({ title: '提示', content: '这是一个模态弹窗', success: function (res) { if (res.confirm) { ...
2019-09-24 17:36:38
802
原创 学习uni-app的第一天
form示例<template> <view> <view> <form @submit="formSubmit" @reset="formReset"> <view class="uni-form-item uni-column"> ...
2019-09-24 16:40:48
110
转载 JavaScript中0.1 + 0.2真的等于0.3吗
写在前面随着消费观念的改变，线上消费已经成为大众生活中不可或缺的一部分。在保证消费安全和用户隐私的同时，精准度也是必不可少的一环。试想一下，用户在一款产品上消费，结算金额出错，用户会怎么想？（数体教 or WTF？)，妥妥的差评了吧。 这样不要说用户粘性了，留存都是问题。当Boss得知用户的遭遇后，估计贡献代码的同志会成为前员工或者大家口中的已故员工某某某。作为一个优秀(laji)的程序员，好久...
2019-09-21 23:41:38
207
原创 前端面试：假设高度一定，请写出三栏布局，左右宽度300px，中间自适应。
前端常问的面试题，题目：假设高度一定，请写出三栏布局，左右宽度300px，中间自适应。看到这里我希望你能停下来思考几分钟，好了，那么你想出了几种答案呢？下面提供这道题的五种解决方案：首先要写好整个页面的布局（初始化等） <style> html * { padding: 0; margin: 0; ...
2019-09-21 23:33:00
287
原创 原生ajax的请求过程
原生ajax的请求过程创建全平台兼容的XMLHttpRequest对象：?123456789101112function getXHR(){ var xhr = null; if(window.XMLHttpRequest) {// 兼容 IE7+, Firefox, Chrome, Opera, Safari &nb...
2019-09-21 11:59:27
245
原创 Vue 做项目的经验
Vue 做项目经验首先需要知道最基本的东西是：Vue 项目打包：npm run buildVue生成在网页上看的端口：npm run dev修改端口号的地方在： config文件夹下index.js文件port改变首页面在main.jsconst routes = [{ path: '/', component: gnlb} 大...
2019-09-21 11:56:55
169
转载 跨域几种方式
跨域几种方式一、什么是跨域 JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。那什么是跨域呢，简单地理解就是因为JavaScript同源策略的限制， a.com 域名下的js无法操作 b.com或是 c.a.com 域名下的对象。当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域...
2019-09-21 11:54:26
73
转载 JS中常用开发知识点
JS中常用开发知识点1、获取指定范围内的随机数2、随机获取数组中的元素3、生成从0到指定值的数字数组等同于：4、打乱数字数组的顺序5、对象转换为数组//注意对象必须是以下格式的才可以通过此方式转化为数组//获取的DOM集合，以及函数的arguments也可以通过此方式转化为数组6、验证是否为数组7、获取数组中最大或者最小值8...
2019-09-21 11:42:00
72
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人