Vue
关注
分享
扫一扫
Dreamer_xr
这个作者很懒，什么都没留下…
展开
-
解决element table表头错位的问题
因为加了boder属性，所以表格会稍有错位解决办法：全局加上display: table-cell !important;属性，覆盖源码/* 解决element table加boder后表格错位不对称情况 */.el-table th.gutter{ display: table-cell !important;}...原创 2019-10-25 10:43:45 · 1004 阅读 · 0 评论 -
H5开发踩坑记录（总有你用的到的，持续更新）
一、url转码，url传值得时候中文会被转义，通过 decodeURIComponent（ ） 进行转码this.url = decodeURIComponent(item.split('=')[1])编码的话用encodeURI( )son.name = encodeURI(infoJson.name)二、H5页面在ios中滑动不流畅问题，可以通过css进行解决，兼容safa...原创 2019-04-28 00:28:41 · 471 阅读 · 2 评论 -
微信公众号H5开发登录授权流程
很久没写博客了，最近实在是太忙，有太多东西想写想记录。今天写个关于微信登录的过程吧，这次项目是我第一次写关于微信的东西，这个登录授权搞了半天。但总算是把流程搞明白了，先附上微信官方文档微信公众平台 网页开发授权我总结来说流程是这样的：1、进入首页，去打开微信授权地址，微信会告诉后端，是哪个用户请求授权的（后修改，直接让公众号去打开，而不是进到首页再去打开，这样会省去一步操作，开始的时候...原创 2019-03-23 11:41:25 · 22270 阅读 · 3 评论 -
vue移动端转rem，px2rem-loader使用方法
可以自动转rem1、下载lib-flexiblenpm i lib-flexible --save2、main.js中添加import 'lib-flexible/flexible'3、安装px2rem-loader"px2rem-loader": "^0.1.9",npm install px2rem-loader --save在build文件下的utils....原创 2019-02-21 16:32:53 · 2902 阅读 · 6 评论 -
vue使用google地图（三）在地图上使用drawingManager绘图，并获取坐标
先放需求图我这个需求是先通过接口获取已有区域，也就是红色框框的区域，通过坐标进行绘图，下面是我拿到的数据格式有个重要的一点，画图的坐标，第一个点一定要和最后一个点是相同的坐标，否则就会出错。//显示区域 drawArea(list) { // console.clear() for (let e in list) { ...原创 2019-01-24 15:14:10 · 4826 阅读 · 1 评论 -
报错解决：Error in callback for watcher "endVal": "TypeError: this.demo.update is not a function"
在使用ivew的时候报错Error in callback for watcher "endVal": "TypeError: this.demo.update is not a function"全局搜索找到 this.demo.update的位置，锁定countUp.vue在这里mounted钩子中加了定时器，延时创建demo对象，导致监听this.demo.update的时候...原创 2019-01-14 10:21:31 · 20552 阅读 · 3 评论 -
elementUI Cascader 级联选择器获取数据信息
官方API： http://element-cn.eleme.io/#/zh-CN/component/cascader <el-cascader :options="goodsOptions" v-model="selectedOptions" @change="handleChange()" :props="defaultData" size="mini" style="wi原创 2019-01-10 18:18:43 · 27455 阅读 · 2 评论 -
vue使用google地图（二）实现标记实时运动（基于websocket）
最近外卖项目，需要实现一些地图的功能，前几天写了一个关于marker 和 InfoWindow、自定义label的文章，只是简单地例子。详情点击vue中使用google地图（自定义label、信息窗口）有不懂的欢迎留言，我每天都上博客，一定及时回复大家，如有不足希望批评指正。那么，今天在这里写一个曾经我可望而不可即的功能，外卖骑手实时在地图上运动。具体需求是点击按钮创建弹窗，并且创建地图与...原创 2018-12-29 20:50:43 · 3042 阅读 · 1 评论 -
vue中使用google地图（自定义label、信息窗口）
最近公司爱尔兰项目需要使用google地图，项目还是用vue写的，那我就寻思找个vue能用的google地图的插件吧，找了vue2-google-maps，这个插件确实还行，而且github上还有api文档，虽然都是英文很难受，但是还行，没有骚需求的话，用它还行。 google地图里面有个功能，label，vue2-google-maps里面是没有办法控制label的位置的，默...原创 2018-12-06 22:14:05 · 11257 阅读 · 8 评论 -
vue axios获取状态码（success，error）
项目中遇到个小需求，当页面半个小时内无任何操作的时候，token自动失效，毫无疑问是要跳到登录页的，token失效后后端给我的状态码是412，那么好，这个412我就是获取不到，给中console.log就是打印不出我想要的status，最终还是找到了我想要的。 获取状态有两种写法：这里的api为配置的api文件，在main.js中引入，我的配置方法链接在这axios的API配置文...原创 2018-11-21 14:23:02 · 21780 阅读 · 1 评论 -
H5于原生APP交互封装（这里用vue，其他同理）
最近项目要求APP中要嵌套H5的页面。首先，创建两个JS文件，便于区分管理1、DeviceType.js用于判断环境是Android还是IOSexport const DeviceType=(()=>{ var u = navigator.userAgent; if (u.match(/Android/i) != null) { return "...原创 2019-05-10 16:58:09 · 2959 阅读 · 0 评论 -
微信公众号自定义分享（vue）
先附上微信公众平台，官网介绍的很详细，https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115微信公众号右上角自定义分享功能主要就三步：1、先引入JS文件<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweix...原创 2019-04-24 16:00:59 · 2456 阅读 · 0 评论 -
前端get方式下载文件
一般下载方式都是用get去请求，通过动态创建a标签的形式去完成下载，给a标签设置download属性。并且要声明传递blob格式responseType: 'blob',getHeader（）为我设置请求头信息的方法import CryptoJS from 'crypto-js' getHeader(apiUrl) { this.jurisd...原创 2019-06-05 17:07:50 · 11980 阅读 · 0 评论 -
Vue面试题之（三）watch和computed的区别
computed：computed是计算属性，依赖其他的属性值，并且computed的属性值有缓存属性，当属性值变化的时候，下一次获取computed属性的时候才会重新计算computed的值。watch:更多的是一种观察的作用，用于监听某些数据的回调。每当所监听的数据发生变化时才能执行回调处理后续操作。运用场景： 当我们需要进行数值计算，并且依赖于其它数据时，应该使用 co...原创 2019-10-09 10:00:33 · 2098 阅读 · 0 评论 -
Vue面试题之（二）怎样理解 Vue 的单向数据流？
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。1、v-model 用在 input 元素上v-model在使用的时候很像双向绑定的（实际上也是。。。），但是 Vue 是单项数据流，v-model 只是语法糖而已：<i...原创 2019-09-29 18:14:33 · 2825 阅读 · 0 评论 -
Vue面试题之（一）说说你对 SPA 单页面的理解
说说你对 SPA 单页面的理解、，它的优缺点分别是什么？SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。优点：用户体验好、快，内容...原创 2019-09-29 18:05:44 · 1353 阅读 · 1 评论 -
解决vue项目中的“Invalid Host header”
微信公众号项目，在服务器上测试，打开项目浏览器报错Invalid Host header，项目为vue-cli 2.x修改webpack.dev.conf.js，在devServer对中加入disableHostCheck: true,属性devServer: { disableHostCheck: true,}...原创 2019-08-22 09:36:27 · 2047 阅读 · 0 评论 -
Vue还原data中初始化的数据
核心代码：console.log(this.$data)console.log(this.$options.data())Object.assign(this.$data, this.$options.data())打印可以看出this.$data包含现有的data数据，this.$options.data()中是原有的data数据例：这里我想清空form对象中的数...原创 2019-07-24 15:04:18 · 13652 阅读 · 3 评论 -
Vue组件通信（非父子通信之Bus）
我的上一篇关于vue组件通信的文章链接戳这里 => vue组件通信，点击传值，动态传值（父传子，子传父）今天要说的是非父子通信方式，这种跨组件的通信方式，可以通过Bus的形式进行处理。在Vue 2.x 推荐使用 个空的 Vue 实例作为中央 件总线（ bus ），也就是 相当于一个中介。比如你需要租房子 你可能会找房产中介来登记你的需求 然后中介把你的信息发给满足要求的出租者...原创 2019-07-18 15:41:53 · 1645 阅读 · 0 评论 -
vue 替换换行符为p标签
效果图需要把换行符替换成p标签，方便首行缩进。主要方法使用正则进行转义 this.articleData = '<p>' + content.replace(/\n*$/g, '').replace(/\n/g, '</p> <p>') + '</p>'代码示例：<template><main>...原创 2019-06-18 18:35:19 · 6685 阅读 · 0 评论 -
vue项目兼容android低版本、兼容IE、ES6解决办法
VUE项目兼容性处理，主要原因还是不兼容ES6。oppo和vivo等低版本浏览器不支持es6写法，所以需要对es6转es5的操作。IE浏览器没有内置Promise对象。不仅如此，几乎所有的ES6新增的方法在IE都不能用，此时你需要babel Polyfill一、需要下载几个包npm install babel-polyfill --savenpm install es6-pro...原创 2019-06-10 15:27:49 · 9514 阅读 · 0 评论 -
vue解决刷新页面vuex数据、params参数消失的问题（params传递多个参数）
一般项目都会有一些逻辑需要传递值给另一个页面，那么有的时候就会出现一个问题：用户刷新了页面，诶？数据没了，参数错误。那么今天经过总结，解决了这个问题。我在最新的项目中，通过了一下几种情况进行传值：1、通过路由传值，params或query2、通过vuex进行状态管理 $store.state...3、使用localStorage进行传值那么，关于刷新页面数据消失原因有两种，一是通过...原创 2018-11-20 16:00:53 · 23626 阅读 · 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 · 34139 阅读 · 17 评论 -
vue全家桶之（二）Vue版TodoList心得
就是类似于这种，很多前端萌新都做过TodoList，这是必须经历的过程。由于我也是刚刚学习vue不久，所以在这里记录一下使用vue框架制作TodoList效果一、增加列表项拿到一个项目，1. 首先，要先分析组件，拆分组件，要清晰2. 完成静态组件搭建，拆分好页面和样式3. 动态组件，初始化显示，实现交互 引入组件三步操作，这里就不详细说了，1.import...原创 2018-07-09 19:27:54 · 2703 阅读 · 1 评论 -
Vue中时间获取
昨晚出了个bug，页面崩溃！我真是找bug找了将近一天，而且电脑卡了一整天，页面也崩溃了一整天，运行一会儿就崩了，到最后我发现，在任务管理器中Chrome浏览器占得内存都出现了几十万k，我真是找不出代码哪里有原因，最后只能一个组件一个组件的排查，当我把第一个时间组件先注释之后，内存立马被放空，**，原来是你！（这个组件同事写过了，说可以用，我也没咋看），最后发现似乎是个死循环？有大佬的话，...原创 2018-07-11 19:03:32 · 12584 阅读 · 4 评论 -
vue全家桶之（三）Vue--router浅谈与应用
对于我这个前端萌新来说，对vue-router的理解并不深，在这里把学到的东西和自己的见解分享出来，请各位大佬多多指教。一、首先，什么是路由 路由其实就是一种指向，比如说我点击屏幕的home按钮，那么进入的就是home页面，点击的是search按钮，那么进入的就是search页面，也可以说是一种映射关系，也可以说是导航的应用，十分类似。二、路由的三个基本概念 route、rout...原创 2018-07-15 09:39:48 · 849 阅读 · 0 评论 -
关于vue中v-if与v-show的区别
（优快云是更新了吗？怎么感觉变了。） 最近打算换个工作，各种原因，其实还是想多学一点东西，年轻人嘛，对知识有渴望！在这里分析一波在vue中v-if与v-show的区别，其实个人觉得v-if与v-show的用法是差不多的，没什么可纠结的，但是最近面试被问到了，还是有点懵的，感觉回答的不好，所以觉得有必要在这里总结一波。相同点：v-if与v-show都是可以动态控制DOM元素显示隐藏的。...原创 2018-07-18 23:46:14 · 373 阅读 · 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 · 530 阅读 · 0 评论 -
vue项目实战中的增、删、改、查
现在公司项目是做的后台管理系统，那么无疑要用到增、删、改、查。其实实战里的增删改查都要调用接口，传递参数，而很多的dom操作都反而不需要了。vue有个很关键的词对增删改查很重要，叫做双向数据绑定。因为你需要不断的传参，传值，接收id，原生DOM的操作能不用就不用，耗性能，还麻烦。以下是个人学习记录，大佬批评指正。第一：首先来说一说 增，话不多说，上代码。下面为增、删、改页面效果下...原创 2018-08-14 14:36:41 · 44288 阅读 · 37 评论 -
vue短信验证码倒计时
我也不知道关于前端的短信验证码有什么插件、模板之类的，项目需求，就搞了一个，注释已标，再调用接口的话就自己处理吧。直接上代码<template> <div> <button v-show="Verification" @click="handleClick">点击获取验证码</button> <button原创 2018-08-16 22:48:18 · 3894 阅读 · 2 评论 -
Vue中添加针对window的键盘事件该怎么处理
因为在项目中使用了UI库，没有直接的input标签（最终渲染到html上的话，input标签外还有一层div） <b-input type="password" v-model="credentials.password" />所以键盘事件获取不到焦点，在登录页面我想加个键盘enter的全局事件，想提高一点用户体验，于是考虑采用针对window的键盘事件，那么在这个过程中遇到...原创 2018-09-15 16:14:00 · 3277 阅读 · 3 评论 -
element-ui中弹框dialog不显示的问题
今日遇一小坑，使用elementUI的时候，项目中需要做一个换头像的功能，因为项目结构原因，我写了一个组件，点击头像出现弹框，并且可以上传头像，但是遇到一个问题，在作为组件的时候，弹框只显示弹层但是不显示框，仔细查看了文档，发现有个关键属性append-to-body，他默认是false，我们给他设置为true，写在<el-dialog>标签里。 <el-dialog ti...原创 2018-09-05 18:53:16 · 36931 阅读 · 14 评论 -
vue全家桶之（一）使用 vue-cli 创建模板项目
最近学习vue，学的我是头昏脑涨，作为一个前端萌新选手，前端大佬无疑是我现在的目标，那么脚踏实地，记录一点一滴，我觉得是我现在有必要做的，前几天公司做大屏，我被echarts搞的要眼瞎，但还好，都挺过来了，前几篇里介绍了echarts里面的圆环，个人觉得还是比较详细，还是有借鉴之处，都是自己走过的坑。 之前面试其他公司面试官问过我一个问题，react的运行环境怎么...原创 2018-07-08 21:09:12 · 2625 阅读 · 0 评论 -
Vue中使用本地json数据
项目中有有一个地区接口，服务器原因请求速度很慢很慢，于是考虑将地区接口的数据设置为本地的json文件。大大提升请求速度一、首先创建一个json文件，将数据放进去，一定要确保格式正确我的是这样的，把json文件放在static文件夹下， 二、像使用axios一样去调用json文件，因为我的axios配置的时候设置的是$ajax = axios...原创 2018-09-06 18:35:24 · 9224 阅读 · 4 评论 -
vue项目打包之后页面空白解决办法
之前项目遇到个情况，npm run build打包之后上传到服务器后，index.html打开一片空白，资源都加载了，但是就是不显示。然后百度找了原因，修改了两处地方一、修改 assetsPublicPath 在config/index.js里面，有个 assetsPublicPath 属性，源码是‘/’，修改成‘./’，加个点assetsPublicPath: '/',二、...原创 2018-11-05 17:08:08 · 6684 阅读 · 1 评论 -
vue组件通信，点击传值，动态传值（父传子，子传父）
vue说到组件通信，无非是父组件传子组件，子组件传父组件，跨级组件传值，同级组件传值，个人觉得，除了父子组件的传值，其余情况就可以用vuex来解决了，这篇先不说vuex，这里介绍父子组件传值。不会你打我！一、父组件传子组件，核心--props下面是场景，点击传值给子组件在这里触发 handleClick 点击事件，额外声明一个clickData，点击按钮将 inpMessage 的...原创 2018-10-23 11:56:40 · 28296 阅读 · 5 评论 -
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 · 4640 阅读 · 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 · 9017 阅读 · 13 评论 -
基于vue的图片裁剪插件vue-cropper
我在网上找了很多关于vue裁剪图片的文章，demo都太长了，实在是太长了。有些还都看不懂，最后还是用了个大佬的demo，但是项目实践过程中还是有问题没解决。先介绍吧。效果是下面这样的，我这里采用了4:3的固定比例进行裁剪，裁剪后的效果但是裁剪后的图片路径是base64，超级长的路径，最终还是需要处理地址传给后端的，项目用oss处理图片，最终获得一个类似于aad68a8fd57746...原创 2018-09-28 10:30:46 · 33564 阅读 · 11 评论 -
使用elementUI进行分页处理
分页是数据管理必备的功能，是这样一种操作：每一组数据是一页，当点击下一页的时候去请求下一页的接口，后端会传一个当前页的值给你，比如pageNum，不会让前端取出所有数据然后进行分页的，那样数据多了会很慢很慢，后端会把数据进行分页处理，前端只需要点击下一页或者页数去请求接口，那么我这里是基于ElementUI的分页，结合图片的讲解。<template> <div ...原创 2018-10-11 09:48:55 · 8196 阅读 · 0 评论