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的生命周期不是特别了解,所以有时候会在几个钩子函数里做一些事情,什么时候做,在哪 ...
随机推荐
- Jquery UI
jQuery UI简介 jQuery UI包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同.所有的 jQuery UI 小部件(Widget)使用相同的 ...
- Gulp 常用插件
插件使用注意事项: 插件需要先 npm/cnpm install xx --save-dev gulp taskname,如果 task 已经设置成 default 的依赖,直接 gulp 即可 ta ...
- jQuery之回调对象
1. jQuery 1.7 版本中新增的 jQuery.Callbacks() 函数返回一个全能的对象,此对象对管理回调列表提供了强大的方式.它能够增加.删除.触发.禁用回调函数. 2. callba ...
- Jenkins插件安装和系统配置
前面我们只是把Jenkins部署在Tomcat中了,下面来看看Jenkins中的插件和一些基础的系统配置. 1.用户管理 我们一般的项目组肯定是由多名成员组成的,如何向Jenkins添加我们的成员呢? ...
- ftp文件的部署
之前在公司搭建了一个静态资源服务器,现在来记录一下 我们是通过搭建vsftp服务,然后结合apache.访问方式为http的方式 一:VSFTPD环境安装 首先我们就是要查看一下vsftpd是否有安装 ...
- python 小功能
目录 1.上传文件 2.验证码 一.上传文件 首先了解一下 request.FILES : 字典 request.FILES 中的每一个条目都是一个UploadFile对象.UploadFile对象有 ...
- 菜鸟git学习
基础知识: 安装github之后,所有的命令在git shell 中输入. E:\文档\GitHub [master +2 ~0 -0 !]> cd [ToDoList]E:\文档\GitHub ...
- P2特征(一)
很多人在提到项目的特征,肯定能说出来很多的内容,但是在英国体系下,项目的特点有哪些呢?这些特点引深的内容又有什么深度的含义. 项目具有临时性:很多人都知道项目是临时的,结束了就团队成员 ...
- css学习笔记(2)
----------------|-------------------------|------------------ 标签名 英文全拼 中文 ...
- Uncaught SyntaxError: Invalid or unexpected token
出现错误的地方:在Jquery中,调用有参数的方法,动态传递参数时报错 出现错误的原因: 动态传递参数的时候,参数中有换行符 错误的解决:参数传递之前,将换行符替换 var temp = model ...