vue实战总结

用了十多天看完一份vue实战视频，实现了一个仿饿了么外卖APP。部分总结以及部分实现如下：App.vue1.App.vue在HTML中使用router-link标签来导航，默认被渲染成一个a标签，通过传入to属性指定链接；<div class="tab-item"><router-link to="/goods"&a

糖同学前端er

28817人浏览 · 2017-01-13 21:47:03

糖同学前端er · 2017-01-13 21:47:03 发布

用了十多天看完一份vue实战视频，实现了一个仿饿了么外卖APP。

部分总结以及部分实现如下：

App.vue

1.App.vue在HTML中使用router-link标签来导航，默认被渲染成一个a标签，通过传入to属性指定链接；

<div class="tab-item">
    <router-link to="/goods">商品</router-link>
</div>
<div class="tab-item">
    <router-link to="/ratings">评论</router-link>
</div>
<div class="tab-item">
    <router-link to="/seller">商家</router-link>
</div>

2.在main.js中配置路由

导入Vue和VueRouter，并调用Vue.use(VueRouter)
定义组件：import子组件

import Vue from 'vue';
import VueRouter from 'vue-router';
import goods from 'components/goods/goods.vue';
import ratings from 'components/ratings/ratings.vue';
import seller from 'components/seller/seller.vue';
import App from './App.vue';

定义路由：每个路由映射一个组件

const routes = [
    {
        path: '/goods',
        component: goods
    },
    {
        path: '/ratings',
        component: ratings
    },
    {
        path: '/seller',
        component: seller
    }
];

创建router实例：传入routes配置

const router = new VueRouter({
    routes: routes
});

创建和挂载根实例：通过router配置参数注入路由，从而让整个应用都有路由功能

const app = new Vue({
    el: '#app',
    template: '<App/>',
    components: {App},
    router
});

3.在App.vue中添加router-view（最顶层的出口，渲染最高级路由匹配到的组件），使用keep-alive，把切换出去的组件保存在内存中，保留它的状态或避免重新渲染

<keep-alive>
  <router-view :seller="seller"></router-view>
</keep-alive>

4.引入data.json中的数据

created() {
  this.$http.get('/api/seller').then((response) => {
      response = response.body;
      if (response.errno === ERR_OK) {//const ERR_OK = 0;
          this.seller = response.data;
      }
  });
}

5.引入header组件，并将seller数据传给header组件

在JS中import header组件，并在components中注册，在template模板中使用header

<v-header :seller="seller"></v-header>

header.vue

1.接收父组件传来的数据

props: {
    seller: {
        type: Object
    }
}

2.写模板以及方法

在img中引入图片来源：

<img  width="64" height="64" :src="seller.avatar">

如果有优惠活动，显示第一个优惠活动：data.json中定义了优惠活动的type序号，对应classMap中的活动名称

<div v-if="seller.supports" class="support">
    <span class="icon" :class="classMap[seller.supports[0].type]"></span>
    <span class="text">{{seller.supports[0].description}}</span>
</div>

created() { this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']; },

点击展开活动详情及商家公告：弹出层绝对定位，@click控制弹出层的v-show的true或false值，并设置默认值为false

<div class="support-count" v-if="seller.supports" @click="showDetail">
  <span class="count">{{seller.supports.length}}个</span>
  <i class="icon-keyboard_arrow_right"></i>
</div>

methods: {
  showDetail() {
    this.detailShow = true;
  }
}

<div class="detail" v-show="detailShow">

data() { return { detailShow:false  }; }

遍历优惠活动的小图标及文字：在公共样式表中封装bg-image()样式，在不同的分辨率下显示不同大小的图标，通过优惠活动的type选择不同的样式

<ul v-if="seller.supports" class="supports">
  <li class="support-item" v-for="(item,index) in seller.supports">
    <span class="icon" :class="classMap[seller.supports[index].type]"></span>
    <span class="text">{{seller.supports[index].description}}</span>
  </li>
</ul>

bg-image($url) background-image:url($url+"@2x.png") @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) background-image:url($url+"@3x.png")

&.decrease
  bg-image('decrease_2')
&.discount
  bg-image('discount_2')
&.guarantee
  bg-image('guarantee_2')
&.invoice
  bg-image('invoice_2')
&.special
  bg-image('special_2')

3.引入star组件，传入star图标的size和score

<star :size="48" :score="seller.score"></star>

star.vue

<div class="star" :class="starType">
  <span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" track-by="$index"></span>
</div>

1.在计算属性中，starType根据传入的size来定义样式

starType() {
  return 'star-' + this.size;
}

2.itemClasses返回评星状态，根据传入的score来计算满星、半星和无星的个数，result数组装入星星的状态

const CLS_ON = 'on';
const CLS_OFF = 'off';
const CLS_HALF = 'half';

itemClasses() {
  let result = [];
  let score = Math.floor(this.score * 2) / 2;
  let hasDecimal = score % 1 !== 0;
  let integer = Math.floor(score);
  for (let i = 0; i < integer; i++) {
    result.push(CLS_ON);
  }
  if (hasDecimal) {
    result.push(CLS_HALF);
  }
  while (result.length < LENGTH) {
    result.push(CLS_OFF);
  }
  return result;
}

3.:class="itemClass"表示遍历出的星星的状态，状态不同，显示星星的状态图标即不同，class为on即显示满星，以此类推

