vue3

15.vue3/project1/package-lock.json

@@ -8,6 +8,7 @@
       "name": "project1",
       "version": "0.0.0",
       "dependencies": {
+        "axios": "^1.7.9",
         "vite-plugin-vue-setup-extend": "^0.4.0",
         "vue": "^3.5.13"
       },
@@ -1596,6 +1597,23 @@
         "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==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.7.9.tgz",
+      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
+      "license": "MIT",
+      "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",
@@ -1693,6 +1711,18 @@
       ],
       "license": "CC-BY-4.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==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -1828,6 +1858,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.80",
       "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.80.tgz",
@@ -1956,6 +1995,40 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fs-extra": {
       "version": "11.2.0",
       "resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-11.2.0.tgz",
@@ -2273,6 +2346,27 @@
         "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==",
+      "license": "MIT",
+      "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==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "9.0.5",
       "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.5.tgz",
@@ -2551,6 +2645,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "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==",
+      "license": "MIT"
+    },
     "node_modules/read-package-json-fast": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/read-package-json-fast/-/read-package-json-fast-4.0.0.tgz",

15.vue3/project1/package.json

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

15.vue3/project1/src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Demo16 x='哈哈' a=1 b=2  />
+    <Demo18/>
   <!-- 
     <Demo1 />
     <Demo2 />
@@ -16,6 +16,9 @@
     <Demo12/>
     <Demo13/>
     <Demo15/>
+    <Demo16 x='哈哈' a=1 b=2  />
+    <button @click="show">点击</button>
+    <Demo17 v-show='site'/>
   -->
   <!-- 
   <div> 
@@ -30,13 +33,16 @@
 <script setup lang="ts" name="App">
 import { ref, reactive } from "vue";
 // import {PersonList} from '@/types/demo16'
-let today = ref(12);
-
-let flower: any = ref(10);
-
+// let today = ref(12);
+let site = ref(true)
 function show() {
-  console.log(today.value, "flower");
+  site.value = false;
 }
+// let flower: any = ref(10);
+
+// function show() {
+//   console.log(today.value, "flower");
+// }
 // let list = []
 // let list = reactive([ 
 //   {
@@ -67,6 +73,8 @@ function show() {
 // import Demo13 from "./components/Demo13.vue";
 // import Demo14 from "./components/Demo14.vue";
 // import Demo15 from "./components/Demo15.vue";
-import Demo16 from "./components/Demo16.vue";
+// import Demo16 from "./components/Demo16.vue";
+// import Demo17 from "./components/Demo17.vue";
+import Demo18 from "./components/Demo18.vue";
 </script>
 <style lang="scss" scoped></style>

15.vue3/project1/src/components/Demo17.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <h3>生命周期</h3>
+    <!-- 
+        vue2:
+         初始:beforeCreate created
+         运行：
+            挂载：beforeMount mounted
+            更新：beforeUpdate updated
+         销毁:beforeDestroy destroyed
+
+        vue3:
+            初始：setup
+            挂载:onBeforeMount onMounted
+            更新:onBeforeUpdate,onUpdated
+            卸载:onBeforeUnMount,onUnMounted
+     -->
+     {{flower}}
+     <button @click="changeType">换个品类</button>
+  </div>
+</template>
+
+<script setup lang='ts' name="Demo17">
+import { ref, onBeforeMount,onMounted,onBeforeUpdate,onUpdated, onBeforeUnmount,onUnmounted} from 'vue'
+let flower = ref<string>('花朵')
+console.log("哈哈")
+onBeforeMount(()=>{
+    console.log("挂载前")
+}) 
+onMounted(()=>{
+    console.log("挂载后")
+})
+onBeforeUpdate(()=>{
+    console.log("更新前")
+})
+onUpdated(()=>{
+    console.log("更新后")
+})
+onBeforeUnmount(()=>{
+    console.log("卸载前")
+})
+onUnmounted(()=>{
+    console.log("卸载后")
+})
+function changeType() {
+    flower.value = '牡丹'
+}
+</script>
+<style lang='scss' scoped>
+
+</style>

15.vue3/project1/src/components/Demo18.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <h3>自定义hooks</h3>
+    <p>当前数值是：{{num}},放大十倍{{num1}}</p>
+    <button @click="addNum">点击+1</button>
+    <br>
+    <img v-for="(item,index) in list" :key='index'  :src="item" alt="">
+    <br>
+    <button @click="addImg">添加</button>
+  </div>
+</template>
+
+<script setup>
+import useList from '@/hooks/useList';
+import useCount from '@/hooks/useCount';
+const {list,addImg} = useList()
+const {num,num1,addNum} = useCount()
+</script>
+<style scoped>
+img {
+    width: 200px;
+    height: 200px;
+    margin-left: 15px;
+}
+</style>

15.vue3/project1/src/hooks/useCount.ts

@@ -0,0 +1,12 @@
+import { ref, computed} from 'vue'
+
+export default function() {
+    let num = ref(1);
+    let num1 = computed(()=>{
+        return 10 * num.value    
+    });
+    function addNum() {
+      num.value++;
+    }
+    return {num,num1,addNum}
+}

15.vue3/project1/src/hooks/useList.ts

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