PHPer快速上手VUE——边学边练3–再做一个vue页面

这个页面，我们分析一下，发现缺了一个底下的导航栏，就是所谓的Tabbar。导航栏也要做相应的修改。这两个导航栏，都需要做成组件。

头部导航的一些思路：

A、有些页面是不需要显示头部导航的，所以需要有一个变量，告诉程序是否显示头部导航。

B、还得有一个回退<键，同样要有一个变量告诉程序是否显示回退。

C、头部导航上面有标题。

D、订单如果比较长的话，要有回到顶部的按钮。

底部导航：

A、有些页面是不需要显示头部导航的，所以需要有一个变量，告诉程序是否显示底部导航。

这2个都可以复用，作为公共组建，所以放在公共组建目录下。

而搜索框，因为有各种各样的情况，不适合作为组件。

中间订单列表：

A、列表有可能会翻页，所以我要做个上拉加载。

B、需要类似ajax的东西去获取后台数据 【npm install axios】参考：https://cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

C、简单的搜索。

开始工作：

1、我们先建立一个\src\api 目录，用于放获取数据的api js文件

2、然后在\src\components 目录下，建立头部、底部导航、加载的组件

3、然后在\src\page 目录下，建立订单列表页面OrderList.vue

先放出OrderList.vue的核心代码，先不管它如何实现，只是为了学习一些概念。

概念学习点：

A、my-scroll是下拉组件，先把它忽略掉。

B、v-for :key 是需要学习的。对于PHPer来说，相对来说比较简单。参考资料：https://cn.vuejs.org/v2/guide/list.html

C、vue背景图片在v-for中的实现：

这一个东西网上很多，但是….你懂得。

如果没有加那个上拉组件，加上代码，形成的效果如下：

这些都可以忽略，毕竟编程技巧之类的，很多人都会了，我们主要学习的是如何搭建这个玩意。所以不要着急实现上面的效果。

大家需要学习一些基础知识：

vue路由手册：https://router.vuejs.org/zh/guide/

由于我们是快速上手，所以我就直接上手带大家入坑。下一篇，告诉你如何设置路由。