Vue2
文章平均质量分 78
赵海辛
本人丑的一塌糊涂,瘦的登峰造极,请别骑着思想的野驴,出卖肮脏的灵魂。仅限技术交流。github:https://github.com/HaixinZhao
展开
-
vue2导航根据路由传值,而改变导航内容
在项目中,一般我们的导航都是长的基本一致,只是内容会根据上个页面的内容而改变。那么我们只需要把顶部导航作为独立的公共组件,这样方便哪里需要哪里引入组件即可。公共导航代码如下:(mineHeader.vue)template> section class="listHeader"> section class="header" @click="back()"> src="原创 2017-04-12 13:45:59 · 5022 阅读 · 1 评论 -
详讲:vue2+vuex+axios
在vue2项目中,组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的情况下(后台获取数据存入vuex,组件之间共享数据),那么就需要用vuex来管理这些。整个的流程是在组件的created中提交dispatch,然后通过action调用一个封装好的axios然后再触发mutation来提交状态改变state中的数据,然后在组件的计算属性中获取state的数据并渲染在页面上首先新原创 2017-03-30 17:48:29 · 23306 阅读 · 9 评论 -
vue2整个项目中,数据请求显示loading图
一般项目中,有时候会要求,你在数据请求的时候显示一张gif图片,然后数据加载完后,消失。这个,一般只需要在封装的axios中写入js事件即可。当然,我们首先需要在app.vue中,加入此图片。如下:template> div id="app"> loading v-show="fetchLoading">loading> router-view>router-view>原创 2017-06-20 11:00:54 · 26013 阅读 · 4 评论 -
vue2项目,前端写请求拦截器和响应式拦截器
很可能进了个假互联网公司,遇到堆假后台,拦截器沦落到前端写。。。import axios from 'axios'import vue from 'vue'import store from './../store/index'axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencode原创 2017-06-23 16:34:42 · 4269 阅读 · 2 评论 -
vue2中,根据list的id进入对应的详情页并修改title
一般项目中,我们会遇到有个list。。。然后你随便点击一个,会进入他对应的详情页。。。正常,那个详情页是一个公共的组件,我们只需根据id传值来判断,这个页面显示的是哪个list的数据即可。如图:原创 2017-06-30 17:46:38 · 16641 阅读 · 5 评论 -
vue2手机APP项目中,加入开屏广告或者闪屏广告
一般项目里,有的会在启动的时候加开屏广告或者闪屏广告。我们是在index.html通过定位来做的。如下:style media="screen"> #entry { width: 100%; height: 100%; z-index: 200; position: relative; } #entryAdv { display: non原创 2017-06-21 14:48:21 · 4469 阅读 · 2 评论 -
Vue2中的省市区三级联动(仿淘宝)
三级联动,随着越来越多的审美,出现了很多种,好多公司都仿着淘宝的三级联动 ,好看时尚,so我们公司也一样……为了贴代码方便,我把写在data里面省市区的json独立了出来,下载贴进去即可用,链接如下:http://download.csdn.net/detail/zhaohaixin0418/9862255。首先页面显示如下:然后我们县级所在地区会出现三级联动,如下:(以下是片段,背景原创 2017-06-06 15:14:51 · 21285 阅读 · 3 评论 -
基于vue2写的左滑删除
左滑删除,很多UI框架里有,比如Mint-UI, Muse-UI等,一开始我们就是用的这两个,但是我们需求是要:左滑的时候出现img然后来实现点击删除,如下:因为用UI框架,还得改底层代码= =所以,我们小组就直接写了一个- -,心累……此组件多地方使用,所以建议还是放到common下。。template> div class="left-delete">原创 2017-05-09 17:27:07 · 11240 阅读 · 5 评论 -
基于vue2写的上拉加载
因为我们项目中,还用了swiper。。。很多都是滑动切换的,但是又得上拉加载,所以导致,很多UI框架,我们用了,都有不同的bug出现,没办法,最后写了一个。代码如下(这个因为很多地方会用,所以建议放在components/common下面):template> div class="loadmore"> slot>slot> slot name="b原创 2017-05-08 11:22:14 · 10714 阅读 · 5 评论 -
随笔:vue2项目结构以及优化(着重是路由)
状态不太好,没办法集中精神开发。碰巧总有人问我路由配置以及项目结构问题,所以就来整理一些东西,只是一些随笔,方便自己以后查看。有不足之处,或者您有更好的方案,希望您不吝啬教给我。可留言,可加qq:979976770(非工作日,不上QQ,请勿骚扰,谢谢合作)。一般大都会用vue-cli+webpack来构建项目,我也如此,最初的结构如下图:首先我们需要说的是build,config,st原创 2017-05-25 13:59:20 · 6641 阅读 · 6 评论