基于webpack的vue案例-水果超市

基于webpack的vue案例-水果超市

• 项目成品截图

• 文件目录
  主要文件即红圈里的
  
• 逻辑思路
  父组件的数据在子组件上渲染，点击子组件的对应button，商品库存-1，购物车+1，总价++，
• 学到的知识点
  父子组件如何通信
  1.如何在子组件上操作父组件的方法，以及数据
  A:
  先 -->在父组件内先创建好函数方法，然后调用子组件时在子组件标签上用v-on常规使用,
  后 -->子组件内使用$emit('父组件对应方法名称,'传递的参数')传递的参数可以是数组格式
  这两步必须都写这是我第一个案例意味着知识面和使用的方法都很局限，可能这种通讯方式不是最优的但目前我只了解到了这种，期待发现更多优雅的通讯方式

<!--父组件文件  
Show是子组件 -->
<Show  
v-on:onAddGoods="onAddGoods" 
v-on:onSubtract="onSubtract"
/>

<!-- Show子组件文件-->
<div>
 <button 
v-on:click="$emit('onAddGoods',[good.price,good.id])" >+</button>
 <button 
  v-on:click="$emit('onSubtract',[good.price,good.id])">-</button>
</div>

2.父组件给子组件传递参数的正确写法
头次写时把要传给子组件的参数写在了子组件外层的div上，所以一直获取不到数据哈哈
最后才反应过来应该写在引用的子组件标签上

• 详细代码

<!-- Show.vue-->
<template>
    <div id="show">
            <span>{{good.name}}</span>
            <span>单价：{{good.price}} ￥</span>
            <span>库存：{{good.maxkc}} 斤 | 剩余{{good.kucun}}</span>
            <span>加入购物车：{{good.buy}}</span>
            <van-button v-on:click="$emit('onAddGoods',[good.price,good.id])" v-bind:disabled="good.kucun==0? true:false" plain type="primary">+</van-button>
            <van-button v-on:click="$emit('onSubtract',[good.price,good.id])" v-bind:disabled="good.buy==0?true:false" plain type="primary">-</van-button>
    </div>
</template>
<script>
    export default{
        name:'Show',
        props:{
            good:{
                name:String,
                price:Number,
                kucun:Number
            },  
        },
        components:{ },
        data(){
            return{         
            }
        }
    }
</script>
<style scoped>
#show{padding: 20px; border: 1px solid #4385c7; width: 800px; text-align: left;display: flex;justify-content:space-between;}
#show span:nth-child(1){ width: 15%;}
#show span:nth-child(2){width: 20%;}
#show span:nth-child(3){width: 30%;}
#show span:last-child(2){ width: 10%;}
#show span:last-child{width: 10%; margin-right: 10px;}
#show>div{ font-size: 20px;color: rgb(88, 90, 194); display: inline-block;}
p{font-size: 12px;}
button{ height: 25px;width: 30px !important; text-align: center;}
</style>

<!-- App.vue-->
<template>
  <div id="app">
    <img src="./assets/leaf.png">
    <TitleGood/>
    <div  class="showBox">
      <Show v-for="item in goods" :key="item.name" v-bind:good="item" v-on:onAddGoods="onAddGoods" v-on:onSubtract="onSubtract"/>
    </div>
    <!--  -->
    <p>总计：{{sum}}</p>
  </div>
</template>

<script>
import Show from './components/Show.vue';
import TitleGood from './components/TitleGood.vue';

export default {
  components:{ 
    TitleGood,
    Show,
    
  },
  name: 'App',
  data(){
    return{
      sum:0,
      goods:[
          {name:'apple',price:15,kucun:20,maxkc:20,buy:0,id:1},
          {name:'orange',price:10,kucun:100,maxkc:100,buy:0,id:2},
          {name:'banner',price:4,kucun:60,maxkc:60,buy:0,id:3},
          {name:'lemon',price:6,kucun:90,maxkc:90,buy:0,id:4},
      ]
    }
  },
  methods:{
    onAddGoods:function(item){
      // 库存-1，购物车+1，总计++
      let index = item[1]-1;
      let good = this.goods[index];

      if(good.kucun){
        good.buy +=1;
        good.kucun -=1;
        this.sum += item[0];
      }else{
        // 库存为0什么都不做
        //button样式禁用
      }   
    },
    onSubtract:function(item){
      // 库存+1，购物车-1，总计--
      let index = item[1]-1;
      let good = this.goods[index];

      if(good.kucun<=good.maxkc){
        good.buy -=1
        good.kucun +=1;
        this.sum -=item[0];
      }     
    }
  }
}
</script>
<style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
  text-align: center; color: #2c3e50;margin-top: 60px;}
#app  img{width: 40px;height: 40px;}
.showBox{display: inline-block;color: #4385c7;}
p{margin: 0 auto;color: #4385c7;line-height: 40px;border: 1px solid #4385c7; width: 842px;}
</style>

main.js初始状态，没有修改所以没有贴过来
TitleGood组件就是一句话标题所以也没贴过来

• gthup地址
  vue专题还没有建仓库所以后期记得的话在补链接，真有需要的可以留言（哈哈这是我小白练手的）