开始学习Vuex

2 years ago · ac77148e1b
parent 1bb4f6035c
commit ac77148e1b
3 changed files with 24 additions and 77 deletions
--- a/20_脚手架/vue_code/src/App.vue
+++ b/20_脚手架/vue_code/src/App.vue
@ -1,55 +1,14 @@
 <template>
-  <div class="container">
+  <div>
-    <Category title="美食">
+    <Count/>
      <img slot="slot1" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
      <a slot="slot2" href="https://www.baidu.com">获取更多信息</a>
    </Category>
    <Category title="游戏">
      <ul slot="slot1">
        <li v-for="(value, index) in games" :key="index">{{ value }}</li>
      </ul>
      <div slot="slot2" class="more">
        <a href="https://www.baidu.com">单机游戏</a>
        <a href="https://www.baidu.com">网络游戏</a>
      </div>
    </Category>
    <Category title="电影">
      <video slot="slot1" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
      <template v-slot:slot2>
        <div class="more">
          <a href="https://www.baidu.com">经典</a>
          <a href="https://www.baidu.com">热门</a>
          <a href="https://www.baidu.com">推荐</a>
        </div>
        <h4>欢迎观看</h4>
      </template>
    </Category>
  </div>
 </template>
 <script>
-import Category from "@/components/Category.vue";
+import Count from "@/components/Count.vue";
 export default {
  name: "App",
-  components: {Category},
+  components: {Count}
  data() {
    return {
      foods: ['火锅', '烧烤', '小龙虾', '牛排'],
      games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],
      films: ['《教父》', '《拆弹专家》', '《你好李焕英》', '《哈哈》']
    }
  }
 }
 </script>
 <style>
 .container, .more {
  display: flex;
  justify-content: space-around;
 }
 h4 {
  text-align: center;
 }
 </style>
--- a/20_脚手架/vue_code/src/components/Category.vue
+++ b/20_脚手架/vue_code/src/components/Category.vue
@ -1,32 +0,0 @@
 <template>
  <div class="category">
    <h3>{{ title }}分类</h3>
    <slot name="slot1">slot默认值1</slot>
    <slot name="slot2">slot默认值2</slot>
  </div>
 </template>
 <script>
 export default {
  name: "Category",
  // props: ['title', 'listData']
 }
 </script>
 <style scoped>
  .category {
    background-color: skyblue;
    width: 200px;
    height: 300px;
  }
  h3 {
    text-align: center;
    background-color: orange;
  }
  img {
    width: 100%
  }
  video {
    width: 100%;
  }
 </style>
--- a/20_脚手架/vue_code/src/components/Count.vue
+++ b/20_脚手架/vue_code/src/components/Count.vue
@ -0,0 +1,20 @@
 <template>
  <div>
    <h1>当前求和为：？？？</h1>
    <select>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button>+</button>
    <button>-</button>
    <button>当前求和为奇数再加</button>
    <button>等一等再加</button>
  </div>
 </template>
 <script>
 export default {
  name: "Count",
 }
 </script>