&.star-48
  .star-item
    width: 20px
    height: 20px
    margin-right: 22px
    background-size:20px 20px
    &:last-child
      margin-right:0
    &.on
      bg-image("star48_on")
    &.half
      bg-image("star48_half")
    &.off
      bg-image("star48_off")

goods.vue

1.通过props导入数据并在li中循环，若是优惠活动，则加上小图标，并获得数组索引，在计算属性中获取内容栏滚动位置的索引，改变菜单栏的背景颜色

<ul>
  <li v-for="(item,index) in goods" class="menu-item" :class="{'current':currentIndex===index}" @click="selectMenu(index,$event)">
    <span class="text border-1px">
      <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
    </span>
  </li>
</ul>

currentIndex() { for (let i = 0; i < this.listHeight.length; i++) { let height1 = this.listHeight[i]; let height2 = this.listHeight[i + 1]; if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) { return i; } } return 0; }

2.绑定菜单栏和内容栏的点击及滚动：菜单栏绑定点击事件，获取点击的index的元素，内容栏滚动到该元素

<li v-for="item in goods" class="food-list food-list-hook">

selectMenu(index, event) {
  if (!event._constructed) {
    return;
  }
  let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
  let el = foodList[index];
  this.foodsScroll.scrollToElement(el, 300);
}

3.引入购物车组件，并传入选中的food以及配送费、最低配送价格，food.count为cartcontrol组件中的变量，为商品个数

<shopcart :selectFoods="selectFoods" :deliveryPrice="seller.deliveryPrice" :minPrice="seller.minPrice"></shopcart>

selectFoods() {
  let foods = [];
  this.goods.forEach((good) => {
    good.foods.forEach((food) => {
      if (food.count) {
        foods.push(food);
      }
    });
  });
  return foods;
}

4.导入food组件，展开菜品详情页，并传入已选中的菜品，ref 被用来给元素或子组件注册引用信息

<food :food="selectedFood" ref="food"></food>

shopcart.vue

判断是否达到结算要求

<div class="pay" :class="payClass">
  {{payDesc}}
</div>

payDesc() {
  if (this.totalPrice === 0) {
    return `￥${this.minPrice}元起送`;
  } else if (this.totalPrice < this.minPrice) {
    let diff = this.minPrice - this.totalPrice;
    return `还差￥${diff}元起送`;
  } else {
    return '去结算';
  }
},
payClass() {
  if (this.totalPrice < this.minPrice) {
    return 'not-enough';
  } else {
    return 'enough';
  }
}

food.vue

点击加入购物车，商品数量显示为1，购物车加入数量及价格

<div class="cartcontrol-wrapper">
  <cartcontrol :food="food"></cartcontrol>
</div>
<div @click="addFirst" class="buy" v-show="!food.count || food.count===0">加入购物车</div>

引入ratingSelect组件，显示商品评价的类别及是否只看有内容的评价，v-on接收来自子组件的参数

<ratingselect v-on:ratingTypeSelect="chooseType" v-on:contentToggle="chooseOnly" :selct-type="selectType" :only-content="onlyContent" :desc="desc" :ratings="food.ratings"></ratingselect>

使用过滤器，引入公共js方法，将时间戳转换为yyyy：MM：dd hh：mm的时间格式

<div class="time">{{rating.rateTime | formatDate}}</div>

export function formatDate(date, fmt) {
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
  }
  let o = {
    'M+' :date.getMonth() + 1,
    'd+' :date.getDate(),
    'h+' :date.getHours(),
    'm+' :date.getMinutes(),
    's+' :date.getSeconds()
  };
  for (let k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      let str = o[k] + '';
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
    }
  }
  return fmt;
};

function padLeftZero(str) {
  return ('00' + str).substr(str.length);
}

filters: { formatDate(time) { let date = new Date(time); return formatDate(date, 'yyyy-MM-dd hh:mm'); } }

实现父组件与子组件通信，选择评论类别，评论改变

chooseType(type) {
  this.selectType = type;
  this.$nextTick(() => {
    this.scroll.refresh();
  });
},
chooseOnly(onlyContent) {
  this.onlyContent = onlyContent;
  this.$nextTick(() => {
    this.scroll.refresh();
  });
}

ratingSelect.vue

评论类别选择按钮

<span @click="select(2,$event)" class="block positive" :class="{'active':selectType===2}">{{desc.all}}<span class="count">{{ratings.length}}</span></span>

将评论类别及是否只显示内容传入父组件

select(type, event) {
  if (!event._constructed) {
    return;
  }
  this.selectType = type;
  this.$emit('ratingTypeSelect', type);
},
toggleContent(event) {
  if (!event._constructed) {
    return;
  }
  this.onlyContent = !this.onlyContent;
  this.$emit('contentToggle', this.onlyContent);
}

seller.vue

商家实景，遍历实景图片，并横向滑动

<div class="pic-wrapper" ref="picWrapper">
  <ul class="pic-list" ref="picList">
    <li class="pic-item" v-for="pic in seller.pics">
      <img :src="pic" width="120" height="90">
    </li>
  </ul>
</div>

_initPics() {
  if (this.seller.pics) {
    let picWidth = 120;
    let margin = 6;
    let width = (picWidth + margin) * this.seller.pics.length - margin;
    this.$refs.picList.style.width = width + 'px';
    this.$nextTick(() => {
      this.picScroll = new BScroll(this.$refs.picWrapper, {
        scrollX: true,
        eventPassScroll: 'vertical'
      });
    });
  }
}

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^