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文件用来放“伪数据”，如下图：

注意：下面的注释不要复制进去。否则可能会报错。
/* 模拟数据_代码 */
/* 这里只简单模拟一组比较规整数据，如大家有需求可自行加所需数据 */
{
    "goods": [
        { "price": "69.9", "title": "德芙", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t3688/270/776223567/128582/fa074fb3/58170f6dN6b9a12bf.jpg!q50.jpg.webp" },
        { "price": "63", "title": "费列罗", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t613/100/1264998035/221234/1a29d51f/54c34525Nb4f6581c.jpg!q50.jpg.webp"},
        { "price": "29.9", "title": "大米", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t1258/40/17387560/108696/aced445f/54e011deN3ae867ae.jpg!q50.jpg.webp"},
        { "price": "54.9", "title": "安慕希", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t2734/15/680373407/215934/3abaa748/572057daNc09b5da7.jpg!q50.jpg.webp"},
        { "price": "58", "title": "金典", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t2482/145/1424008556/91991/d62f5454/569f47a2N3f763060.jpg!q50.jpg.webp"},
        { "price": "60", "title": "味可滋", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t2368/3/874563950/70786/7b5e8edd/563074c8N4d535db4.jpg!q50.jpg.webp" },
        { "price": "248.00", "title": "泸州老窖", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t283/166/1424018055/189580/7c0792b7/543b4958N05fa2feb.jpg!q50.jpg.webp"},
        { "price": "328.8", "title": "剑南春", "img": "http://m.360buyimg.com/babel/s350x350_g15/M05/1A/0A/rBEhWlNeLAwIAAAAAAHyok3PZY0AAMl8gO8My0AAfK6307.jpg!q50.jpg.webp"},
        { "price": "49.00", "title": "蓝莓", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t2332/148/2952098628/94387/e64654e2/56f8d76aNb088c2ab.jpg!q50.jpg.webp" },
        { "price": "68", "title": "芒果", "img": "http://m.360buyimg.com/n0/jfs/t3709/334/1378702984/206759/5c100ab5/58253588Naaa05c5c.jpg!q70.jpg"}
    ]
}

数据文件创建完成后，就需要写一个接口了，在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，返回相关数据。
/* datura接口 20170302 */
var appData = require(‘../goods.json‘)  /* 引入根目录下goods.json数据文件 */
var goods = appData.goods   /* goods.json文件文件下的.goods数据赋值给变量goods */
var apiRoutes = express.Router()  /* 定义express.Router() 对象 */
apiRoutes.get(‘/goods‘, function(req, res){   /* 定义接口并返回数据 */
  res.json({
    data: goods
  })
})
app.use(‘/api‘, apiRoutes)  /* 定义接口在/api目录下，方便管理 */
/* datura接口 _end */

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

四、编写页面代码

1. 页面入口index.html：

知识点：

  1. 定义挂载Vue实例的对象“#app”；
  2. 必须定义数据战术区域，这里用<router-view></router-view>标签展示组件或模版；
  3. 根据不同设备分辨率改变根字体大小从而达到终端适配。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>secondproject</title>
    <style media="screen">
    /* 简单进行默认样式重置 */
      * {margin: 0;padding: 0}
      li {list-style: none;}
      a {text-decoration: none;}
      img {vertical-align: middle;}
    </style>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>  <!-- 这里是展示来自路由页面数据的 -->
    </div>
  </body>
  <script type="text/javascript">
  /* 因为我们后面用的是rem布局，所以这里做下处理，根据不用设备分辨率更改跟字体大小。 rem相关布局[请参考](http://www.jianshu.com/p/65f80d4b44bb)*/
    (function(win,doc){
          change();
          function change(){
              doc.documentElement.style.fontSize = doc.documentElement.clientWidth *20/320+‘px‘;
          }
          win.addEventListener(‘resize‘,change,false);
          win.addEventListener(‘orientationchange‘,change,false);  /* 这个是移动端设备横屏、竖屏转换时触发的事件处理函数 */
      })(window,document);
  </script>
</html>
2. 主要模版home.vue：这个是来展示数据的，并通过vue的路由展示到index.html。

因为home.vue用到了三个组件，所以我们就先编写下这几个组件

a). homeHeader.vue：和之前说的一样，在template标签里写html代码，style标签里写css代码，script标签里写js代码

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

<template lang="html">
  <div class="head">
    <div class="header">
      <h4 class="header-cont">主页</h4>
    </div>
  </div>
</template>
<script>
export default {
}
</script>
<style lang="css" scoped>
.head{
  width: 100%;
  height: 2rem;
}
.header{
  width: 100%;
  height: 2rem;
  position: fixed;
  left: 0;
  top: 0;
  background-color: #fff;
  border-bottom: 2px solid #ff8000;
}
.header h4 {
  width: 100%;
  text-align: center;
  line-height: 2rem;
  font-size: 1.4rem;
}
</style>

b). commonFooter.vue：

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

<template lang="html">
  <div class="footer">
    <ul class="footer-cont">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
  </div>
</template>
<script>
export default {
}
</script>
<style lang="css">
  .footer {
    height: 1.8rem;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    border-top: 2px solid #ccc;
    background-color: #fff;
  }
  .footer-cont li {
    float: left;
    width: 25%;
    height: 1.8rem;
    line-height: 1.8rem;
    font-size: 1.4rem;
    color: #ff8000;
    text-align: center;
  }
  .footer-cont li:active {
    background-color: #ccc;
  }
  .footer-cont:after {
    content: ‘‘;
    display: block;
    clear: both;
    width: 0;
    height: 0;
  }
</style>

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

知识点：

  1. 类似a标签功能的<router-link to="/detail"></router-link>标签，来规定发生点击事件后需要跳转的地址。
  2. :src="img" 中的img是来自父组件的数据，这里用到了父组件向子组件传递数据。props对象在后续的深入学习中会详细解释。
  3. {{ xxx }} 模版展示数据，也可用v-text=‘xxx‘，v-html=‘xxx‘来展示数据。后者是防止当网速超慢时，用户会看到大花括号。
  4. {{ xxx|aa|bb }}模版展示数据+过滤器，过滤器顾名思义就是对展示的数据加以过滤，例如这里的是加个符号并保留两位小数。
  5. props
<template lang="html">
  <li class="goods-list">
    <router-link to="/detail"  class="goods-list-link">  <!--  这个是用来跳转页面的，可以理解为a标签 -->
      <div class="goods-list-pic">
          <img :src="img" >
      </div>
      <div class="goods-list-desc">
        <p class="goods-list-name">{{ title }}</p>
        <p class="goods-list-price">{{ price|dTofixed|dCurrency }}</p>  <!-- 这里用到了过滤器货币形式和保留两位小数 -->
      </div>
    </router-link>
  </li>
</template>

<script>
export default {
  props: [‘price‘, ‘title‘, ‘img‘]   /*  props是子组件获取父组件数据用的 */
}
</script>

<style lang="css" scoped>
  .goods-list {
    width: 50%;
    float: left;
    box-sizing: border-box;
    margin-bottom: 0.2rem;
  }
  .goods-list:nth-of-type(odd) {
    border-right: 0.15rem solid #ccc;
  }
  .goods-list:nth-of-type(even) {
    border-left: 0.15rem solid #ccc;
  }
  .goods-list-link {
    display: block;
    padding: 0.5rem 0;
    margin: 0 0.3rem;
    text-align: center;
    background-color: #fff;
  }
  .goods-list:nth-of-type(even) .goods-list-link{
    margin-left: 0;
  }
  .goods-list:nth-of-type(odd) .goods-list-link{
    margin-right: 0;
  }
  .goods-list-pic {
    padding: 0.5rem;
  }
  .goods-list-pic > img {
    width: auto;
    height: 4rem;
  }
  .goods-list-desc {
    padding: 0 0.5rem;
  }
  .goods-list-desc:after {
    display: block;
    content: ‘‘;
    clear: both;
  }
  .goods-list-name,.goods-list-price {
    width: 50%;
    height: 1.2rem;
    line-height: 1.2rem;
    font-size: 0.8rem;
    color: #333;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .goods-list-price {
    color: #ff8000;
    float: right;
  }
</style>
时间： 2024-10-01 06:04:25

Vue2.0史上最全入坑教程（下）—— 实战案例的相关文章

史上最全CentOS安装教程，图文结合

这是我最近整理的一份最全的CentOS安装步骤,亲自测试步骤,步步都有截图,步骤清晰.按此教程可轻松装机,并且安装成功的主机能访问外部网络. 闲话不说,首先介绍一下本教程用到工具: VMware Workstation Pro 12 CentOS-6.5-x86_64-minimal.iso 下面我们就开始装机. 第一步,打开VMware Workstation Pro 12,点选编辑->虚拟网络编辑器 点击虚拟网络编辑器,查看里面的内容信息 我这里呢,选的是VMnet8  NAT模式,留意箭头

git详细使用教程入门到精通(史上最全的git教程)

Git是分布式版本控制系统,那么它就没有中央服务器的,每个人的电脑就是一个完整的版本库,这样,工作的时候就不 需要联网了,因为版本都是在自己的电脑上.既然每个人的电脑都有一个完整的版本库,那多个人如何协作呢?比如说自己在电脑上改了文件A,其他人也在电脑上 改了文件A,这时,你们两之间只需把各自的修改推送给对方,就可以互相看到对方的修改了. 一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与Git的最主要的区别? SVN是集中式版本控制系统,版本库是集中放在中央服务器

史上最全的MySQL高性能优化实战总结！

1.1 前言 MySQL对于很多Linux从业者而言,是一个非常棘手的问题,多数情况都是因为对数据库出现问题的情况和处理思路不清晰.在进行MySQL的优化之前必须要了解的就是MySQL的查询过程,很多的查询优化工作实际上就是遵循一些原则让MySQL的优化器能够按照预想的合理方式运行而已. 今天给大家体验MySQL的优化实战,助你高薪之路顺畅.图 - MySQL查询过程 1.2 优化的哲学 优化有风险,涉足需谨慎 1.2.1 优化可能带来的问题 1.2.2 优化的需求1.2.3 优化由谁参与 在进

.Net魔法堂：史上最全的ActiveX开发教程——ActiveX与JS间交互篇

一.前言 经过上几篇的学习,现在我们已经掌握了ActiveX的整个开发过程,但要发挥ActiveX的真正威力,必须依靠JS.下面一起来学习吧! 二.JS调用ActiveX方法 只需在UserControl子类中(即自定义的ActiveX控件中),编写公共方法即可. C# [Guid("0203DABD-51B8-4E8E-A1EB-156950EE1668")] public partial class Uploader : UserControl, IObjectSafety { p

史上最全的Excel数据编辑处理技巧（转）

史上最全的数据编辑处理技巧,让你在日常数据分析处理的疯魔状态中解放出来. 一.隐藏行列 “不得了了,Excel出现灵异事件,部分区域消失不见了!”办公室里的一个MM跑过来大声喊叫着,着实吓了俺一跳.待退隐江湖已久的名侦探(就是小编了)来一探究竟.经过小编掐指一算,发现原来是行列被隐藏了,没见过世面的妹纸真是大惊小怪(当然,这只是内心的声音). 工 作表中可以对暂时不需要显示的数据进行隐藏.选中需隐藏的行或者列,右键——隐藏,就完成隐藏了.也可以用更快捷的方式,快捷键Ctrl+9隐藏行:快捷 键C

Java 粘包/半包 原理与拆包实战（史上最全）

疯狂创客圈 Java 聊天程序[ 亿级流量]实战系列之13 [博客园 总入口 ] 本文的源码工程:Netty 粘包/半包原理与拆包实战 源码 本实例是<Netty 粘包/半包原理与拆包实战> 一文的源代码工程. 写在前面 大家好,我是作者尼恩. 为了完成了一个高性能的 Java 聊天程序,在前面的文章中,尼恩已经再一次的进行了通讯协议的重新选择. 这就是:放弃了大家非常熟悉的json 格式,选择了性能更佳的 Protobuf协议. 在上一篇文章中,并且完成了Netty 和 Protobuf协议

史上最全最常用的正则表达式-（基本够用值得收藏）

一.校验数字的表达式 1 数字:^[0-9]*$ 2 n位的数字:^\d{n}$ 3 至少n位的数字:^\d{n,}$ 4 m-n位的数字:^\d{m,n}$ 5 零和非零开头的数字:^(0|[1-9][0-9]*)$ 6 非零开头的最多带两位小数的数字:^([1-9][0-9]*)+(.[0-9]{1,2})?$ 7 带1-2位小数的正数或负数:^(\-)?\d+(\.\d{1,2})?$ 8 正数.负数.和小数:^(\-|\+)?\d+(\.\d+)?$ 9 有两位小数的正实数:^[0-9]

zz 史上最全--各银行借记卡的年费、小额管理费、转账费等！

史上最全--各银行借记卡的年费.小额管理费.转账费等! 发布时间:2015-01-14 17:28:10 还在迷茫借记卡自费的菜主儿们~菜菜特别整理关于各银行借记卡.存折账户等的年费.小额管理费.转账费等实用信息,欢迎大家更新或者补充完善.觉得有用一定要收藏和分享哟! 工商银行 办卡费5元,年费10元/年,低于300元收小额账户管理费3元/季度,同城跨行取款2元/笔.异地存取款:存款按照结算金额的0.5%收取,最低2元,最高100元;取款按照结算金额的1%收取,最低2元,最高100元; 中国农业

史上最全的maven的pom.xml文件详解

史上最全的maven的pom.xml文件详解 http://www.cnblogs.com/hafiz/p/5360195.html <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 h