vue2.0进阶笔记
记录前端生涯的点点滴滴
Dreamer_xr
这个作者很懒,什么都没留下…
展开
-
vue axios获取状态码(success,error)
项目中遇到个小需求,当页面半个小时内无任何操作的时候,token自动失效,毫无疑问是要跳到登录页的,token失效后后端给我的状态码是412,那么好,这个412我就是获取不到,给中console.log就是打印不出我想要的status,最终还是找到了我想要的。 获取状态有两种写法:这里的api为配置的api文件,在main.js中引入,我的配置方法链接在这axios的API配置文...原创 2018-11-21 14:23:02 · 21650 阅读 · 1 评论 -
vue解决刷新页面vuex数据、params参数消失的问题(params传递多个参数)
一般项目都会有一些逻辑需要传递值给另一个页面,那么有的时候就会出现一个问题:用户刷新了页面,诶?数据没了,参数错误。那么今天经过总结,解决了这个问题。我在最新的项目中,通过了一下几种情况进行传值:1、通过路由传值,params或query2、通过vuex进行状态管理 $store.state...3、使用localStorage进行传值那么,关于刷新页面数据消失原因有两种,一是通过...原创 2018-11-20 16:00:53 · 23526 阅读 · 23 评论 -
vue-baidu-map vue项目中使用百度地图(搜索,信息窗口,获取地点详细信息)
最近做了一个垃圾分类的项目,要求使用百度地图。主要实现以下几个功能:1、点击地图获取到经纬度和地点信息2、点击地图实时显示信息窗口3、区域搜索功能,具体功能就是如下图 ↓两个api网址,一个vue-baidu-map的api,一个JavaScript的百度地图apivue-baidu-map:https://dafrok.github.io/vue-baidu-map/#/...原创 2018-11-15 18:45:25 · 33912 阅读 · 17 评论 -
vue项目打包之后页面空白解决办法
之前项目遇到个情况,npm run build打包之后上传到服务器后,index.html打开一片空白,资源都加载了,但是就是不显示。然后百度找了原因,修改了两处地方一、修改 assetsPublicPath 在config/index.js里面,有个 assetsPublicPath 属性,源码是‘/’,修改成‘./’,加个点assetsPublicPath: '/',二、...原创 2018-11-05 17:08:08 · 6596 阅读 · 1 评论 -
vue组件通信,点击传值,动态传值(父传子,子传父)
vue说到组件通信,无非是父组件传子组件,子组件传父组件,跨级组件传值,同级组件传值,个人觉得,除了父子组件的传值,其余情况就可以用vuex来解决了,这篇先不说vuex,这里介绍父子组件传值。不会你打我!一、父组件传子组件,核心--props下面是场景,点击传值给子组件在这里触发 handleClick 点击事件,额外声明一个clickData,点击按钮将 inpMessage 的...原创 2018-10-23 11:56:40 · 27815 阅读 · 5 评论 -
使用elementUI进行分页处理
分页是数据管理必备的功能,是这样一种操作:每一组数据是一页,当点击下一页的时候去请求下一页的接口,后端会传一个当前页的值给你,比如pageNum,不会让前端取出所有数据然后进行分页的,那样数据多了会很慢很慢,后端会把数据进行分页处理,前端只需要点击下一页或者页数去请求接口,那么我这里是基于ElementUI的分页,结合图片的讲解。<template> <div ...原创 2018-10-11 09:48:55 · 8134 阅读 · 0 评论 -
vue-image-crop-upload图片上传裁剪功能
安装npm install vue-image-crop-upload组件代码:<template> <div id="app"> <a class="btn" @click="toggleShow">设置头像</a> <my-upload field="img" @c原创 2018-10-19 16:40:44 · 4597 阅读 · 1 评论 -
前端实现AWS s3亚马逊云储存上传资源
话不多说,上代码!效果为点击图片上传!不好用你找我<template> <div> <div style="width: 102px;height: 102px;border-radius: 50%;border:1px solid #CCC" @click="section()"> //动态图片路径 <img...原创 2018-10-08 18:49:52 · 8849 阅读 · 13 评论 -
基于vue的图片裁剪插件vue-cropper
我在网上找了很多关于vue裁剪图片的文章,demo都太长了,实在是太长了。有些还都看不懂,最后还是用了个大佬的demo,但是项目实践过程中还是有问题没解决。先介绍吧。效果是下面这样的,我这里采用了4:3的固定比例进行裁剪,裁剪后的效果但是裁剪后的图片路径是base64,超级长的路径,最终还是需要处理地址传给后端的,项目用oss处理图片,最终获得一个类似于aad68a8fd57746...原创 2018-09-28 10:30:46 · 33461 阅读 · 11 评论 -
vue中使用vue-quill-editor富文本编辑器
一、npm下载vue-quill-editornpm install vue-quill-editor --save二、在main.js中引入import VueQuillEditor from 'vue-quill-editor'import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'impor...原创 2018-09-25 15:50:12 · 2548 阅读 · 0 评论 -
Vue中添加针对window的键盘事件该怎么处理
因为在项目中使用了UI库,没有直接的input标签(最终渲染到html上的话,input标签外还有一层div) <b-input type="password" v-model="credentials.password" />所以键盘事件获取不到焦点,在登录页面我想加个键盘enter的全局事件,想提高一点用户体验,于是考虑采用针对window的键盘事件,那么在这个过程中遇到...原创 2018-09-15 16:14:00 · 3239 阅读 · 3 评论 -
Vue中时间获取
昨晚出了个bug,页面崩溃!我真是找bug找了将近一天,而且电脑卡了一整天,页面也崩溃了一整天,运行一会儿就崩了,到最后我发现,在任务管理器中Chrome浏览器占得内存都出现了几十万k,我真是找不出代码哪里有原因,最后只能一个组件一个组件的排查,当我把第一个时间组件先注释之后,内存立马被放空,**,原来是你!(这个组件同事写过了,说可以用,我也没咋看),最后发现似乎是个死循环?有大佬的话,...原创 2018-07-11 19:03:32 · 12532 阅读 · 4 评论 -
关于vue中v-if与v-show的区别
(CSDN是更新了吗?怎么感觉变了。) 最近打算换个工作,各种原因,其实还是想多学一点东西,年轻人嘛,对知识有渴望!在这里分析一波在vue中v-if与v-show的区别,其实个人觉得v-if与v-show的用法是差不多的,没什么可纠结的,但是最近面试被问到了,还是有点懵的,感觉回答的不好,所以觉得有必要在这里总结一波。相同点:v-if与v-show都是可以动态控制DOM元素显示隐藏的。...原创 2018-07-18 23:46:14 · 350 阅读 · 0 评论 -
Vue Devtools的安装
在使用 Vue 时,我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。在这里直接推荐通过git配合github下载打包,一共就5步,简单易操作第一步:使用git克隆github上的工具地址。git clone https://github.com/vuejs/vue-devtools.git第二步:使用命令行CMD,通过...原创 2018-08-06 14:55:36 · 498 阅读 · 0 评论 -
vue短信验证码倒计时
我也不知道关于前端的短信验证码有什么插件、模板之类的,项目需求,就搞了一个,注释已标,再调用接口的话就自己处理吧。直接上代码<template> <div> <button v-show="Verification" @click="handleClick">点击获取验证码</button> <button原创 2018-08-16 22:48:18 · 3871 阅读 · 2 评论 -
element-ui中弹框dialog不显示的问题
今日遇一小坑,使用elementUI的时候,项目中需要做一个换头像的功能,因为项目结构原因,我写了一个组件,点击头像出现弹框,并且可以上传头像,但是遇到一个问题,在作为组件的时候,弹框只显示弹层但是不显示框,仔细查看了文档,发现有个关键属性append-to-body,他默认是false,我们给他设置为true,写在<el-dialog>标签里。 <el-dialog ti...原创 2018-09-05 18:53:16 · 36694 阅读 · 14 评论 -
vue axios的api文件配置
不多废话,上代码!需要配置如下两个文件,api.js需要新建自行配置。api.jsimport Vue from 'vue'import axios from 'axios'import CryptoJS from 'crypto-js' //加密Vue.prototype.$ajax = axios;axios.defaults.baseURL = 'http://...原创 2018-09-15 11:53:27 · 3249 阅读 · 0 评论 -
JS获取本月的第一天和最后一天
获取本月的第一天和最后一天的时间,要求格式为2018-09-06,这里用了momentJS(官网链接)项目是vue写的,注意引入let moment = require('moment');下面为具体代码,firstDay为第一天,lastDay为本月最后一天//获取当前时间let date=new Date();//获取当前月的第一天 let monthStar...原创 2018-09-06 13:44:52 · 7578 阅读 · 0 评论 -
关于Invalid prop: type check failed for prop "row". Expected String, got Object.的问题及审查办法
项目是Vue的,基于elementUI的后台管理系统。Invalid prop: type check failed for prop "row". Expected String, got Object.昨天遇到了这么个错误,找了半天,网上也找了很久的资料,有很多跟我遇到的问题类似的有很多,但解决办法形似各样,没有我这种情况的,但还好经过我的不懈努力还是找到了原因。一、我从父组件传递...原创 2018-09-13 10:29:11 · 150191 阅读 · 5 评论 -
vue全家桶之(一)使用 vue-cli 创建模板项目
最近学习vue,学的我是头昏脑涨,作为一个前端萌新选手,前端大佬无疑是我现在的目标,那么脚踏实地,记录一点一滴,我觉得是我现在有必要做的,前几天公司做大屏,我被echarts搞的要眼瞎,但还好,都挺过来了,前几篇里介绍了echarts里面的圆环,个人觉得还是比较详细,还是有借鉴之处,都是自己走过的坑。 之前面试其他公司面试官问过我一个问题,react的运行环境怎么...原创 2018-07-08 21:09:12 · 2599 阅读 · 0 评论 -
vue全家桶之(二)Vue版TodoList心得
就是类似于这种,很多前端萌新都做过TodoList,这是必须经历的过程。由于我也是刚刚学习vue不久,所以在这里记录一下使用vue框架制作TodoList效果一、增加列表项拿到一个项目,1. 首先,要先分析组件,拆分组件,要清晰2. 完成静态组件搭建,拆分好页面和样式3. 动态组件,初始化显示,实现交互 引入组件三步操作,这里就不详细说了,1.import...原创 2018-07-09 19:27:54 · 2664 阅读 · 1 评论 -
Vue中使用本地json数据
项目中有有一个地区接口,服务器原因请求速度很慢很慢,于是考虑将地区接口的数据设置为本地的json文件。大大提升请求速度一、首先创建一个json文件,将数据放进去,一定要确保格式正确我的是这样的,把json文件放在static文件夹下, 二、像使用axios一样去调用json文件,因为我的axios配置的时候设置的是$ajax = axios...原创 2018-09-06 18:35:24 · 9180 阅读 · 4 评论 -
vue全家桶之(三)Vue--router浅谈与应用
对于我这个前端萌新来说,对vue-router的理解并不深,在这里把学到的东西和自己的见解分享出来,请各位大佬多多指教。一、首先,什么是路由 路由其实就是一种指向,比如说我点击屏幕的home按钮,那么进入的就是home页面,点击的是search按钮,那么进入的就是search页面,也可以说是一种映射关系,也可以说是导航的应用,十分类似。二、路由的三个基本概念 route、rout...原创 2018-07-15 09:39:48 · 816 阅读 · 0 评论 -
vue项目实战中的增、删、改、查
现在公司项目是做的后台管理系统,那么无疑要用到增、删、改、查。其实实战里的增删改查都要调用接口,传递参数,而很多的dom操作都反而不需要了。vue有个很关键的词对增删改查很重要,叫做双向数据绑定。因为你需要不断的传参,传值,接收id,原生DOM的操作能不用就不用,耗性能,还麻烦。以下是个人学习记录,大佬批评指正。第一:首先来说一说 增,话不多说,上代码。下面为增、删、改页面效果下...原创 2018-08-14 14:36:41 · 44014 阅读 · 37 评论