Home Explore Help
Sign In
qw
/
soilgd
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

新增前端测试代码与 xs.py 脚本

qw 1 week ago
parent
5cfcc5b760
commit
410998fa94
43 changed files with 1842 additions and 0 deletions
Split View Show Diff Stats
  1. 41 0
      xs.py
  2. 25 0
      前端/css/font-family设置字体系列.html
  3. 22 0
      前端/css/font-size字号大小.html
  4. 28 0
      前端/css/font-weight字体粗细.HTML
  5. 27 0
      前端/css/多类名的使用场景.html
  6. BIN
      前端/html/图片/pic.jpeg
  7. BIN
      前端/html/图片/下 拉 (1).png
  8. BIN
      前端/html/图片/头像 女孩.png
  9. BIN
      前端/html/图片/头像 男孩.png
  10. 84 0
      前端/html/新闻页面.html
  11. 115 0
      前端/html/注册页面.html
  12. 44 0
      前端/html/练习.html
  13. 13 0
      前端/html/练习1.html
  14. 76 0
      前端/vue3/测试/src/components/Vue3的生命周期.vue
  15. 27 0
      前端/vue3/测试/src/components/Vue3的生命周期的父组件.vue
  16. 58 0
      前端/vue3/测试/src/components/computed计算属性.vue
  17. 14 0
      前端/vue3/测试/src/components/hooks/useDof.ts
  18. 22 0
      前端/vue3/测试/src/components/hooks/useSum.ts
  19. 48 0
      前端/vue3/测试/src/components/props的使用.vue
  20. 31 0
      前端/vue3/测试/src/components/props的使用的父组件.vue
  21. 62 0
      前端/vue3/测试/src/components/reactive组件.vue
  22. 59 0
      前端/vue3/测试/src/components/ref创建_基本类型的响应式数据.vue
  23. 62 0
      前端/vue3/测试/src/components/ref创建_对象类型的响应式数据.vue
  24. 67 0
      前端/vue3/测试/src/components/ref对比reactive.vue
  25. 70 0
      前端/vue3/测试/src/components/toRefs与toRef.vue
  26. 72 0
      前端/vue3/测试/src/components/watchEffect.vue
  27. 49 0
      前端/vue3/测试/src/components/watch监视_情况一.vue
  28. 59 0
      前端/vue3/测试/src/components/watch监视_情况三.vue
  29. 59 0
      前端/vue3/测试/src/components/watch监视_情况二.vue
  30. 68 0
      前端/vue3/测试/src/components/watch监视_情况五.vue
  31. 78 0
      前端/vue3/测试/src/components/watch监视_情况四.vue
  32. 35 0
      前端/vue3/测试/src/components/回顾TS中的 接口 泛型_自定义类型.vue
  33. 71 0
      前端/vue3/测试/src/components/对路由的理解/App.vue
  34. 30 0
      前端/vue3/测试/src/components/对路由的理解/pages/About.vue
  35. 28 0
      前端/vue3/测试/src/components/对路由的理解/pages/Detail.vue
  36. 19 0
      前端/vue3/测试/src/components/对路由的理解/pages/Home.vue
  37. 72 0
      前端/vue3/测试/src/components/对路由的理解/pages/News.vue
  38. 22 0
      前端/vue3/测试/src/components/对路由的理解/路由 基本切换效果/Header.vue
  39. 52 0
      前端/vue3/测试/src/components/标签的ref属性.vue
  40. 38 0
      前端/vue3/测试/src/components/自定义Hooks.vue
  41. 40 0
      前端/vue3/测试/src/components/路由 编程式路由导航.vue
  42. 45 0
      前端/vue3/测试/src/router/router.ts
  43. 10 0
      前端/vue3/测试/src/types/index.ts

+ 41 - 0
xs.py
View File 

@@ -0,0 +1,41 @@
 
+import requests
 
+
 
+# 登录信息
 
+login_url = 'https://win.uad360.com'  # 假设这是登录的URL
 
+test_account = {
 
+    'username': 'admin',
 
+    'password': 'pc9527..'
 
+}
 
+
 
+# 创建会话
 
+session = requests.Session()
 
+
 
+def login():
 
+    """尝试登录"""
 
+    response = session.post(login_url, data=test_account)
 
+    if response.status_code == 200:
 
+        print("登录成功")
 
+    else:
 
+        print("登录失败")
 
+    return response
 
+
 
+def logout():
 
+    """尝试登出"""
 
+    # 这里应该替换为实际的登出URL
 
+    response = session.get('https://win.uad360.com')
 
+    if response.status_code == 200:
 
+        print("登出成功")
 
+    else:
 
+        print("登出失败")
 
+    return response
 
+
 
+
 
+def access_page():
 
+    pass
 
+
 
+
 
+if __name__ == "__main__":
 
+    login_response = login()
 
+    if login_response.status_code == 200:  # 如果登录成功
 
+        access_page()
 
+        logout()

+ 25 - 0
前端/css/font-family设置字体系列.html
View File 

@@ -0,0 +1,25 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        h2 {
 
+            font-family: '微软雅黑';
 
+        }
 
