vue
强哥叨逼叨
微信公众号:强哥叨逼叨
展开
-
vue-devtools chrome 开发工具安装
1.github下载地址:https://github.com/vuejs/vue-devtools有Git的同学直接 git clone https://github.com/vuejs/vue-devtools2.下载安成之后打开cmd进入vue-devtools文件夹把依赖装好npm install 之后再进行npm run build最好装一个cnpm3.然转载 2017-10-31 16:47:42 · 721 阅读 · 0 评论 -
vue iview多张图片大图预览(可缩放翻转)
先看效果:关注文末公众号,后台回复:"图片预览"。 下载源码哦~具体代码如下:<style lang="less">@import "../advanced-router.less";</style><template> <div class="balance-accounts"> <Ro...原创 2018-07-05 10:47:47 · 12803 阅读 · 5 评论 -
vue iview 选择省市区填写地址实现地图定位
效果如下:好的,看看具体的实现代码:高德地图导入vue我就不在这里写了,参考之前的博客:点击打开链接区域选择部分:<FormItem label="选择区域" style="width: 45%;" prop="areaTemp"> <!-- <fa-cascader ref="cascaderAddress" v-model="a原创 2018-07-05 11:38:22 · 6513 阅读 · 4 评论 -
jq穿梭框实现,vue等框架可直接使用
先看效果:接着是实现:<style lang="less"> @import './wm-transfer.less';</style><template> <div> <div class="select"> <div class="selec原创 2018-07-13 10:40:27 · 4344 阅读 · 0 评论 -
vue 地址区域选择组件
项目中用到了地址区域选择,自己写了一个,效果如下:组件代码:<template> <div> <i-input @on-focus="areaFocus" @on-blur="areaBlur" placeholder="请选择地址" v-model="formObj[formPropNa.原创 2018-08-28 10:22:16 · 14686 阅读 · 6 评论 -
vue中使用axios请求接口,请求会发送两次
vue中使用axios请求接口,请求会发送两次的问题浏览器分为简单请求以及非简单请求:解决方案:跨域请求需要先发一次Option预请求,OPTIONS是检验是否允许跨域的,如果不希望OPTIONS请求, 直接让后端遇到option直接返回就可以了,前端可不做处理。 具体情况如下:写这篇文章时,我们碰到的一个场景是:要给R系统做一个扩展小应用,前端的html、js放在R系统里...转载 2018-10-12 14:56:06 · 20967 阅读 · 0 评论 -
iview table的render()函数基本的用法
这里记录的是iviewui框架中render函数的用法。如下:语法:render:(h,params)=>{}具体用法:render:(h,params) => { return h(" 定义的元素 ",{ 元素的性质 }," 元素的内容"/[元素的内容])}案例:当定义的元素没有其他元素时:render:(h,params)=>{ retu...转载 2019-02-15 11:09:34 · 12111 阅读 · 0 评论 -
Axios传参的两种方式,表单数据和json字符串(Form Data和Request Payload)
第一种方式:Form DataAxios参数配置:1、引入import Qs from 'qs'2、 return request({ headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }, transformRequest: [f...转载 2019-02-18 11:20:21 · 8288 阅读 · 2 评论 -
vue-cli3实现分环境打包步骤(给不同的环境配置相对应的打包命令)
本文转载自:https://www.cnblogs.com/XHappyness/p/9337229.html在vue-cli3的项目中,npm run serve时会把process.env.NODE_ENV设置为‘development’;npm run build 时会把process.env.NODE_ENV设置为‘production’;此时只要根据process.env...转载 2019-02-12 17:08:35 · 1876 阅读 · 0 评论 -
vue 引入第三方js报错undefined
今天在项目中使用到高德地图,在本地npm run dev运行起来没有问题,可是在打包发布到测试环境后,使用高德地图的界面就会报Amap undefined,按照自己原先的教程(vue2(webpack)调用amap高德地图及其UI组件和标记物)应该是没有问题的,其他项目也是这么用的,可是这次怎么不行了?然后F12打开刷新页面看了下,发现原来没有加载高德地图的js。额,可是为什么呢?之前的项目怎么就...原创 2018-06-19 23:26:09 · 7814 阅读 · 0 评论 -
vue组件之间的通信以及如何在父组件中调用子组件的方法和属性
在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据一、父组件利用props往子组件传输数据父组件:<div> <child v-bind:my-message="parentMsg"></child>//注意传递参数时要用—代替驼峰命名,HTML不区分大小写</div>子组件:V...转载 2018-06-15 14:31:43 · 1368 阅读 · 0 评论 -
基于vue-cli快速构建
本文转载自:http://www.jianshu.com/p/2769efeaa10aVue是近两年来比较火的一个前端框架(渐进式框架吧),与reactjs和angularjs三国鼎立,我不是职业前端,做过Vue,了解了一下React,听说过Angluar。我只能这么说,我来晚了,没经历所有。闲话少说进入正题。 Vue是什么,是一套构建用户界面的渐进式框架(官网解释),什么叫渐进式框架转载 2017-11-02 14:54:38 · 403 阅读 · 0 评论 -
分享:使用 webpack 的 require.context 实现路由“去中心化”管理
阅读须知:示例代码以 react-router V3 为例。其他路由同样适用,如:vue-router。同样其他的功能模块也可以用该思路进行相应的去中心化管理改造。本文示例代码一个项目中路由的变化过程当你在开发一个大型单页面应用的时候,项目之初一般做法是所有的路由规则都维护在一个route.js的文件里。// rootRoute.jsconst rootRoute =转载 2017-12-05 10:52:39 · 2709 阅读 · 0 评论 -
keep-alive的深入理解与使用(配合router-view缓存整个路由页面)
原文来自:http://blog.myweb.kim/vue/keep-alive/?utm-source=origin转载请注明出处。在搭建 vue 项目时,有某些组件没必要多次渲染,所以需要将组件在内存中进行‘持久化’,此时<keep-alive>便可以派上用场了。<keep-alive>可以使被包含的组件状态维持不变,即便是组件切换了,其内的状态依...转载 2018-01-25 17:27:12 · 8361 阅读 · 0 评论 -
vue.js 使用axios实现下载功能
本文主要来源于知乎一个回答,这里红色部分做了自己的处理,虽然自己的少,可是很有用的几句代码哦只好回答一下axios如何拦截get请求并下载文件的了。Ajax无法下载文件的原因浏览器的GET(frame、a)和POST(form)请求具有如下特点:response会交由浏览器处理 response内容可以为二进制文件、字符串等Ajax请求具有如下特点:response会交由J...原创 2018-01-04 21:32:09 · 27730 阅读 · 1 评论 -
vue2(webpack)调用amap高德地图及其UI组件和标记物
本文转载自:http://blog.csdn.net/yp090416/article/details/74900870?ref=myrecommend今天一个app项目中要使用vue2加入高德地图,本来以为有第三方的插件,结果没找到适合自己用的,因为地图这块,一般都是自定义程度比较高的。注:这块针对的是app版开发,更多更详细请阅读官方api1、申请key点击下边的网址,转载 2018-02-02 16:47:53 · 5017 阅读 · 2 评论 -
教你如何编写Vue.js的单元测试
Vue.js是一个JavaScript框架,可用于构建Web应用程序的前端框架。特别是在创建复杂功能时,对于每个项目,有必要在我们的应用程序中查看所有内容,并检查它是否符合预期。然而,对于大型项目,每次新的更新后,检查每个功能将变得很麻烦。因此,我们可以创建可以一直运行的自动化测试,并保证我们的代码可以正常运行。在本文中,我们将为VueJS创建一些简单的单元测试。要进行测试,我们将先制作一个基...转载 2018-03-06 11:57:06 · 15320 阅读 · 3 评论 -
vue父子页面都缓存,父进子点浏览器返回后,再进入子页面不刷新问题解决
项目中遇到了父子两个页面都是缓存的,但是父页面是一个统计页面,点击表格的不同项目会进入到对应的子页面的不同tab列表页,如下:子列表如下:我点击了未到件进入到子列表的未到件列表后,点击浏览器返回到父页面,数据缓存所以页面信息没问题,可是当再点击待派件之类的进入到子页面,本来应该是需要刷新子列表页到待派件的tab显示列表的,可是因为有缓存,所以子列表页面没有刷新还是在未到件列原创 2018-05-08 17:39:26 · 3892 阅读 · 0 评论 -
iview中Modal对话框点击确定后会自动关闭窗口
在某个页面需打开一个Modal,然后这个Modal里有一个Form表单,点击确定时我需要先校验表单数据是否输入正确,不确定则不希望关闭窗口;(问题是:只要点击确认 loading :false 情况下iview默认就把窗口就关闭了)API上也只是说了通过loading状态来手动关闭对话框,但是在需要验证form表单,表单验证通过再关闭modal 这种环境下,似乎并不实用,当首次表单验证不通过时,若...转载 2018-06-12 12:36:44 · 8444 阅读 · 0 评论 -
vue iview表格单元格可编辑input
方法:/** * 表格内Input组件 * @param {function} h // render 内部h函数 * @param {object} params 表格参数 * @param {string/array} prop // params.row[...prop] * @param {function} obj, 可选参数 */// TODO:修改为组件ex...原创 2019-03-07 15:15:13 · 2816 阅读 · 0 评论