基于VUE组件基本操作的小案例

在创建好的vue框架中实现小案例：案例效果如图：

 代码如下

App.vue

<template>
  <div id="app">
    <div class="top">
        <Top></Top>
    </div>
    <div class="body">
      <div class="left">
          <Left @get="get_1"></Left>
      </div>
      <div class="right">
           <component :is="messa" :msg="list">
             <span slot="s1">餐品种类表</span>
           </component>
      </div>
    </div>

  </div>
</template>

<script>
import Top from './components/top.vue'
import Left from './components/left.vue'
export default {
  name: 'App',
  components: {
    Top,
    Left,
  },
  methods:{
      get_1(value){
        if(value=="首页"){
          this.messa='Index'
        }else if(value=="餐品种类"){
          this.messa='List'
        }
       
      }
  }
}
</script>

<style>
*{
  margin: 0px;
  padding: 0px;
}
.top{
  background-color: red;
  height: 54px;
}
.left{
  width: 300px;
  height: calc(100vh - 54px);
  background-color: cornflowerblue;
  float: left;
}
.right{
  width: 1000px;
  height: 700px;
  background-color: darkorange;
  float: left;
  margin-left: 150px;
  margin-top: 80px;
}
h2{
  text-align: center;
}
</style>

在src下的components文件夹中创建以下文件

top.vue

<template>
     <div id="top_1">
         {{mass}}
     </div>
</template>

<script>
export default {
    data(){
        return{
            mass:"餐饮"
        }
    }
}
</script>

<style>
#top_1{
    text-align: center;
    font-size: 25px;
}
</style>

left.vue

<template>
     <div class="left_1">
         <ul>
             <li v-for="s in list" :key="s" @click="send(s)">{{s}}</li>
         </ul>
     </div>
</template>

<script>
export default {
    methods:{
       send(index){
          this.$emit("get",index)
       }
    },
    data(){
        return{
            list:[
                "首页",
                "餐品种类",
            ]
        }
    }
}
</script>

<style>
.left_1>ul{
  list-style: none;
}
.left_1 li{
    text-align: center;
    font-size: 25px;
    line-height: 60px;
    margin-top: 30px;
}
.left_1 li:hover{
    background-color: white;
    color: darkorange;
}
</style>

index.vue

<template>
     <div class="index">
         {{mess}}
     </div>
</template>

<script>
export default {
   data(){
       return{
           mess:"首页"
       }
   }
}
</script>

<style>
.index{
    font-size: 30px;
    text-align: center;
}
</style>

list.vue

<template>
    <div class="list">
        <h2>
            <slot name="s1"/>
        </h2>
        <table>
            <tr>
                <th>名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
            <tr v-for="(s,index) in list" :key="s.name">
                <td>{{s.name}}</td>
                <td>{{s.price}}</td>
                <td>{{s.num}}</td>
                <td><button @click="del(index)">下架</button></td>
            </tr>
        </table>
    </div>
</template>

<script>
export default {
    methods:{
         del(index){
             this.list.splice(index,1);
         }
    },
  data(){
      return{
          list:[
              {
                  name:"麻婆豆腐",
                  price:"8.0",
                  num:"123"
              },
              {
                  name:"红烧肉",
                  price:"25.0",
                  num:"60"
              },
              {
                  name:"西红柿炒鸡蛋",
                  price:"12.0",
                  num:"80"
              },
              {
                  name:"青椒炒肉",
                  price:"18.0",
                  num:"98"
              },
              
          ]
      }
  }
}
</script>

<style>
.list>table{
    width: 600px;
    margin: 40px auto;
    background-color: black;
}
.list>table td,th{
    line-height: 50px;
    text-align: center;
    font-size: 23px;
    background-color: white;
    
}
</style>

案例完成后可实现点击左侧的首页与餐品种类，进行首页与餐品种类的切换