+        p {
 
+            font-family: 'Microsoft YaHei';
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <h2 class="">pink的秘密</h2>
 
+    <p>那一抹众人中最漂亮的颜色，</p>
 
+    <p>优雅,淡然,又那么心中清澈.</p>
 
+    <p>前端总是伴随着困难和犯错,</p>
 
+    <p>静心,坦然,攻克一个又一个.</p>
 
+    <p>拼死也要克服它，</p>
 
+    <p>这是pink的秘密也是老师最终的嘱托.</p>
 
+</body>
 
+</html>

+ 22 - 0
前端/css/font-size字号大小.html
View File 

@@ -0,0 +1,22 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        .p {
 
+            font-size:20px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <h2 class="">pink的秘密</h2>
 
+    <p>那一抹众人中最漂亮的颜色，</p>
 
+    <p>优雅,淡然,又那么心中清澈.</p>
 
+    <p>前端总是伴随着困难和犯错,</p>
 
+    <p>静心,坦然,攻克一个又一个.</p>
 
+    <p>拼死也要克服它，</p>
 
+    <p>这是pink的秘密也是老师最终的嘱托.</p>
 
+</body>
 
+</html>

+ 28 - 0
前端/css/font-weight字体粗细.HTML
View File 

@@ -0,0 +1,28 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        h2 {
 
+            font-family: '微软雅黑';
 
+        }
 
+        p {
 
+            font-weight: bold;
 
+        }
 
+        .q1 {
 
+            font-weight: 400;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <h2 class="q1">pink的秘密</h2>
 
+    <p>那一抹众人中最漂亮的颜色，</p>
 
+    <p>优雅,淡然,又那么心中清澈.</p>
 
+    <p>前端总是伴随着困难和犯错,</p>
 
+    <p>静心,坦然,攻克一个又一个.</p>
 
+    <p>拼死也要克服它，</p>
 
+    <p>这是pink的秘密也是老师最终的嘱托.</p>
 
+</body>
 
+</html>

+ 27 - 0
前端/css/多类名的使用场景.html
View File 

@@ -0,0 +1,27 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        .red {
 
+            /* 背景颜色 */
 
+            background-color: red;
 
+        }
 
+        .green {
 
+            /* 背景颜色 */
 
+            background-color: green;
 
+        }
 
+        .width {
 
+            width: 100px;
 
+            height: 100px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="red   width"></div>
 
+    <div class="green   width"></div>
 
+    <div class="red   width"> </div>
 
+</body>
 
+</html>

BIN
前端/html/图片/pic.jpeg
View File


BIN
前端/html/图片/下 拉 (1).png
View File


BIN
前端/html/图片/头像 女孩.png
View File


BIN
前端/html/图片/头像 男孩.png
View File


+ 84 - 0
前端/html/新闻页面.html
View File 

@@ -0,0 +1,84 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <title>Document</title>
 
+    <style>
 
+      body {
 
+        font: 16px/28px "Microsoft YaHei";
 
+      }
 
+      h1 {
 
+        font-weight: 400;
 
+        text-align: center;
 
+      }
 
+      a {
 
+        text-decoration: none;
 
+      }
 
+      h4 {
 
+        text-align: center;
 
+      }
 
+      .gay {
 
+        color: #88888888;
 
+        font-size: 12px;
 
+        text-align: center;
 
+      }
 
+      p {
 
+        text-indent: 2em;
 
+      }
 
+      .search {
 
+        width: 170px;
 
+      }
 
+      .btn {
 
+        font-weight: 700;
 
+      }
 
+      .footer {
 
+        color: #88888888;
 
+        font-size: 12px;
 
+      }
 
+    </style>
 
+  </head>
 
+  <body>
 
+    <h1>北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>
 
+    <div>
 
+      <div class="gay">
 
+        2019-07-03 16:31:47 来源: <a href="#">中国天气网　</a>
 
+        <input type="text" placeholder="请输入查询条件" class="search" />
 
+        <button class="btn">查询</button>
 
+      </div>
 
+      <hr />
 
+      <p>
 
+        中国天气网讯
 
+        今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地
 
+        气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4
 
+        日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最
 
+        高气温还有望创今年以来的新高。
 
+      </p>
 
+      <h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日</h4>
 
+      <p style="text-align: center">
 
+        <img src="./图片/pic.jpeg" alt="" />
 
+      </p>
 
+      <p>
 
+        今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北
 
+        京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。
 
+      </p>
 
+      <p>
 
+        在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部
 
+        分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分
 
+        别高达66.6℃和66.5℃。
 
+      </p>
 
+      <h4>明日热度再升级！京津冀携手冲击38℃+</h4>
 
+      <p>
 
+        中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升
 
+        级，并进入鼎盛阶段，高温强度和范围都将发展到最强。明天，北京南部、天津大部、河北中部和南
 
+        部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。
 
+      </p>
 
+      <p>
 
+        不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当
 
+        地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧
 
+        数据支持/王伟跃 胡啸 审核/刘文 静 张方丽）
 
+      </p>
 
+      <p class="footer">本文来源：中国天气网 责任编辑：刘京_NO5631</p>
 
+    </div>
 
+  </body>
 
+</html>

+ 115 - 0
前端/html/注册页面.html
View File 

@@ -0,0 +1,115 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <title>Document</title>
 
+  </head>
 
+  <body>
 
+    <h2>青春不常在，抓紧谈恋爱</h2>
 
+    <table width="500">
 
+      <tr>
 
+        <td>性别：</td>
 
+        <td>
 
+          <input type="radio" name="sex" id="nan" /> <label for="nan"><img src="./图片/头像 男孩.png" alt="男" width="35px" />男</label>
 
+          <input type="radio" name="sex" id="nv" /> <label for="nv"><img src="./图片/头像 女孩.png" alt="女" width="35px" />女</label>
 
+        </td>
 
+      </tr>
 
+      <tr>
 
+        <td>生日：</td>
 
+        <td>
 
+            <select>
 
+              <option>--请选择年--</option>
 
+              <option>山东</option>
 
+              <option>北京</option>
 
+              <option>天津</option>
 
+              <option>火星</option>
 
+            </select>
 
+            <select>
 
+                <option>--请选择月--</option>
 
+                <option>山东</option>
 
+                <option>北京</option>
 
+                <option>天津</option>
 
+                <option>火星</option>
 
+              </select>
 
+              <select>
 
+                <option>--请选择日--</option>
 
+                <option>山东</option>
 
+                <option>北京</option>
 
+                <option>天津</option>
 
+                <option>火星</option>
 
+              </select>
 
+        </td>
 
+      </tr>
 
+      <tr>
 
+        <td>所在地区：</td>
 
+        <td>
 
+          <input type="text" value="北京"> 
+        </td>
 
+      </tr>
 
+      <tr>
 
+        <td>婚姻状态：</td>
 
+        <td>
 
+          <input type="radio" name="marry" id="Single" checked="checked"> <label for="Single">未婚</label>
 
+          <input type="radio" name="marry" id="Married"> <label for="Married">己婚</label>
 
+          <input type="radio" name="marry" id="Divorced"> <label for="Divorced">离婚</label>
 
+        </td>
 
+      </tr>
 
+      <tr>
 
+        <td>学历：</td>
 
+        <td>
 
+            <input type="text" value="幼儿园">
 
+        </td>
 
+      </tr>
 
+      <tr>
 
+        <td>喜欢的类型：</td>
 
+        <td>
 
+          <input type="radio" name="sex" id="Alluring" checked="checked"> <label for="Alluring">妩媚的</label>
 
+          <input type="radio" name="sex" id="Cute"> <label for="Cute">可爱的</label>
 
+          <input type="radio" name="sex" id="Pretty boys"> <label for="Pretty boys">小鲜肉</label>
 
+          <input type="radio" name="sex" id="Older but still charming men"> <label for="Older but still charming men">老腊肉</label>
 
+          <input type="radio" name="sex" id="Like all of them"> <label for="Like all of them">都喜欢</label>
 
+        </td>
 
+      </tr>
 
+      <tr>
 
+        <td>个人介绍：</td>
 
+        <td>
 
+            <textarea name="" id="">个人简介</textarea>
 
+        </td>
 
+      </tr>
 
+      <tr>
 
+        <td></td>
 
+        <td>
 
+            <input type="submit" value="免费注册">
 
+            <input type="reset" value="重置注册">
 
+        </td>
 
+      </tr>
 
+      <tr>
 
+        <td></td>
 
+        <td>
 
+          <input type="checkbox" checked="checked" /> 我同意注册条款和会员加入标准
 
+        </td>
 
+      </tr>
 
+      <tr>
 
+        <td></td>
 
+        <td>
 
+          <a href="#">我是会员，立即登录</a>
 
+        </td>
 
+      </tr>
 
+      <tr>
 
+        <td></td>
 
+        <td>
 
+          <h4>我承诺</h4>
 
+          <ul>
 
+            <li>年满18岁、单身</li>
 
+            <li>抱着严肃的态度</li>
 
+            <li>真诚寻找另一半</li>
 
+          </ul>
 
+        </td>
 
+      </tr>
 
+      <div>
 
+        <frame>
 
+      </div>
 
+    </table>
 
+  </body>
 
+</html>

+ 44 - 0
前端/html/练习.html
View File 

@@ -0,0 +1,44 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <h2>青春不常在，抓紧谈恋爱</h2>
 
+  <table width="500">
 
+    <tr>
 
+      <td>性别：</td>
 
+      <td>
 
+        <input type="radio" name="sex" id="nan"><label for="nan"><img src="./图片/头像 男孩.png" alt="男" width="35px">男</label>
 
+        <input type="radio" name="sex" id="nv"><label for="nv"><img src="./图片/头像 女孩.png" alt="女" width="35px">女</label>
 
+      </td>
 
+    </tr>
 
+    <tr>
 
+      <td>生日：</td>
 
+      <td>
 
+        <select name="" id="">
 
+          <option value="">--请选择年--</option>
 
+          <option value="">山东</option>
 
+          <option value="">北京</option>
 
+          <option value="">天津</option>
 
+          <option value="">火星</option>
 
+        </select>
 
+      </td>
 
+    </tr>
 
+    <tr>
 
+      <td>所在地区：</td>
 
+      <td>
 
+        <input type="text" value="北京">
 
+      </td>
 
+    </tr>
 
+    <tr>
 
+      <td>所在地区：</td>
 
+      <td>
 
+        <input type="text" value="北京">
 
+      </td>
 
+    </tr>
 
+  </table>
 
+</body>
 
+</html>

+ 13 - 0
前端/html/练习1.html
View File 

@@ -0,0 +1,13 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <table>
 
+        
+    </table>
 
+</body>
 
+</html>

+ 76 - 0
前端/vue3/测试/src/components/Vue3的生命周期.vue
View File 

@@ -0,0 +1,76 @@
 
+<!-- eslint-disable vue/multi-word-component-names -->
 
+<script setup lang="ts" name="TheWelcome">
 
+import {
 
+  ref,
 
+  onBeforeMount,
 
+  onMounted,
 
+  onBeforeUpdate,
 
+  onUpdated,
 
+  onBeforeUnmount,
 
+  onUnmounted,
 
+} from "vue";
 
+
 
+// eslint-disable-next-line prefer-const
 
+let sum = ref(0);
 
+function add() {
 
+  sum.value += 1;
 
+}
 
+// 创建
 
+console.log("创建");
 
+
 
+// 挂载前
 
+onBeforeMount(() => {
 
+  console.log("挂载前");
 
+});
 
+
 
+// 挂载完成
 
+onMounted(() => {
 
+  console.log("挂载完成");
 
+});
 
+
 
+// 更新前
 
+onBeforeUpdate(() => {
 
+  console.log("更新前");
 
+});
 
+
 
+// 更新完成
 
+onUpdated(() => {
 
+  console.log("更新完成");
 
+});
 
+
 
+// 卸载前
 
+onBeforeUnmount(() => {
 
+  console.log("卸载前");
 
+});
 
+
 
+// 卸载完成
 
+onUnmounted(() => {
 
+  console.log("卸载完成");
 
+});
 
+</script>
 
+
 
+<template>
 
+  <div class="TheWelcome">
 
+    <h2>当前求和为: {{ sum }}</h2>
 
+    <button @click="add">点击加一</button>
 
+  </div>
 
+</template>
 
+
 
+<style scoped>
 
+.TheWelcome {
 
+  background-color: skyblue; /* 设置背景颜色 */
 
+  box-shadow: 0 0 10px; /* 添加阴影效果 */
 
+  border-radius: 10px; /* 设置圆角半径 */
 
+  padding: 20px; /* 设置内边距 */
 
+}
 
+
 
+/* 设置按钮之间的间距 */
 
+button {
 
+  margin: 0 5px;
 
+}
 
+
 
+/* 这个样式规则似乎没有用到，可以考虑移除或注释掉 */
 
+li {
 
+  font-size: 20px;
 
+}
 
+</style>

+ 27 - 0
前端/vue3/测试/src/components/Vue3的生命周期的父组件.vue
View File 

@@ -0,0 +1,27 @@
 
+<!-- eslint-disable vue/multi-word-component-names -->
 
+<script setup lang="ts">
 
+import TheWelcome from './components/props的使用.vue'; // 确保路径正确
 
+import { ref, onMounted} from "vue";
 
+
 
+let lisShow = ref(true)
 
+
 
+// 挂载完成
 
+onMounted(() => {
 
+  console.log("挂载完成");
 
+});
 
+</script>
 
+
 
+<template>
 
+  <div class="app">
 
+    <TheWelcome v-if="isShow" />
 
+  </div>
 
+</template>
 
+
 
+<style scoped>
 
+.app {
 
+  background-color: #ddd;
 
+  box-shadow: 0 0 10px;
 
+  border-radius: 10px;
 
+  padding: 20px;
 
+}
 
+</style>

+ 58 - 0
前端/vue3/测试/src/components/computed计算属性.vue
View File 

@@ -0,0 +1,58 @@
 
+<!-- eslint-disable vue/multi-word-component-names -->
 
+
 
+<script lang="ts" setup name="TheWelcome">
 
+import { ref, computed } from "vue";
 
+
 
+// 定义两个响应式引用
 
+const firstName = ref("zhang");
 
+const lastName = ref("san");
 
+
 
+// 定义一个带有 `get` 和 `set` 方法的计算属性
 
+const fullName = computed({
 
+  get: () => {
 
+    return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value;
 
+  },
 
+  set(val) {
 
+    const [str1, str2] = val.split('-')
 
+    firstName.value = str1
 
+    lastName.value = str2
 
+  }
 
+});
 
+
 
+function changeFullName() {
 
+  // 直接修改计算属性的值会触发 `set` 方法
 
+  fullName.value = 'qing-wen';
 
+}
 
+</script>
 
+
 
+<template>
 
+  <div class="TheWelcome">
 
+    姓：<input type="text" v-model="firstName" /><br />
 
+    名：<input type="text" v-model="lastName" /><br />
 
+    全名：<span>{{ fullName }}</span>
 
+    <button @click="changeFullName">更改全名</button>
 
+  </div>
 
+</template>
 
+
 
+<style scoped>
 
+/*
 
+  .TheWelcome 类选择器，仅应用于当前组件内部的元素，
 
+  因为使用了`scoped`属性，确保样式不会影响到其他组件
 
+*/
 
+.TheWelcome {
 
+  background-color: skyblue; /* 设置背景颜色 */
 
+  box-shadow: 0 0 10px; /* 添加阴影效果 */
 
+  border-radius: 10px; /* 设置圆角半径 */
 
+  padding: 20px; /* 设置内边距 */
 
+}
 
+
 
+/* 设置按钮之间的间距 */
 
+button {
 
+  margin: 0 5px;
 
+}
 
+
 
+/* 这个样式规则似乎没有用到，可以考虑移除或注释掉 */
 
+li {
 
+  font-size: 20px;
 
+}
 
+</style>

+ 14 - 0
前端/vue3/测试/src/components/hooks/useDof.ts
View File 

@@ -0,0 +1,14 @@
 
+import { ref } from "vue";
 
+
 
+export default function () {
 
+// 定义响应式变量
 
+// eslint-disable-next-line prefer-const
 
+let sum = ref(0);
 
+
 
+// 点击加一
 
+function add() {
 
+  sum.value += 1;
 
+}
 
+//向外部提供东西
 
+return{sum,add}
 
+}

+ 22 - 0
前端/vue3/测试/src/components/hooks/useSum.ts
View File 

@@ -0,0 +1,22 @@
 
+import { reactive } from "vue";
 
+import axios from "axios";
 
+
 
+export default function () {
 
+  // eslint-disable-next-line prefer-const
 
+let dogList = reactive<string[]>([
 
+  'https://images.dog.ceo/breeds/pembroke/n02113023_8021.jpg'
 
+]);
 
+
 
+// 加载随机狗图片
 
+async function loadRandomDog() {
 
+  try {
 
+    const response = await axios.get('https://dog.ceo/api/breed/pembroke/images/random');
 
+    const imageUrl = response.data.message; // 获取图片 URL
 
+    dogList.push(imageUrl); // 将图片 URL 添加到 dogList
 
+  } catch (error) {
 
+    console.error("加载狗图片失败:", error);
 
+  }
 
+}
 
+//向外部提供东西
 
+return{dogList,loadRandomDog}
 
+}

+ 48 - 0
前端/vue3/测试/src/components/props的使用.vue
View File 

@@ -0,0 +1,48 @@
 
+<!-- eslint-disable vue/multi-word-component-names -->
 
+<script setup lang="ts" name="TheWelcome">
 
+import { defineProps, withDefaults } from "vue";
 
+import { type persos } from "@/types";
 
+
 
+// 只接收list/
 
+// defineProps(['list'])
 
+
 
+// 接收list+限制类型
 
+// defineProps<{list:persos}>()
 
+
 
+// 接收list + 限制类型 + 限制必要性 +指定默认值
 
+withDefaults(defineProps<{list?:persos}>(),{
 
+  list:() => [{id:'qwe1', name:'请问饿1', age: 19}]
 
+})
 
+// 接收list，同时将props保存起来
 
+// let x = defineProps(['a', 'list'])
 
+
 
+// console.log(x);
 
+
 
+</script>
 
+
 
+<template>
 
+  <div class="TheWelcome">
 
+    <ul>
 
+      <li v-for="e in list" :key="e.id">{{ e.name }} -- {{ e.age }}</li>
 
+    </ul>
 
+  </div>
 
+</template>
 
+
 
+<style scoped>
 
+.TheWelcome {
 
+  background-color: skyblue; /* 设置背景颜色 */
 
+  box-shadow: 0 0 10px; /* 添加阴影效果 */
 
+  border-radius: 10px; /* 设置圆角半径 */
 
+  padding: 20px; /* 设置内边距 */
 
+}
 
+
 
+/* 设置按钮之间的间距 */
 
+button {
 
+  margin: 0 5px;
 
+}
 
+
 
+/* 这个样式规则似乎没有用到，可以考虑移除或注释掉 */
 
+li {
 
+  font-size: 20px;
 
+}
 
+</style>

+ 31 - 0
前端/vue3/测试/src/components/props的使用的父组件.vue
View File 

@@ -0,0 +1,31 @@
 
+<!-- eslint-disable vue/multi-word-component-names -->
 
+<script setup lang="ts">
 
+import TheWelcome from './components/props的使用.vue'; // 确保路径正确
 
+import {  reactive} from "vue";
 
+import { type persos } from "@/types";
 
+
 
+let x=9
 
+
 
+let PersonList = reactive<persos>([
 
+  {id: 'qw1', name: '请问1', age:12},
 
+  {id: 'qw2', name: '请问2', age:13},
 
+  {id: 'qw3', name: '请问3', age:14},
 
+  {id: 'qw4', name: '请问4', age:15, X:9}
 
+])
 
+</script>
 
+
 
+<template>
 
+  <div class="app">
 
+    <h2 a="1+1" :b="1+1" :d="x" ref="qwe">测试</h2>
 
+    <TheWelcome a="哈哈" :list="PersonList"/>
 
+  </div>
 
+</template>
 
+
 
+<style scoped>
 
+.app {
 
+  background-color: #ddd;
 
+  box-shadow: 0 0 10px;
 
+  border-radius: 10px;
 
+  padding: 20px;
 
+}
 
+</style>

+ 62 - 0
前端/vue3/测试/src/components/reactive组件.vue
View File 

@@ -0,0 +1,62 @@
 
+<!-- eslint-disable vue/multi-word-component-names -->
 
+
 
+<script lang="ts" setup  name="TheWelcome">
 
+import { reactive } from 'vue';
 
+
 
+// 使用`reactive`创建响应式对象
 
+const car = reactive({
 
+  brand: "奔驰", 
+  price: 100
 
+});
 
+
 
+// 游戏列表
 
+const gamesList = reactive([
 
+  {id: 'ays1', name: '王者2'},
 
+  {id: 'ays2', name: '王者3'},
 
+  {id: 'ays3', name: '王者4'},
 
+]);
 
+
 
+function changePrice() {
 
+  car.price += 10;
 
+}
 
+function changeFirstGame() {
 
+  gamesList[0].name = '枪战';
 
+}
 
+</script>
 
+
 
+<template>
 
+  <!-- 主要容器，应用了`.HelloWorld`类以应用样式 -->
 
+  <div class="HelloWorld">
 
+    <h2>汽车信息：一辆{{ car.brand }}车, 价值{{ car.price }}万</h2>
 
+    <button @click="changePrice">增加价格</button>
 
+    <br>
 
+    <h2>游戏列表：</h2>
 
+    <ul>
 
+      <li v-for="g in gamesList" :key="g.id">
 
+        {{ g.name }}
 
+      </li>
 
+    </ul>
 
+    <button @click="changeFirstGame">修改游戏</button>
 
+  </div>
 
+</template>
 
+
 
+<style scoped>
 
+/*
 
+  .HelloWorld 类选择器，仅应用于当前组件内部的元素，
 
+  因为使用了`scoped`属性，确保样式不会影响到其他组件
 
+*/
 
+.HelloWorld {
 
+  background-color: skyblue; /* 设置背景颜色 */
 
+  box-shadow: 0 0 10px; /* 添加阴影效果 */
 
+  border-radius: 10px; /* 设置圆角半径 */
 
+  padding: 20px; /* 设置内边距 */
 
+}
 
+
 
+/* 设置按钮之间的间距 */
 
+button {
 
+  margin: 0 5px;
 
+}
 
+li {
 
+  font-size: 20px;
 
+}
 
+</style>

+ 59 - 0
前端/vue3/测试/src/components/ref创建_基本类型的响应式数据.vue
View File 

@@ -0,0 +1,59 @@
 
+<script setup lang="ts">
 
+import { ref } from 'vue';
 
+
 
+// 定义响应式变量
 
+const name = ref('请问');
 
+const age = ref(18);
 
+const tel = ref('12312312312');
 
+
 
+// 定义方法
 
+function changeName() {
 
+  name.value = 'qw';
 
+}
 
+
 
+function changeAge() {
 
+  age.value += 3;
 
+}
 
+
 
+function showTel() {
 
+  alert(tel.value);
 
+}
 
+</script>
 
+
 
+<template>
 
+  <!-- 主要容器，应用了`.TheWelcome`类以应用样式 -->
 
+  <div class="TheWelcome">
 
+    <!-- 动态显示用户的名字 -->
 
+    <h2>姓名：{{ name }}</h2>
 
+
 
+    <!-- 动态显示用户的年龄 -->
 
+    <h2>年龄：{{ age }}</h2>
 
+
 
+    <!-- 按钮，点击时调用`changeName`方法修改名字 -->
 
+    <button @click="changeName">点击修改名字</button>
 
+
 
+    <!-- 按钮，点击时调用`changeAge`方法增加年龄 -->
 
+    <button @click="changeAge">点击修改年龄</button>
 
+
 
+    <!-- 按钮，点击时调用`showTel`方法显示电话号码 -->
 
+    <button @click="showTel">点击查看号码</button>
 
+  </div>
 
+</template>
 
+
 
+<style scoped>
 
+/*
 
+  .TheWelcome 类选择器，仅应用于当前组件内部的元素，
 
+  因为使用了`scoped`属性，确保样式不会影响到其他组件
 
+*/
 
+.TheWelcome {
 
+  background-color: skyblue; /* 设置背景颜色 */
 
+  box-shadow: 0 0 10px;       /* 添加阴影效果 */
 
+  border-radius: 10px;        /* 设置圆角半径 */
 
+  padding: 20px;              /* 设置内边距 */
 
+}
 
+
 
+/* 设置按钮之间的间距 */
 
+button {
 
+  margin: 0 5px;
 
+}
 
+</style>

+ 62 - 0
前端/vue3/测试/src/components/ref创建_对象类型的响应式数据.vue
View File 

@@ -0,0 +1,62 @@
 
+<!-- eslint-disable vue/multi-word-component-names -->
 
+
 
+<script lang="ts" setup  name="TheWelcome">
 
+import { ref } from 'vue';
 
+
 
+// 使用`ref`创建响应式对象
 
+const car = ref({
 
+  brand: "奔驰", 
+  price: 100
 
+});
 
+
 
+// 游戏列表
 
+const gamesList = ref([
 
+  {id: 'ays1', name: '王者2'},
 
+  {id: 'ays2', name: '王者3'},
 
+  {id: 'ays3', name: '王者4'},
 
+]);
 
+
 
+function changePrice() {
 
+  car.value.price += 10;
 
+}
 
+function changeFirstGame() {
 
+  gamesList.value[0].name = '枪战';
 
+}
 
+</script>
 
+
 
+<template>
 
+  <!-- 主要容器，应用了`.HelloWorld`类以应用样式 -->
 
+  <div class="HelloWorld">
 
+    <h2>汽车信息：一辆{{ car.brand }}车, 价值{{ car.price }}万</h2>
 
+    <button @click="changePrice">增加价格</button>
 
+    <br>
 
+    <h2>游戏列表：</h2>
 
+    <ul>
 
+      <li v-for="game in gamesList" :key="game.id">
 
+        {{ game.name }}
 
+      </li>
 
+    </ul>
 
+    <button @click="changeFirstGame">修改游戏</button>
 
+  </div>
 
+</template>
 
+
 
+<style scoped>
 
+/*
 
+  .HelloWorld 类选择器，仅应用于当前组件内部的元素，
 
+  因为使用了`scoped`属性，确保样式不会影响到其他组件
 
+*/
 
+.HelloWorld {
 
+  background-color: skyblue; /* 设置背景颜色 */
 
+  box-shadow: 0 0 10px; /* 添加阴影效果 */
 
+  border-radius: 10px; /* 设置圆角半径 */
 
+  padding: 20px; /* 设置内边距 */
 
+}
 
+
 
+/* 设置按钮之间的间距 */
 
+button {
 
+  margin: 0 5px;
 
+}
 
+li {
 
+  font-size: 20px;
 
+}
 
+</style>

+ 67 - 0
前端/vue3/测试/src/components/ref对比reactive.vue
View File 

@@ -0,0 +1,67 @@
 
+<!-- eslint-disable vue/multi-word-component-names -->
 
+
 
+<script lang="ts" setup name="TheWelcome">
 
+import { reactive, ref } from 'vue';
 
+
 
+// 使用`reactive`创建响应式对象
 
+const car = reactive({
 
+  brand: "奔驰", 
+  price: 100
 
+});
 
+
 
+// 使用`ref`创建响应式数字
 
+const sum = ref(0);
 
+
 
+function changePrice() {
 
+  car.price += 10;
 
+}
 
+
 
+function changeCar() {
 
+  // 错误用法
 
+  //Object.assign(car, {brand: "马萨拉蒂", price: 10});
 
+  Object.assign(car,{brand: "马萨拉蒂", price: 10})
 
+}
 
+
 
+function changeBrand() {
 
+  car.brand = '宝马';
 
+}
 
+
 
+function changeSum() {
 
+  sum.value += 1;
 
+}
 
+</script>
 
+
 
+<template>
 
+  <!-- 主要容器，应用了`.HelloWorld`类以应用样式 -->
 
+  <div class="HelloWorld">
 
+    <h2>汽车信息：一辆{{ car.brand }}车, 价值{{ car.price }}万</h2>
 
+    <button @click="changePrice">增加价格</button>
 
+    <button @click="changeBrand">修改车型</button>
 
+    <button @click="changeCar">修改一辆车</button>
 
+    <hr>
 
+    <h2>当前求和：{{ sum }}</h2>
 
+    <button @click="changeSum">点击加一</button>
 
+  </div>
 
+</template>
 
+
 
+<style scoped>
 
+/*
 
+  .HelloWorld 类选择器，仅应用于当前组件内部的元素，
 
+  因为使用了`scoped`属性，确保样式不会影响到其他组件
 
+*/
 
+.HelloWorld {
 
+  background-color: skyblue; /* 设置背景颜色 */
 
+  box-shadow: 0 0 10px; /* 添加阴影效果 */
 
+  border-radius: 10px; /* 设置圆角半径 */
 
+  padding: 20px; /* 设置内边距 */
 
+}
 
+
 
+/* 设置按钮之间的间距 */
 
+button {
 
+  margin: 0 5px;
 
+}
 
+
 
+li {
 
+  font-size: 20px;
 
+}
 
+</style>

+ 70 - 0
前端/vue3/测试/src/components/toRefs与toRef.vue
View File 

@@ -0,0 +1,70 @@
 
+<!-- eslint-disable vue/multi-word-component-names -->
 
+
 
+<script lang="ts" setup name="TheWelcome">
 
+import { reactive, toRefs, toRef } from "vue";
 
+
 
+// 创建一个响应式对象
 
+const person = reactive({
 
+  name: "张三",
 
+  age: 18,
 
+});
 
+
 
+// 使用 `toRefs` 将响应式对象的属性转换为独立的响应式引用
 
+// eslint-disable-next-line prefer-const
 
+let { name, age } = toRefs(person);
 
+
 
+// eslint-disable-next-line prefer-const
 
+let rGreet = toRef(person, "age");
 
+
 
+// 更改 rGreet
 
+const onChangeGreet = () => {
 
+  rGreet.value = 41;
 
+};
 
+
 
+function changeName() {
 
+  // 修改名字，添加后缀 '~'
 
+  name.value += "~";
 
+}
 
+
 
+function changeAge() {
 
+  // 增加年龄
 
+  age.value += 2;
 
+}
 
+</script>
 
+
 
+<template>
 
+  <div class="TheWelcome">
 
+    <!-- 动态显示姓名和年龄 -->
 
+    <h2>姓名：{{ name }}</h2>
 
+    <h2>年龄：{{ age }}</h2>
 
+
 
+    <!-- 按钮触发相应的方法 -->
 
+    <button @click="changeName">修改名字</button>
 
+    <button @click="changeAge">修改年龄</button>
 
+    <h2>toRef-greet: {{ rGreet }}</h2>
 
+    <button @click="onChangeGreet">更换问候语</button>
 
+  </div>
 
+</template>
 
+
 
+<style scoped>
 
+/*
 
+  .TheWelcome 类选择器，仅应用于当前组件内部的元素，
 
+  因为使用了`scoped`属性，确保样式不会影响到其他组件
 
+*/
 
+.TheWelcome {
 
+  background-color: skyblue; /* 设置背景颜色 */
 
+  box-shadow: 0 0 10px; /* 添加阴影效果 */
 
+  border-radius: 10px; /* 设置圆角半径 */
 
+  padding: 20px; /* 设置内边距 */
 
+}
 
+
 
+/* 设置按钮之间的间距 */
 
+button {
 
+  margin: 0 5px;
 
+}
 
+
 
+/* 这个样式规则似乎没有用到，可以考虑移除或注释掉 */
 
+li {
 
+  font-size: 20px;
 
+}
 
+</style>

+ 72 - 0
前端/vue3/测试/src/components/watchEffect.vue
View File 

@@ -0,0 +1,72 @@
 
+<script setup lang="ts" name="TheWelcome">
 
+import { ref, watch, watchEffect } from "vue";
 
+// 假设你有一个用于发送请求的函数
 
+async function sendRequestToServer() {
 
+  // 实际应用中替换为真实的API调用
 
+  console.log("发送请求给服务器...");
 
+}
 
+
 
+// eslint-disable-next-line prefer-const
 
+let temp = ref(10);
 
+// eslint-disable-next-line prefer-const
 
+let height = ref(0);
 
+
 
+function changeTemp() {
 
+  temp.value += 10;
 
+}
 
+function changeHeight() {
 
+  height.value += 10;
 
+}
 
+
 
+watch([temp, height], (value) => {
 
+  console.log("温度或水位变化了", value);
 
+  // eslint-disable-next-line prefer-const
 
+  let [newTemp, newHeight] = value;
 
+  if (newTemp >= 60 || newHeight >= 80) {
 
+    sendRequestToServer();
 
+  }
 
+});
 
+
 
+// 用watchEffect实现，
 
+const stopWtach = watchEffect(() => {
 
+  // 室温达到50℃，或水位达到20cm，立刻联系服务器
 
+  if (temp.value >= 100 || height.value >= 80) {
 
+    console.log(document.getElementById("demo")?.innerText);
 
+    console.log("联系服务器");
 
+  }
 
+  // 水温达到100，或水位达到50，取消监视
 
+  if (temp.value === 200 || height.value === 100) {
 
+    console.log("清理了");
 
+    stopWtach();
 
+  }
 
+});
 
+</script>
 
+
 
+<template>
 
+  <div class="TheWelcome">
 
+    <h2>需求:当水温达到60度，或水位达到80cm时，给服务器发请求</h2>
 
+    <h2>当前水温：{{ temp }}℃</h2>
 
+    <h2>当前水位：{{ height }}cm</h2>
 
+    <button @click="changeTemp">水温加一</button>
 
+    <button @click="changeHeight">水位加一</button>
 
+  </div>
 
+</template>
 
+
 
+<style scoped>
 
+.TheWelcome {
 
+  background-color: skyblue; /* 设置背景颜色 */
 
+  box-shadow: 0 0 10px; /* 添加阴影效果 */
 
+  border-radius: 10px; /* 设置圆角半径 */
 
+  padding: 20px; /* 设置内边距 */
 
+}
 
+
 
+/* 设置按钮之间的间距 */
 
+button {
 
+  margin: 0 5px;
 
+}
 
+
 
+/* 这个样式规则似乎没有用到，可以考虑移除或注释掉 */
 
+li {
 
+  font-size: 20px;
 
+}
 
+</style>

+ 49 - 0
前端/vue3/测试/src/components/watch监视_情况一.vue
View File 

@@ -0,0 +1,49 @@
 
+<script lang="ts" setup name="TheWelcome">
 
+import { ref, watch } from "vue";
 
+
 
+// eslint-disable-next-line prefer-const
 
+let sum = ref(0)
 
+
 
+function changesum() {
 
+  sum.value += 2
 
+}
 
+
 
+//监视                          新数据   旧数据
 
+const stopWatch = watch(sum, (newValue, OldValue) => {
 
+  console.log('变化了', newValue, OldValue );
 
+  if(newValue >= 10) {
 
+    stopWatch()
 
+  }
 
+})
 
+</script>
 
+
 
+<template>
 
+  <div class="TheWelcome">
 
+    <h1>情况一:监视【ref】定义的【基本类型】数据</h1>
 
+    <h2>当前求和{{ sum }}</h2>
 
+    <button @click="changesum">点击加一</button>
 
+    </div>
 
+</template>
 
+
 
+<style scoped>
 
+/*
 
+  .TheWelcome 类选择器，仅应用于当前组件内部的元素，
 
+  因为使用了`scoped`属性，确保样式不会影响到其他组件
 
+*/
 
+.TheWelcome {
 
+  background-color: skyblue; /* 设置背景颜色 */
 
+  box-shadow: 0 0 10px; /* 添加阴影效果 */
 
+  border-radius: 10px; /* 设置圆角半径 */
 
+  padding: 20px; /* 设置内边距 */
 
+}
 
+
 
+/* 设置按钮之间的间距 */
 
+button {
 
+  margin: 0 5px;
 
+}
 
+
 
+/* 这个样式规则似乎没有用到，可以考虑移除或注释掉 */
 
+li {
 
+  font-size: 20px;
 
+}
 
+</style>

+ 59 - 0
前端/vue3/测试/src/components/watch监视_情况三.vue
View File 

@@ -0,0 +1,59 @@
 
+<script lang="ts" setup name="TheWelcome">
 
+import { reactive, watch } from "vue";
 
+
 
+// 定义一个响应式的对象
 
+const sum = reactive({
 
+  name: '请问',
 
+  age: 12
 
+});
 
+
 
+// 修改整个对象
 
+function changePerson() {
 
+  Object.assign(sum, {name: "马萨拉蒂", age: 10});
 
+}
 
+
 
+// 修改名称
 
+function changeName() {
 
+  sum.name = '而非';
 
+}
 
+
 
+// 增加年龄
 
+function changeAge() {
 
+  sum.age += 2;
 
+}
 
+
 
+// 情况三:监视【reactive】定义的【对象类型】数据，且默认是开启深度监视的
 
+watch(sum, (newValue, oldValue) => {
 
+  console.log('变化了', newValue, oldValue);
 
+}, {deep: true, immediate: true});
 
+</script>
 
+
 
+<template>
 
+  <div class="TheWelcome">
 
+    <h1>情况一:监视【reactive】定义的【对象类型】数据</h1>
 
+    <h2>姓名：{{ sum.name }}</h2>
 
+    <h2>年龄：{{ sum.age }}</h2>
 
+    <!-- 按钮触发不同的修改操作 -->
 
+    <button @click="changeName">修改名称</button>
 
+    <button @click="changeAge">修改年龄</button>
 
+    <button @click="changePerson">直接修改全部</button>
 
+  </div>
 
+</template>
 
+
 
+<style scoped>
 
+/*
 
+  .TheWelcome 类选择器，仅应用于当前组件内部的元素，
 
+  因为使用了`scoped`属性，确保样式不会影响到其他组件
 
+*/
 
+.TheWelcome {
 
+  background-color: skyblue; /* 设置背景颜色 */
 
+  box-shadow: 0 0 10px; /* 添加阴影效果 */
 
+  border-radius: 10px; /* 设置圆角半径 */
 
+  padding: 20px; /* 设置内边距 */
 
+}
 
+
 
+/* 设置按钮之间的间距 */
 
+button {
 
+  margin: 0 5px;
 
+}
 
+</style>

+ 59 - 0
前端/vue3/测试/src/components/watch监视_情况二.vue
View File 

@@ -0,0 +1,59 @@
 
+<script lang="ts" setup name="TheWelcome">
 
+import { ref, watch } from "vue";
 
+
 
+// 定义一个响应式的对象
 
+const sum = ref({
 
+  name: '请问',
 
+  age: 12
 
+});
 
+
 
+// 修改整个对象
 
+function changePerson() {
 
+  sum.value = {name: "马萨拉蒂", age: 10};
 
+}
 
+
 
+// 修改名称
 
+function changeName() {
 
+  sum.value.name = '而非';
 
+}
 
+
 
+// 增加年龄
 
+function changeAge() {
 
+  sum.value.age += 2;
 
+}
 
+
 
+// 使用 watch 监视 sum 对象的变化，使用 deep 选项监听深层次的变化
 
+watch(sum, (newValue, oldValue) => {
 
+  console.log('变化了', newValue, oldValue);
 
+}, {deep: true, immediate: true});
 
+</script>
 
+
 
+<template>
 
+  <div class="TheWelcome">
 
+    <h1>情况一:监视【ref】定义的【对象类型】数据</h1>
 
+    <h2>姓名：{{ sum.name }}</h2>
 
+    <h2>年龄：{{ sum.age }}</h2>
 
+    <!-- 按钮触发不同的修改操作 -->
 
+    <button @click="changeName">修改名称</button>
 
+    <button @click="changeAge">修改年龄</button>
 
+    <button @click="changePerson">直接修改全部</button>
 
+  </div>
 
+</template>
 
+
 
+<style scoped>
 
+/*
 
+  .TheWelcome 类选择器，仅应用于当前组件内部的元素，
 
+  因为使用了`scoped`属性，确保样式不会影响到其他组件
 
+*/
 
+.TheWelcome {
 
+  background-color: skyblue; /* 设置背景颜色 */
 
+  box-shadow: 0 0 10px; /* 添加阴影效果 */
 
+  border-radius: 10px; /* 设置圆角半径 */
 
+  padding: 20px; /* 设置内边距 */
 
+}
 
+
 
+/* 设置按钮之间的间距 */
 
+button {
 
+  margin: 0 5px;
 
+}
 
+</style>

+ 68 - 0
前端/vue3/测试/src/components/watch监视_情况五.vue
View File 

@@ -0,0 +1,68 @@
 
+<template>
 
+  <div class="sum">
 
+    <h1>情况五：监视上述的多个数据</h1>
 
+    <h2>姓名：{{ sum.name }}</h2>
 
+    <h2>年龄：{{ sum.age }}</h2>
 
+    <h2>汽车：{{ sum.car.c1 }}、{{ sum.car.c2 }}</h2>
 
+    <button @click="changeName">修改名字</button>
 
+    <button @click="changeAge">修改年龄</button>
 
+    <button @click="changeC1">修改第一台车</button>
 
+    <button @click="changeC2">修改第二台车</button>
 
+    <button @click="changeCar">修改整个车</button>
 
+  </div>
 
+</template>
 
+
 
+<script lang="ts" setup name="TheWelcome">
 
+  import {reactive,watch} from 'vue'
 
+
 
+  // 数据
 
+  // eslint-disable-next-line prefer-const
 
+  let sum = reactive({
 
+    name:'张三',
 
+    age:18,
 
+    car:{
 
+      c1:'奔驰',
 
+      c2:'宝马'
 
+    }
 
+  })
 
+  // 方法
 
+  function changeName(){
 
+    sum.name += '~'
 
+  }
 
+  function changeAge(){
 
+    sum.age += 1
 
+  }
 
+  function changeC1(){
 
+    sum.car.c1 = '奥迪'
 
+  }
 
+  function changeC2(){
 
+    sum.car.c2 = '大众'
 
+  }
 
+  function changeCar(){
 
+    sum.car = {c1:'雅迪',c2:'爱玛'}
 
+  }
 
+
 
+  // 监视，情况五：监视上述的多个数据
 
+  watch([()=>sum.name,sum.car],(newValue,oldValue)=>{
 
+    console.log('sum.car变化了',newValue,oldValue)
 
+  },{deep:true})
 
+
 
+</script>
 
+
 
+<style scoped>
 
+/*
 
+  .TheWelcome 类选择器，仅应用于当前组件内部的元素，
 
+  因为使用了`scoped`属性，确保样式不会影响到其他组件
 
+*/
 
+.TheWelcome {
 
+  background-color: skyblue; /* 设置背景颜色 */
 
+  box-shadow: 0 0 10px; /* 添加阴影效果 */
 
+  border-radius: 10px; /* 设置圆角半径 */
 
+  padding: 20px; /* 设置内边距 */
 
+}
 
+
 
+/* 设置按钮之间的间距 */
 
+button {
 
+  margin: 0 5px;
 
+}
 
+</style>

+ 78 - 0
前端/vue3/测试/src/components/watch监视_情况四.vue
View File 

@@ -0,0 +1,78 @@
 
+<script lang="ts" setup name="TheWelcome">
 
+import { reactive, watch } from "vue";
 
+
 
+// 定义一个响应式的对象
 
+const sum = reactive({
 
+  name: '请问',
 
+  age: 12,
 
+  car: {
 
+    c1: '宝马',
 
+    c2: '奔驰'
 
+  }
 
+});
 
+
 
+// 修改整个对象
 
+function changeC1() {
 
+  sum.car.c1 = "马萨拉蒂"
 
+}
 
+
 
+function changeC2() {
 
+  sum.car.c2 = "小米"
 
+}
 
+
 
+function changePerson() {
 
+  sum.car = {c1: "小米", c2: "马萨拉蒂"};
 
+}
 
+
 
+// 修改名称
 
+function changeName() {
 
+  sum.name = '而非';
 
+}
 
+
 
+// 增加年龄
 
+function changeAge() {
 
+  sum.age += 2;
 
+}
 
+
 
+// 情况四:监视响应式对象中的某个属性，且该属性时基本类型的，要写成函数式
 
+watch(() => sum.name, (newValue, oldValue) => {
 
+  console.log('变化了', newValue, oldValue);
 
+}, {deep: true, immediate: true});
 
+//结论:监视的要是对象里的属性，那么最好写函数式，注意点:若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视
 
+watch(() => sum.car, (newValue, oldValue) => {
 
+  console.log('变化了', newValue, oldValue);
 
+}, {deep: true, immediate: true}); //深度监视
 
+</script>
 
+
 
+<template>
 
+  <div class="TheWelcome">
 
+    <h1>情况一:监视【reactive】定义的【对象类型】数据</h1>
 
+    <h2>姓名：{{ sum.name }}</h2>
 
+    <h2>年龄：{{ sum.age }}</h2>
 
+    <h2>汽车：{{ sum.car.c1 }}、{{ sum.car.c2 }}</h2>
 
+    <!-- 按钮触发不同的修改操作 -->
 
+    <button @click="changeName">修改名称</button>
 
+    <button @click="changeAge">修改年龄</button>
 
+    <button @click="changeC1">直接修改第一台车</button>
 
+    <button @click="changeC2">直接修改第二台车</button>
 
+    <button @click="changePerson">直接修改全部车</button>
 
+  </div>
 
+</template>
 
+
 
+<style scoped>
 
+/*
 
+  .TheWelcome 类选择器，仅应用于当前组件内部的元素，
 
+  因为使用了`scoped`属性，确保样式不会影响到其他组件
 
+*/
 
+.TheWelcome {
 
+  background-color: skyblue; /* 设置背景颜色 */
 
+  box-shadow: 0 0 10px; /* 添加阴影效果 */
 
+  border-radius: 10px; /* 设置圆角半径 */
 
+  padding: 20px; /* 设置内边距 */
 
+}
 
+
 
+/* 设置按钮之间的间距 */
 
+button {
 
+  margin: 0 5px;
 
+}
 
+</style>

+ 35 - 0
前端/vue3/测试/src/components/回顾TS中的 接口 泛型_自定义类型.vue
View File 

@@ -0,0 +1,35 @@
 
+<script setup lang="ts" name="TheWelcome">
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 
+import type { personInter, persos } from "@/types";
 
+
 
+//let TheWelcome:personInter = {id: "123456qwer", name: "请问", age: 13}
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 
+const personList:persos = [
 
+{id: "123456qwer", name: "请问", age: 13},
 
+{id: "123456qw", name: "阿三", age: 13},
 
+{id: "123456qwas", name: "暗示", age: 13}
 
+]
 
+</script>
 
+
 
+<template>
 
+  <div class="TheWelcome"></div>
 
+</template>
 
+
 
+<style scoped>
 
+.TheWelcome {
 
+  background-color: skyblue; /* 设置背景颜色 */
 
+  box-shadow: 0 0 10px; /* 添加阴影效果 */
 
+  border-radius: 10px; /* 设置圆角半径 */
 
+  padding: 20px; /* 设置内边距 */
 
+}
 
+
 
+/* 设置按钮之间的间距 */
 
+button {
 
+  margin: 0 5px;
 
+}
 
+
 
+/* 这个样式规则似乎没有用到，可以考虑移除或注释掉 */
 
+li {
 
+  font-size: 20px;
 
+}
 
+</style>

+ 71 - 0
前端/vue3/测试/src/components/对路由的理解/App.vue
View File 

@@ -0,0 +1,71 @@
 
+<!-- eslint-disable vue/multi-word-component-names -->
 
+<script setup lang='ts' name="app">
 
+import { RouterLink, RouterView } from "vue-router";
 
+import Header from "./路由 基本切换效果/Header.vue";
 
+</script>
 
+
 
+<template>
 
+  <div class="app">
 
+    <Header></Header>
 
+    <!-- 导航区 -->
 
+     <div class="navigate">
 
+      <RouterLink to="/Home" active-class="xiaozhupeiqi">首页</RouterLink>
 
+      <RouterLink :to="{name: 'xinwen'}" active-class="xiaozhupeiqi">新闻</RouterLink>
 
+      <RouterLink :to="{path:'/About'}" active-class="xiaozhupeiqi">关于</RouterLink>
 
+     </div>
 
+
 
+    <!--展示区 -->
 
+    <div class="main-content">
 
+      <RouterView></RouterView>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<style>
 
+  .title {
 
+    text-align: center;
 
+    word-spacing: 5px;
 
+    margin: 30px 0;
 
+    height: 70px;
 
+    line-height: 70px;
 
+    background-image: linear-gradient(45deg, gray, white);
 
+    border-radius: 10px;
 
+    box-shadow: 0 0 2px;
 
+    font-size: 30px;
 
+  }
 
+  .navigate {
 
+    display: flex;
 
+    justify-content: space-around;
 
+    margin: 0 100px;
 
+  }
 
+  .navigate a {
 
+    display: block;
 
+    text-align: center;
 
+    width: 90px;
 
+    height: 40px;
 
+    line-height: 40px;
 
+    border-radius: 10px;
 
+    background-color: gray;
 
+    text-decoration: none;
 
+    color: white;
 
+    font-size: 18px;
 
+    letter-spacing: 5px;
 
+  }
 
+  .navigate a.xiaozhupeiqi {
 
+    background-color: #64967E;
 
+    color: #ffc268;
 
+    font-weight: 900;
 
+    text-shadow: 0 0 1px black;
 
+    font-family: 微软雅黑;
 
+  }
 
+  .main-content {
 
+    margin: 0 auto;
 
+    margin-top: 30px;
 
+    border-radius: 10px;
 
+    width: 90%;
 
+    height: 400px;
 
+    border: 1px solid;
 
+  }
 
+</style>
 
+
 
+

+ 30 - 0
前端/vue3/测试/src/components/对路由的理解/pages/About.vue
View File 

@@ -0,0 +1,30 @@
 
+<!-- eslint-disable vue/multi-word-component-names -->
 
+<template>
 
+  <div class="about">
 
+    <h2>大家好，欢迎来到尚硅谷直播间</h2>
 
+  </div>
 
+</template>
 
+
 
+<script setup lang="ts" name="About">
 
+import { onMounted, onUnmounted } from "vue";
 
+
 
+onMounted(() => {
 
+  console.log("About组件挂载了");
 
+});
 
+
 
+onUnmounted(() => {
 
+  console.log("About组件卸载了");
 
+});
 
+// 这里的代码是关于Vue Router的基本切换效果的实现
 
+</script>
 
+
 
+<style scoped>
 
+.about {
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+  height: 100%;
 
+  color: rgb(85, 84, 84);
 
+  font-size: 18px;
 
+}
 
+</style>

+ 28 - 0
前端/vue3/测试/src/components/对路由的理解/pages/Detail.vue
View File 

@@ -0,0 +1,28 @@
 
+<!-- eslint-disable vue/multi-word-component-names -->
 
+<template>
 
+  <ul class="news-list">
 
+    <li>编号：{{ query.id }}</li>
 
+    <li>标题：{{ query.title }}</li>
 
+    <li>内容：{{ query.content }}</li>
 
+  </ul>
 
+</template>
 
+
 
+<script setup lang="ts" name="About">
 
+import { toRefs } from "vue";
 
+import { useRoute } from "vue-router";
 
+
 
+const route = useRoute();
 
+const {query} = toRefs(route);
 
+
 
+</script>
 
+
 
+<style scoped>
 
+  .news-list {
 
+    list-style: none;
 
+    padding-left: 20px;
 
+  }
 
+
 
+  .news-list>li {
 
+    line-height: 30px;
 
+  }
 
+</style>

+ 19 - 0
前端/vue3/测试/src/components/对路由的理解/pages/Home.vue
View File 

@@ -0,0 +1,19 @@
 
+<!-- eslint-disable vue/multi-word-component-names -->
 
+<template>
 
+  <div class="home">
 
+    <img src="http://www.atguigu.com/images/index_new/logo.png" alt="">
 
+  </div>
 
+</template>
 
+
 
+<script setup lang="ts" name="Home">
 
+
 
+</script>
 
+
 
+<style scoped>
 
+  .home {
 
+    display: flex;
 
+    justify-content: center;
 
+    align-items: center;
 
+    height: 100%;
 
+  }
 
+</style>

+ 72 - 0
前端/vue3/测试/src/components/对路由的理解/pages/News.vue
View File 

@@ -0,0 +1,72 @@
 
+<!-- eslint-disable vue/multi-word-component-names -->
 
+<template>
 
+  <div class="news">
 
+    <!-- 导航区 -->
 
+    <ul>
 
+      <li v-for="news in newsList.news" :key="news.id">
 
+         <!--第一种写法：<RouterLink :to="`/news/detail?id=${news.id}&title=${news.title}&content=${news.content}`">{{news.title}}</RouterLink>-->
 
+        <!--第二种写法-->
 
+        <RouterLink
 
+        :to="{
 
+          path: '/news/detail',
 
+          query: {
 
+            id: news.id,
 
+            title: news.title,
 
+            content: news.content
 
+          }
 
+        }"
 
+        >
 
+          {{news.title}}
 
+        </RouterLink>
 
+      </li>
 
+    </ul>
 
+    <!-- 展示区 -->
 
+     <div class="news-content">
 
+      <RouterView></RouterView>
 
+     </div>
 
+  </div>
 
+</template>
 
+
 
+<script setup lang="ts" name="News">
 
+import { reactive } from "vue";
 
+import { RouterLink, RouterView } from "vue-router";
 
+
 
+
 
+const newsList = reactive({
 
+  news: [
 
+    {id:'asfdtrfaye1',title:'很好的抗癌食物',content:'西蓝花'},
 
+    {id:'asfdtrfay02',title:'如何一夜暴富',content:'学IT'},
 
+    {id:'asfdtrfaye3',title:'震惊，万万没想到',content:'明天是周一'},
 
+    {id:'asfdtrfaye4',title:'好消息!',content:'快过年了'},
 
+  ]
 
+});
 
+</script>
 
+
 
+<style scoped>
 
+/* 新闻 */
 
+.news {
 
+  padding: 0 20px;
 
+   display: flex;
 
+  justify-content: space-between;
 
+  height: 100%;
 
+}
 
+.news ul {
 
+  margin-top: 30px;
 
+  /*list-style: none;*/
 
+  padding-left: 10px;
 
+}
 
+.news li>a {
 
+  font-size: 18px;
 
+  line-height: 40px;
 
+  text-decoration: none;
 
+  color: #64967E;
 
+  text-shadow: 0 0 1px rgb(0, 84, 0);
 
+}
 
+.news-content {
 
+  width: 70%;
 
+  height: 90%;
 
+  border: 1px solid;
 
+  margin-top: 20px;
 
+  border-radius: 10px;
 
+}
 
+</style>

+ 22 - 0
前端/vue3/测试/src/components/对路由的理解/路由 基本切换效果/Header.vue
View File 

@@ -0,0 +1,22 @@
 
+<!-- eslint-disable vue/multi-word-component-names -->
 
+<template>
 
+  <h2 class="title">Vue路由测试</h2>
 
+</template>
 
+
 
+<script setup lang="ts" name="Header">
 
+
 
+</script>
 
+
 
+<style scoped>
 
+  .title {
 
+    text-align: center;
 
+    word-spacing: 5px;
 
+    margin: 30px 0;
 
+    height: 70px;
 
+    line-height: 70px;
 
+    background-image: linear-gradient(45deg, gray, white);
 
+    border-radius: 10px;
 
+    box-shadow: 0 0 2px;
 
+    font-size: 30px;
 
+  }
 
+</style>

+ 52 - 0
前端/vue3/测试/src/components/标签的ref属性.vue
View File 

@@ -0,0 +1,52 @@
 
+<!-- eslint-disable vue/multi-word-component-names -->
 
+<script setup lang="ts" name="TheWelcome">
 
+import { ref, defineExpose } from "vue";
 
+/*
 
+function showLog() {
 
+  console.log(document.getElementById("title2"));
 
+}
 
+*/
 
+// eslint-disable-next-line prefer-const
 
+let title2 = ref()
 
+// eslint-disable-next-line prefer-const
 
+let a = ref(0)
 
+// eslint-disable-next-line prefer-const
 
+let b = ref(1)
 
+// eslint-disable-next-line prefer-const
 
+let c = ref(2)
 
+
 
+function showLog() {
 
+  console.log(title2.value);
 
+}
 
+
 
+ defineExpose({ a, b, c })
 
+</script>
 
+
 
+<template>
 
+  <div class="TheWelcome">
 
+    <h2>中国</h2>
 
+    <h2>北京</h2>
 
+    <h2 ref="title2">上海</h2>
 
+    <h2>深圳</h2>
 
+    <button @click="showLog">点击显示h2</button>
 
+  </div>
 
+</template>
 
+
 
+<style scoped>
 
+.TheWelcome {
 
+  background-color: skyblue; /* 设置背景颜色 */
 
+  box-shadow: 0 0 10px; /* 添加阴影效果 */
 
+  border-radius: 10px; /* 设置圆角半径 */
 
+  padding: 20px; /* 设置内边距 */
 
+}
 
+
 
+/* 设置按钮之间的间距 */
 
+button {
 
+  margin: 0 5px;
 
+}
 
+
 
+/* 这个样式规则似乎没有用到，可以考虑移除或注释掉 */
 
+li {
 
+  font-size: 20px;
 
+}
 
+</style>

+ 38 - 0
前端/vue3/测试/src/components/自定义Hooks.vue
View File 

@@ -0,0 +1,38 @@
 
+<!-- eslint-disable vue/multi-word-component-names -->
 
+<script setup lang="ts">
 
+
 
+</script>
 
+
 
+<template>
 
+  <div class="TheWelcome">
 
+    <h2>当前求和为: {{ sum }}</h2>
 
+    <button @click="add">点击加一</button>
 
+
 
+    <hr>
 
+
 
+    <!-- 显示狗图片 -->
 
+    <div>
 
+      <button @click="loadRandomDog">加载随机狗图片</button>
 
+      <img v-for="(dog, index) in dogList" :src="dog" :key="index" alt="狗图片" style="width: 150px; height: auto; margin: 10px;">
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<style scoped>
 
+.TheWelcome {
 
+  background-color: skyblue; /* 设置背景颜色 */
 
+  box-shadow: 0 0 10px; /* 添加阴影效果 */
 
+  border-radius: 10px; /* 设置圆角半径 */
 
+  padding: 20px; /* 设置内边距 */
 
+}
 
+
 
+/* 设置按钮之间的间距 */
 
+button {
 
+  margin: 0 5px;
 
+}
 
+
 
+/* 这个样式规则似乎没有用到，可以考虑移除或注释掉 */
 
+/* li {
 
+  font-size: 20px;
 
+} */
 
+</style>

+ 40 - 0
前端/vue3/测试/src/components/路由 编程式路由导航.vue
View File 

@@ -0,0 +1,40 @@
 
+#include<opencv2/opencv.hpp>
 
+#include<iostream>
 
+#include <time.h>
 
+#include <time.h>
 
+ 
+using namespace std;
 
+using namespace cv;
 
+ 
+void drawText(Mat & image, char* time);
 
+ 
+int main(int argc,char **argv)
 
+{
 
+    VideoCapture capture(0);
 
+    namedWindow("myCamera",CV_WINDOW_AUTOSIZE);
 
+    cv::Point p = cv::Point(300, 20);
 
+ 
+    while(true)
 
+    {    
+        Mat frame;
 
+        capture>>frame;
 
+        
+				time_t rawtime;
 
+        time(&rawtime);
 
+        char* time = ctime(&rawtime);
 
+//        cout<< time << endl;
 
+        drawText(frame, time);
 
+        imshow("myCamera",frame);
 
+        waitKey(30);
 
+    }
 
+    return 0;
 
+}
 
+ 
+void drawText(Mat & image, char* time)
 
+{
 
+    putText(image, time,
 
+            Point(20, 50),
 
+            FONT_HERSHEY_COMPLEX, 1, // font face and scale
 
+            Scalar(255, 255, 255), // white
 
+            1, LINE_AA); // line thickness and type
 
+}

+ 45 - 0
前端/vue3/测试/src/router/router.ts
View File 

@@ -0,0 +1,45 @@
 
+// 创建一个路由器，并暴露出去
 
+
 
+// 第一步：引入createRouter
 
+import {createRouter,createWebHistory/* createWebHashHistory*/} from 'vue-router'
 
+// 引入一个一个可能要呈现组件
 
+import Home from '@/components/对路由的理解/pages/Home.vue'
 
+import News from '@/components/对路由的理解/pages/News.vue'
 
+import About from '@/components/对路由的理解/pages/About.vue'
 
+import Detail from '@/components/对路由的理解/pages/Detail.vue'
 
+
 
+// 第二步：创建路由器
 
+const router = createRouter({
 
+  history:createWebHistory(),
 
+  //history:createWebHashHistory(), //路由器的工作模式（稍后讲解）
 
+  routes:[
 
+    {
 
+      name:'zhuye', //路由的名称
 
+      path:'/Home', //路由的路径
 
+      component:Home //路由对应的组件
 
+    },
 
+    {
 
+      name:'xinwen', //路由的名称
 
+      path:'/News', //路由的路径
 
+      component:News, //路由对应的组件
 
+      children:
 
+      [
 
+        {
 
+          path:'detail', //路由的路径
 
+          component:Detail, //路由对应的组件
 
+        },
 
+      ]
 
+    },
 
+    {
 
+      name:'guanyu', //路由的名称
 
+      path:'/About', //路由的路径
 
+      component:About //路由对应的组件
 
+    },
 
+  ]
 
+})
 
+
 
+export default router
 
+// 第三步：导出路由器
 
+// 让路由器可以在main.ts中被使用
 
+// 让路由器可以在App.vue中被使用
 
+// 让路由器可以在其他组件中被使用

+ 10 - 0
前端/vue3/测试/src/types/index.ts
View File 

@@ -0,0 +1,10 @@
 
+export interface personInter {
 
+  id:string,
 
+  name:string,
 
+  age:number,
 
+  X?:number
 
+}
 
+
 
+//自定义
 
+//1 export type persos = Array<personInter>
 
+export type persos = personInter[]