vue3

vue3/my_project/package-lock.json

@@ -8,6 +8,7 @@
       "name": "my_project",
       "version": "0.0.0",
       "dependencies": {
+        "axios": "^1.7.2",
         "vite-plugin-vue-setup-extend": "^0.4.0",
         "vue": "^3.4.21"
       },
@@ -767,6 +768,21 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/axios": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.7.2.tgz",
+      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -782,6 +798,17 @@
         "balanced-match": "^1.0.0"
       }
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/computeds": {
       "version": "0.0.1",
       "resolved": "https://registry.npmmirror.com/computeds/-/computeds-0.0.1.tgz",
@@ -813,6 +840,14 @@
       "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
       "dev": true
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
@@ -866,6 +901,38 @@
       "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
@@ -920,6 +987,25 @@
         "node": ">= 0.10.0"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "9.0.4",
       "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.4.tgz",
@@ -1051,6 +1137,11 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/read-package-json-fast": {
       "version": "3.0.2",
       "resolved": "https://registry.npmmirror.com/read-package-json-fast/-/read-package-json-fast-3.0.2.tgz",

vue3/my_project/package.json

@@ -11,6 +11,7 @@
     "type-check": "vue-tsc --build --force"
   },
   "dependencies": {
+    "axios": "^1.7.2",
     "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue": "^3.4.21"
   },

vue3/my_project/src/App.vue

@@ -1,15 +1,17 @@
 <template>
   <div class="app">
-    <Demo11 v-if="isShow"></Demo11>
+    <Demo12></Demo12>
+    <!-- <Demo11 v-if="isShow"></Demo11> -->
     <!-- <Demo10 :list1="list"></Demo10> -->
   </div>
 </template>
 
 <script setup lang="ts" name="App">
-import Demo10 from './components/Demo10.vue';
-import Demo11 from './components/Demo11.vue';
+import Demo12 from './components/Demo12.vue'
+// import Demo10 from './components/Demo10.vue';
+// import Demo11 from './components/Demo11.vue';
 import {PersonList} from '@/types/Demo10.ts'
-import {reactive,ref,onMounted} from 'vue'
+import {reactive,ref, onMounted} from 'vue'
 let list = reactive<PersonList>([
     {id:1,name:"孙悟空",age:10,hobby:"吃饭"},
     {id:2,name:"猪八戒",age:20,hobby:"睡觉"},

vue3/my_project/src/components/Demo12.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="demo12">
+    <h2>求和：{{ sum }},放大十倍{{ bigNum }}</h2>
+    <button @click="getAdd">点我加一</button>
+    <hr />
+    <h2>显示一张图片</h2>
+    <ul>
+      <li v-for="(item, index) in imgList" :key="index">
+        <img :src="item.imgUrl" alt="" />
+      </li>
+    </ul>
+    <button @click="getMain">点我加一</button>
+  </div>
+</template>
+
+<script setup name="Demo12" lang="ts">
+import useSum from "@/hooks/useSum.ts";
+import useImg from "@/hooks/useImg.ts";
+const { sum, getAdd, bigNum } = useSum();
+const {imgList,getMain} = useImg();
+</script>
+
+<style scoped>
+ul {
+  overflow: hidden;
+}
+ul li {
+  float: left;
+  margin-left: 15px;
+}
+img {
+  width: 200px;
+}
+</style>

vue3/my_project/src/hooks/useImg.ts

@@ -0,0 +1,38 @@
+import axios from "axios";
+import { reactive } from "vue";
+
+export default function () {
+  let imgList = reactive([
+    {
+      imgUrl: "https://images.dog.ceo/breeds/pembroke/n02113023_4373.jpg",
+    },
+  ]);
+  // https://dog.ceo/api/breed/pembroke/images/random
+  async function getMain() {
+    try {
+      let main = await axios.get(
+        "https://dog.ceo/api/breed/pembroke/images/random"
+      );
+      console.log(main.data.message, "main");
+      imgList.push({ imgUrl: main.data.message });
+      console.log(imgList, "imgList");
+    } catch (err) {
+      console.log(err);
+    }
+  }
+  // function getMain() {
+  //   axios
+  //     .get("https://dog.ceo/api/breed/pembroke/images/random")
+  //     .then((res) => {
+  //       console.log(res, "res");
+  //     })
+  //     .catch((err) => {
+  //       console.log(err, "err");
+  //     });
+  // }
+
+  return {
+    imgList,
+    getMain,
+  };
+}

vue3/my_project/src/hooks/useSum.ts

@@ -0,0 +1,17 @@
+import { ref, computed, onMounted } from "vue";
+// 默认抛出
+export default function(){ 
+    let sum = ref(0);
+    function getAdd() {
+      sum.value += 1;
+    }
+    let bigNum = computed(() => {
+      return sum.value * 10;
+    });
+    onMounted(() => {
+      getAdd();
+    });
+    return {sum, bigNum,getAdd};
+};
+// 自定义抛出
+// export const aa ='1';

vue3/my_project/src/types/Demo10.ts

@@ -5,4 +5,5 @@ export interface Persons {
     hobby: string,
 }
 
-export type PersonList = Array<Persons>;
+export type PersonList = Persons[];
+// export type PersonList = Array<Persons>;