
VUE
文章平均质量分 59
kindCoder
be a kind person!
展开
-
VUE——vue-amap兼容原生SDK+使用官方UI
由于业务需要,vue-amap提供的组件不够实现部分业务,需要使用高德原生SDK来定制化。对于vue-amap,都有init事件,参数为高德的实例,因此可以自由的将原生SDK和vue-amap结合使用 对于el-map组件,支持一个amap-manage属性,通过这个属性可以再任何地方获取高德原生Amap.Map实例 记录两个简单案例,以便后续查阅 使用官方UI,通过原生的方法...原创 2018-06-29 16:22:46 · 11101 阅读 · 4 评论 -
VUE——路由活用(vue-router)
首先检查是否安装了路由依赖,若没有安装,先进行安装:cnpm install vue-router -D具体路由定义或基本使用请参考官方文档:点击打开链接1.当页面内容过多时,切换路由始终回到页面顶端,配置scrollBehaviorconst router = new Router({ scrollBehavior: () => ({ y: 0 }), routes}...原创 2018-07-12 16:22:25 · 212 阅读 · 0 评论 -
VUE——全局变量模块或全局方法挂载到Vue.prototype里使用
比如登录后返回token,将token存入cookie,其他页面或请求的时候需要判断有没有cookie,请求的时候需要带上cookie,没有则返回登录。这样一来多个页面位置上需要去拿cookie,需要封装函数方法,并导入。如多将此方法挂载到Vue.prototype上,则其他地方只需要:this.挂载的名称 即可使用这样一来,很多需要多次重复使用的全局函数都可以挂载,以便其他地方使用,以...原创 2018-09-28 11:06:14 · 28712 阅读 · 0 评论 -
VUE——在配置文件config/index.js中配置统一请求接口
在配置文件config/index.js找到 module.exports={ dev:{ proxyTable:{} } }更改为: proxyTable:{ "/api": { target: "http://218.78.187.216/api/v1", //...原创 2018-09-28 11:06:33 · 14029 阅读 · 1 评论 -
VUE——本地mock数据并请求
在src统计目录下新建data.json文件{ "clock":{ "normal":{ "rule":[ { "id":1, "onWorkTime":"09:00", "afterWorkTime":"12:00" },原创 2018-09-28 11:08:36 · 2734 阅读 · 0 评论 -
VUE——小提示
通过ref获取DOM在DOM上绑定:ref="demo"方法里可通过this.refs.demo获取该DOMnextTickthis.$nextTick(()=>{////拿到数据后DOM更新 this._initScroll();})$nextTick 想要计算一些跟DOM相关的东西时 一定要保证DOM已经更新了...原创 2018-09-28 11:17:21 · 398 阅读 · 0 评论 -
vue-router传参的几种方法
1.动态路径参数 http://localhost:8081/#/user/1 配置路由:const router = new VueRouter({ routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ]})router-link中使用<router-link ...原创 2018-12-04 15:47:07 · 399 阅读 · 0 评论 -
vue中通过script的形式使用外部库
如:index.html中:<script src="http://unpkg.com/vue/dist/vue.js"></script><!--高德地图 --><script src="//webapi.amap.com/maps?v=1.3&key=e1dedc6bdd765d46693986ff7ff969f4">&原创 2018-12-05 16:05:51 · 8623 阅读 · 0 评论 -
vue-cropper + ant-design-vue 实现裁剪图片并上传到服务器
需求:上传的图片要进行裁切或压缩到C端显示的格式与大小主要应用于PC端的后管 涉及到新增过程 与图片回显(修改)思路:点击上传,从本地选择图片文件 选择文件夹后进入模态框(将选择的图片塞入模态框) 模态框作为裁剪图片的容器 进行裁剪 获取裁剪后的结果 并将裁剪后的图片对象返回给父组件 父组件获取到裁剪后的图片文件 进行上传 成功后将图片回显修改过程:将后端数据回显到图...原创 2019-07-04 10:55:24 · 6959 阅读 · 2 评论 -
VUE——父组件子组件间通信
父组件给子组件传参,子组件通过prop属性进行接收简单搭建组件部分如下,其中父元素身上有两个数据,分别是字符型数据1,json型数据2子组件分别从父组件获取这两个数据并展示,其次子组件有自己的数据子组件通过$emit()事件想父组件发射数据页面结构:其中child-a为子组件:<template> <div> <p>这是父组件</p> ...原创 2018-07-12 16:15:02 · 727 阅读 · 0 评论 -
Vuex 学习与简单使用
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化主要用来管理某种状态(包括更改某个状态状态),对于多层嵌套路由间的传参特别有效此处以分割各个部分来记录,以便后续参照使用在src 文件夹中新建store文件夹store文件夹里分别新建以下文件: index.js:我们组装模块并导出 sto...原创 2018-07-12 15:55:43 · 313 阅读 · 0 评论 -
VUE——自动定位+拖拽选址+搜索选址
地图加载完成后,进行自动定位到设备当前所在位置(显示当前周边),拖拽地图进行选择地址,点击搜索按钮,搜索框内输入时会提示相关点,通过搜索结果进行搜索选择地址组件部分:<template> <div> <button @click="addRadius">增加范围</button> <button @click="s...原创 2018-06-29 16:30:05 · 11688 阅读 · 6 评论 -
VUE—— transition(过渡&动画)的简单使用
对要使用动画的组件或者模块包上一层transition标签,<transition name="fade"> <p v-if="show">hello</p></transition>name是自己命名的class的名称,用来写动画样式,如果不写name 则默认是v对应样式名称如下:写样式的时候,v的地方要改fade.如:.fade-ent...原创 2018-06-29 16:41:16 · 6793 阅读 · 0 评论 -
Vue爬坑——开发环境
前言:各个依赖版本: Vue:2.9.3 node:8.10.0 npm:5.7.1 webpack : 3.6.0开发环境时运行正常,用npm run build 编译生产环境后,放在本机nginx搭建的服务下 默认的html文件中本地运行,报错 找不到相应的css,js文件。查看元素 发现路径错误解决: 找到config文件夹下的index.js文件 更改其中...原创 2018-06-13 14:13:42 · 343 阅读 · 1 评论 -
VUE——自定义指令
v-focus:自动获取焦点Vue.directive("focus", { update: function(el, binding) { if (binding.value) { el.focus(); } }});原创 2018-06-01 12:41:05 · 242 阅读 · 0 评论 -
VUE——常用自定义过滤器定义与使用
Vue2.x 不再支持自带的过滤器,使用过滤器需要自定义且过滤器只能使用在v-bind和双花括号里,以管道符 “|”隔开,参数类似于函数的形式 如:{{msg | filter(param)}}局部定义过滤器export default { name:'test', data(){ return { title:'过滤器 & 指令', arr:[5,3,2,6...原创 2018-06-26 11:12:05 · 5070 阅读 · 0 评论 -
VUE——vue-amap简单使用
一、 down一个vue webpack的模板vue init webpack vueamap根据提示完成模板下载,此处我的项目中选择router为yes 其他测试插件全为no vueamap为文件夹名称模板下载后 安装依赖cnpm install依赖安装完成后 执行开发环境npm run dev若提示在"localhost:8080"上查看效果,在浏览器上查看效果,若出现VUE效果 则模板下载...原创 2018-06-26 16:02:27 · 55088 阅读 · 26 评论 -
VUE——Vue-amap实现POI搜索
大致效果: 点击搜索按钮,出现搜索框 搜索框里输入文字,自动联想并提示搜索结果,供选择 点击某个提示结果,进入详细搜索结果 选择想要的结果,搜索结果隐藏,搜索框隐藏,地图中心点变为选择的地方 这里使用官方UI里面的misc/PoiPickernew PoiPicker的时候进行配置,具体配置文档请参照:点击打开链接组件代码:<te...原创 2018-07-02 15:57:56 · 11585 阅读 · 7 评论 -
Vue交互——axios && vue-resource常用配置
axios首先安装依赖:cnpm install axios -D在main.js中引入:import axios from "axios";在vue中使用axios进行交互时,axios提供了一些可配置项来方便管理,以下作部分记录以便后续使用一般在进行交互(发送请求)时,为了用户友好,会有loading的效果,可通过axios进行统一配置发送请求数据的时:...原创 2018-07-12 15:47:27 · 449 阅读 · 0 评论 -
devServer配置多个反向代理
接受请求的两个地址分别是:http://192.168.2.164:8000https://www.easy-mock.com/mock/5c20714a0fd1077df5e6e944/wwk例如登录请求地址分别为:http://192.168.2.164:8000/sys/op/basic/accountLoginhttps://www.easy-mock.com/mo...原创 2019-07-04 11:04:00 · 10858 阅读 · 1 评论