开始学习Vuex

20_脚手架/vue_code/src/App.vue

@@ -1,55 +1,14 @@
 <template>
-  <div class="container">
-    <Category title="美食">
-      <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>
+    <Count/>
   </div>
 </template>
 
 <script>
-import Category from "@/components/Category.vue";
+import Count from "@/components/Count.vue";
 
 export default {
   name: "App",
-  components: {Category},
-  data() {
-    return {
-      foods: ['火锅', '烧烤', '小龙虾', '牛排'],
-      games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],
-      films: ['《教父》', '《拆弹专家》', '《你好李焕英》', '《哈哈》']
-    }
-  }
+  components: {Count}
 }
 </script>
-
-<style>
-.container, .more {
-  display: flex;
-  justify-content: space-around;
-}
-h4 {
-  text-align: center;
-}
-</style>

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>

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>