vue2.0实战
学了几周的vue2.0,终于有时间去做一个应用了。
为了全面联系相关知识,所以用到了vue-router,以及作者最新推荐的axios,组件库用的是饿了么的mint-ui2.0。
项目构建使用官方vue-cli,由于项目较小,使用simple模板。
在2.0中路由不再使用router.start();而路由跳转得组件也有所变化,官方文档很全面。有一点不是很懂,就是关于路由的挂载,本来准备另外写个router.js来挂载路由,可是不太好使,所以全都放在了main.js中。
在首页有页面切换但是并不涉及路由,这里使用了动态组件,并且使用缓存
<keep-alive>
<component :is="currentView" @changeView="change" :data-list="list" :currency-list="currencyList">
<!-- 非活动组件将被缓存! -->
</component>
</keep-alive>
组件的通信之前的文章说过,这里不再陈述。
axios暂时只有英文文档https://github.com/mzabriskie/axios,不过大同小异,很快就可以入手,axios提供了一个config配置,在配置项中可以对请求的参数在请求前做统一处理,也可以处理返回数据,还有很多,都可以看文档。这里我在写的时候传递数据采用form-data形式,由于有嵌套对象,所以对外层对象格式化之前要把内层对象变为json字符串。在axios用的是qs转化为form-data形式。
mint-ui比较简陋,但是基本的组件都有了,其中也有些坑,比如下拉刷新,
loadTop (id){
//停止下拉刷新
that.$refs.loadmore.onTopLoaded(id);
}
停止下拉刷新时,这里的id是不用传具体值的,组件内部有会做处理,自己只需要按官方写上就可以了。
最后附上github地址https://github.com/Stevenzwzhai/vue-mobile-application
vue2.0实战的更多相关文章
- vue2.0实战记录
1. 初始化项目vue init webpack caseone cd caseonecnpm installcnpm install less less-loader -Dcnpm install ...
- 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍
webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...
- vue2.0与实战开发
慕课网实战 百度云 web前端实战: Node.js入门到企业Web开发中的应用 Web前端性能优化 让你的页面飞起来 前端跳槽面试必备技巧 前端JavaScript面试技巧全套 node.JS 线上 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战:Vuex 其实很简单
前言 哈喽大家周五好,马上又是一个周末了,下周就是中秋了,下下周就是国庆啦,这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了,好几次都坚持不下去想要中断,不过每当看到群里的交 ...
- vue2.0 构建单页应用最佳实战
vue2.0 构建单页应用最佳实战 前言 我们将会选择使用一些 vue 周边的库vue-cli, vue-router,vue-resource,vuex 1.使用 vue-cli 创建项目2.使 ...
- Vue2.0史上最全入坑教程(下)—— 实战案例
书接上文 前言:经过前两节的学习,我们已经可以创建一个vue工程了.下面我们将一起来学习制作一个简单的实战案例. 说明:默认我们已经用vue-cli(vue脚手架或称前端自动化构建工具)创建好项目了 ...
- vue2.0版cnode社区项目搭建及实战开发
_________________________________________________________________________ 初涉vue就深深的被vue强大的功能,快速的开发能力 ...
- 适用初学者:vue2.0构建单页应用最佳实战
参考:https://segmentfault.com/a/1190000007630677 自己gitHub项目地址:https://github.com/shixiaoyanyan/vue-wor ...
- vue2.0项目实战(4)生命周期和钩子函数详解
最近的项目都使用vue2.0来开发,不得不说,vue真的非常好用,大大减少了项目的开发周期.在踩坑的过程中,因为对vue的生命周期不是特别了解,所以有时候会在几个钩子函数里做一些事情,什么时候做,在哪 ...
随机推荐
- php调接口
浏览器直接访问接口时会弹出账号密码框 当用程序调用时需要加入 curl_setopt($ch, CURLOPT_USERPWD, "$username:$password") ...
- 百度广告 高亮 Chrome插件(附源码)
一前言 百度最近是上了舆论头条了,相信中过百度毒的人对百度都反感.百度自己挖了这么多坑,终究还是要自己来填.国内网民使且最频繁的搜过 还是以百度为主,而百度依靠这种市场占有率靠他的广告竞价排名大发横财 ...
- markdown语法说明
1.先写一个标题 # 一级标题.相当于 <h1> ## 二级标题.相当于 <h2> ### 三级标题.相当于 <h3> #### 四级标题.相当于 <h4&g ...
- javascript正则表达式(RegExp)简述
首先我们来思考以下两个个场景 我们使用window操作系统,有时候需要找一个文件,刚刚好这个文件我不知道放哪里去了,这个时候我们该怎么办呢? 我们使用word写论文的时候,不小心将"订价&q ...
- 处理程序“PageHandlerFactory-Integrated”在其模块列表中有一个错误模块“ManagedPipelineHandler”
原因: vs2010默认的是4.0框架,4.0的框架是独立的CLR,和2.0的不同,如果想运行4.0的网站,需要用aspnet_regiis注册4.0框架,然后用4.0的Class池,就可以运行4.0 ...
- Gson将字符串转换成JsonObject和JsonArray
以下均利用Gson来处理: 1.将bean转换成Json字符串: public static String beanToJSONString(Object bean) { return new Gso ...
- Redis集群研究和实践(基于redis 3.0.5)
前言 redis 是我们目前大规模使用的缓存中间件,由于它强大高效而又便捷的功能,得到了广泛的使用.现在的2.x的稳定版本是2.8.19,也是我们项目中普遍用到的版本. redis在年初发布了3.0. ...
- BZOJ2809: [Apio2012]dispatching
传送门 主席树经典题. 首先把树搞出来,然后搞出来DFS序.然后离散化点权,在DFS序上建立主席树. 对于每个点对应的区间,查找对应的区间最大的点数即可. //BZOJ2809 //by Cydiat ...
- Request —— 让 Node.js http请求变得超简单
github地址: https://github.com/request/request 安装: npm install request --save-dev
- canvas刮刮乐效果(pc端&H5、zepto-touchmove)
一.html <div id="canvasArea" style="width:300px;height:200px;position:relative;&quo ...