Vue2.0教程（下）

前言：经过前两节的学习，我们已经可以创建一个vue工程了。下面我们将一起来学习制作一个简单的实战案例。

说明：默认我们已经用vue-cli（vue脚手架或称前端自动化构建工具）创建好项目了

一、 项目说明

ps：这个简单小项目只提供一个小小小的骨架，需要向“它”身上具体加多少“肉”，需要大家考虑好功能和布局后进行完善。

1.首先看下主页效果：如下图

 

 

主页分析：大体上分为上（header）、中（body或content）、下（footer）三部分，中间body部分是由若干个相同的li组成的“列表”，所以我们可将li定义为一个组件。

2.再来看下商品详情页：如下图

 

详情页分析：也分为上、中、下三部分。

分析后是不是觉得so easy呢！很好那么我们就一起来搞一下！！

二、 配置目录文件

在src文件夹（也就是我们码农主要工作区）下，创建assets文件夹（用来保存项目所需图片）、components（存组件commonFooter.vue、DetailHeader.vue、homeHeader.vue、list.vue）、pages（存页面goodsDetail.vue、home.vue）和main.js文件。详情请看下图：

ps: 1.具体文件夹以及文件名称可根据自己项目进行“自拟”。 2.这里的每一个*.vue文件都是一个组件。

三、配置相关接口

主页商品信息及图片， 是从服务器端返回的json数据，不可能所以商品都“写死”。故这里需要模拟后台建立了一个数据文件。在根目录下建立一个goods.json文件用来放“伪数据”，如下图：

 

注意：下面的注释不要复制进去。否则可能会报错。

数据文件创建完成后，就需要写一个接口了，在build文件夹下dev-server.js文件进行配置。如图：

• 注意
  本文是在vue-cli为2.8.1的时候编写。最近很多小伙伴vue -V版本为2.9.1找不到derver.js文件。。现已提供两种解决方案以便参考

简单说明：

1. 需要在var app = express() 代码下写新增代码,，因通过接口获取数据依赖与express() 对象下方法；

1. 用require引入模拟数据的文件；
2. 用express对象下的Router方法来指定入口在哪。
3. 对进入“入口”的obj，返回相关数据。

测试是否该数据可用，在浏览器地址栏中输入：http://localhost:8090/api/goods ，此处因为本人PC的8080端口有冲突所以改成端口8090。在浏览器中展示出如下图数据，代码数据数取成功：

四、编写页面代码

1. 页面入口index.html：

知识点：

1. 定义挂载Vue实例的对象“#app”；
2. 必须定义数据战术区域，这里用<router-view></router-view>标签展示组件或模版；
3. 根据不同设备分辨率改变根字体大小从而达到终端适配。

4. 2. 主要模版home.vue：这个是来展示数据的，并通过vue的路由展示到index.html。

   因为home.vue用到了三个组件，所以我们就先编写下这几个组件
   a). homeHeader.vue：和之前说的一样，在template标签里写html代码，style标签里写css代码，script标签里写js代码

   知识点：<style></style>属性可进行配置，scoped表此样式只在当前页面有效。lang="xxx"支持less/sass语法规则。

   
   

5. b). commonFooter.vue：
   说明：定义一个footer并定位到页面的底部，在ul内写4个li来模拟按钮。

6. 

   c). list.vue：这个组件用来展示每个商品列表信息

   知识点：

7. 类似a标签功能的<router-link to="/detail"></router-link>标签，来规定发生点击事件后需要跳转的地址。
8. :src="img" 中的img是来自父组件的数据，这里用到了父组件向子组件传递数据。props对象在后续的深入学习中会详细解释。

9. 
   
    

10. {{ xxx }} 模版展示数据，也可用v-text='xxx'，v-html='xxx'来展示数据。后者是防止当网速超慢时，用户会看到大花括号。
11. {{ xxx|aa|bb }}模版展示数据+过滤器，过滤器顾名思义就是对展示的数据加以过滤，例如这里的是加个符号并保留两位小数。
12. props