From 7b73c3e8401b82c4510243e46275539b65572c3f Mon Sep 17 00:00:00 2001
From: Lhchen <2244349522@qq.com>
Date: Fri, 8 May 2026 09:26:28 +0000
Subject: [PATCH 01/19] =?UTF-8?q?rename=20=E7=BD=97=E7=9A=93=E6=99=A8/2026?=
 =?UTF-8?q?0429-Vue=E4=BA=8B=E4=BB=B6=E7=BB=91=E5=AE=9A&=E5=8F=8C=E5=90=91?=
 =?UTF-8?q?=E7=BB=91=E5=AE=9A.md=20to=20=E7=BD=97=E7=9A=93=E6=99=A8/202604?=
 =?UTF-8?q?29-Vue=E5=BE=85=E4=BF=AE=E6=94=B9=E5=BA=9F=E6=A1=8801.md.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Lhchen <2244349522@qq.com>
---
 ...\276\205\344\277\256\346\224\271\345\272\237\346\241\21001.md" | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename "\347\275\227\347\232\223\346\231\250/20260429-Vue\344\272\213\344\273\266\347\273\221\345\256\232&\345\217\214\345\220\221\347\273\221\345\256\232.md" => "\347\275\227\347\232\223\346\231\250/20260429-Vue\345\276\205\344\277\256\346\224\271\345\272\237\346\241\21001.md" (100%)

diff --git "a/\347\275\227\347\232\223\346\231\250/20260429-Vue\344\272\213\344\273\266\347\273\221\345\256\232&\345\217\214\345\220\221\347\273\221\345\256\232.md" "b/\347\275\227\347\232\223\346\231\250/20260429-Vue\345\276\205\344\277\256\346\224\271\345\272\237\346\241\21001.md"
similarity index 100%
rename from "\347\275\227\347\232\223\346\231\250/20260429-Vue\344\272\213\344\273\266\347\273\221\345\256\232&\345\217\214\345\220\221\347\273\221\345\256\232.md"
rename to "\347\275\227\347\232\223\346\231\250/20260429-Vue\345\276\205\344\277\256\346\224\271\345\272\237\346\241\21001.md"
-- 
Gitee


From de76b2b74ad3cfc6294b059b163b4aa28bbcf37c Mon Sep 17 00:00:00 2001
From: Lhchen <2244349522@qq.com>
Date: Fri, 8 May 2026 09:26:44 +0000
Subject: [PATCH 02/19] =?UTF-8?q?rename=20=E7=BD=97=E7=9A=93=E6=99=A8/2026?=
 =?UTF-8?q?0430-Vue.md=20to=20=E7=BD=97=E7=9A=93=E6=99=A8/20260430-Vue?=
 =?UTF-8?q?=E5=BE=85=E4=BF=AE=E6=94=B9=E5=BA=9F=E6=A1=8802.md.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Lhchen <2244349522@qq.com>
---
 ...\276\205\344\277\256\346\224\271\345\272\237\346\241\21002.md" | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename "\347\275\227\347\232\223\346\231\250/20260430-Vue.md" => "\347\275\227\347\232\223\346\231\250/20260430-Vue\345\276\205\344\277\256\346\224\271\345\272\237\346\241\21002.md" (100%)

diff --git "a/\347\275\227\347\232\223\346\231\250/20260430-Vue.md" "b/\347\275\227\347\232\223\346\231\250/20260430-Vue\345\276\205\344\277\256\346\224\271\345\272\237\346\241\21002.md"
similarity index 100%
rename from "\347\275\227\347\232\223\346\231\250/20260430-Vue.md"
rename to "\347\275\227\347\232\223\346\231\250/20260430-Vue\345\276\205\344\277\256\346\224\271\345\272\237\346\241\21002.md"
-- 
Gitee


From 515caed12df33ce5f9e600de4687364e3cf15c52 Mon Sep 17 00:00:00 2001
From: Lhchen <2244349522@qq.com>
Date: Sat, 9 May 2026 06:09:53 +0000
Subject: [PATCH 03/19] =?UTF-8?q?add=20=E7=BD=97=E7=9A=93=E6=99=A8/2026050?=
 =?UTF-8?q?7-Vue=E7=BB=84=E4=BB=B6.md.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Lhchen <2244349522@qq.com>
---
 .../20260507-Vue\347\273\204\344\273\266.md"  | 496 ++++++++++++++++++
 1 file changed, 496 insertions(+)
 create mode 100644 "\347\275\227\347\232\223\346\231\250/20260507-Vue\347\273\204\344\273\266.md"

diff --git "a/\347\275\227\347\232\223\346\231\250/20260507-Vue\347\273\204\344\273\266.md" "b/\347\275\227\347\232\223\346\231\250/20260507-Vue\347\273\204\344\273\266.md"
new file mode 100644
index 00000000..55cb58ad
--- /dev/null
+++ "b/\347\275\227\347\232\223\346\231\250/20260507-Vue\347\273\204\344\273\266.md"
@@ -0,0 +1,496 @@
+## 笔记
+
+### 组件基本定义与使用
+
+#### 全局注册组件
+
+在入口文件 main.js 中注册，所有页面和组件都能直接使用。
+
+```javascript
+// main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+// 导入组件
+import MyButton from './components/MyButton.vue'
+
+const app = createApp(App)
+// 全局注册组件
+app.component('MyButton', MyButton)
+app.mount('#app')
+```
+
+#### 局部注册组件
+
+推荐优先使用局部注册，减少不必要的全局挂载，优化性能。
+
+```vue
+<!-- 父组件 App.vue -->
+<template>
+  <div>
+    <h1>Vue3 组件示例</h1>
+    <!-- 使用子组件 -->
+    <MyCard />
+  </div>
+</template>
+
+<script setup>
+// 局部导入组件，无需注册可直接使用
+import MyCard from './components/MyCard.vue'
+</script>
+```
+
+### 组件通信
+
+#### 父子组件通信
+
+##### Props（父 → 子 传值）
+
+父组件通过属性传递数据，子组件通过 defineProps 接收数据，支持类型校验、默认值、必填校验。
+
+**子组件 Child.vue**
+
+```vue
+<template>
+  <div class="child">
+    <p>接收的标题：{{ title }}</p>
+    <p>接收的数量：{{ count }}</p>
+  </div>
+</template>
+
+<script setup>
+// 定义 props 并校验
+const props = defineProps({
+  // 字符串类型，必填
+  title: {
+    type: String,
+    required: true
+  },
+  // 数字类型，带默认值
+  count: {
+    type: Number,
+    default: 0
+  }
+})
+</script>
+```
+
+**父组件使用**
+
+```vue
+<template>
+  <Child title="我是父组件传的值" :count="10" />
+</template>
+
+<script setup>
+import Child from './Child.vue'
+</script>
+```
+
+##### defineEmits（子 → 父 传值/触发事件）
+
+子组件通过自定义事件向父组件发送数据，父组件通过 v-on 监听事件。
+
+**子组件Child.vue**
+
+```vue
+<template>
+  <button @click="sendMsg">向父组件传值</button>
+</template>
+
+<script setup>
+// 定义自定义事件
+const emit = defineEmits(['send-data'])
+
+const sendMsg = () => {
+  // 触发事件，传递参数
+  emit('send-data', '子组件的消息', 666)
+}
+</script>
+```
+
+**父组件监听**
+
+```vue
+<template>
+  <Child @send-data="handleReceive" />
+</template>
+
+<script setup>
+import Child from './Child.vue'
+
+// 接收子组件传递的数据
+const handleReceive = (msg, num) => {
+  console.log(msg, num)
+}
+</script>
+```
+
+#### 跨级传值（provide / inject）
+
+用于祖孙组件、多级组件间传值，无需逐层传递（跳过中间组件），父组件（或祖先组件）用 provide 提供数据，子组件（或后代组件）用 inject 接收数据，支持响应式传值。
+
+**祖先组件（提供数据）**
+
+```vue
+<script setup>
+import { provide, ref } from 'vue'
+
+// 提供普通数据（非响应式）
+provide('theme', 'dark')
+
+// 提供响应式数据（推荐，数据变化时后代组件同步更新）
+const userInfo = ref({ name: '张三', age: 20 })
+provide('userInfo', userInfo)
+
+// 提供方法（后代组件可调用祖先组件方法）
+const updateUser = (newName) => {
+  userInfo.value.name = newName
+}
+provide('updateUser', updateUser)
+</script>
+```
+
+**后代组件（接收数据）**
+
+```vue
+<template>
+  <div>
+    <p>主题：{{ theme }}</p>
+    <p>用户名：{{ userInfo.name }}</p>
+    <button @click="updateUser('李四')">修改用户名</button>
+  </div>
+</template>
+
+<script setup>
+import { inject } from 'vue'
+
+// 接收数据，可设置默认值（当祖先组件未提供时使用）
+const theme = inject('theme', 'light')
+// 接收响应式数据
+const userInfo = inject('userInfo')
+// 接收祖先组件提供的方法
+const updateUser = inject('updateUser')
+</script>
+```
+
+### 组件核心能力（数据与生命周期）
+
+#### 组件响应式数据（组件内部状态管理）
+
+组件内部的响应式数据，用于维护组件自身的状态，仅在组件内部或通过通信传递给其他组件，常用 ref 和 reactive 定义。
+
+```vue
+<template>
+  <div>
+    <p>组件内部状态：{{ count }}</p>
+    <button @click="count++">增加</button>
+    <p>组件内部对象：{{ info.name }}</p>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+
+// 基本类型响应式（组件内部状态）
+const count = ref(0)
+// 引用类型响应式（组件内部状态）
+const info = reactive({ name: '组件自身数据' })
+&lt;/script&gt;
+```
+
+#### 组件生命周期
+
+组件从创建到销毁的整个过程，Vue3 组合式 API 中使用钩子函数监听，用于在组件不同阶段执行自定义逻辑，是组件的核心能力之一。
+
+常用钩子函数：
+
+- onMounted：组件挂载完成（DOM 渲染完毕，适合发起网络请求、操作 DOM）
+- onUpdated：组件更新完成（组件数据变化导致 DOM 重新渲染后执行）
+- onUnmounted：组件卸载（组件销毁时执行，适合清除定时器、事件监听、取消请求）
+
+```vue
+<script setup>
+import { onMounted, onUnmounted } from 'vue'
+
+// 组件挂载后执行（组件渲染完成）
+onMounted(() => {
+  console.log('组件挂载完成，可操作DOM或发起请求')
+  // 示例：发起接口请求
+  // axios.get('/api/list')
+})
+
+// 组件卸载时执行（组件销毁）
+onUnmounted(() => {
+  console.log('组件已卸载，清除资源')
+  // 示例：清除定时器
+  // clearInterval(timer)
+})
+</script>
+```
+
+### 模板引用（获取 DOM/子组件实例）
+
+通过 ref 获取组件内部的 DOM 元素或子组件实例，实现组件内部 DOM 操作或调用子组件方法，是组件的常用能力。
+
+```vue
+<template>
+  <!-- DOM 引用（组件内部 DOM） -->
+  <div ref="domRef">组件内部 DOM 元素</div>
+  <!-- 子组件引用 -->
+  <Child ref="childRef" />
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import Child from './Child.vue'
+
+// 定义 ref 变量，名称和模板中 ref 一致
+const domRef = ref(null)
+const childRef = ref(null)
+
+onMounted(() => {
+  // 操作组件内部 DOM
+  domRef.value.style.color = 'red'
+  // 调用子组件方法（子组件需用 defineExpose 暴露）
+  childRef.value.childMethod()
+})
+</script>
+```
+
+子组件暴露方法/属性（默认不暴露，需手动暴露）
+
+```vue
+<script setup>
+// 子组件内部方法
+const childMethod = () => {
+  console.log('子组件方法被调用')
+}
+
+// 暴露方法/属性给父组件（仅暴露需要被父组件调用的内容）
+defineExpose({
+  childMethod
+})
+</script>
+```
+
+### 动态组件
+
+根据数据动态切换不同的组件，实现组件的灵活切换，适用于标签页、弹窗切换等场景。
+
+```vue
+<template>
+  <!-- 切换按钮 -->
+  <button @click="currentCom = 'Home'">首页</button>
+  <button @click="currentCom = 'User'">用户中心</button>
+  <!-- 动态渲染组件：:is 绑定组件名称 -->
+  <component :is="currentCom" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+// 导入需要切换的组件
+import Home from './Home.vue'
+import User from './User.vue'
+
+// 控制当前显示的组件
+const currentCom = ref('Home')
+</script>
+```
+
+### 组件缓存 keep-alive
+
+缓存不活动的组件实例，避免组件重复创建和销毁，提升页面性能，常与动态组件搭配使用（缓存切换后的组件状态）。
+
+```vue
+<template>
+  <!-- keep-alive 包裹动态组件，实现组件缓存 -->
+  <keep-alive>
+    <component :is="currentCom" />
+  </keep-alive>
+</template>
+```
+
+## 作业
+
+
+```vue
+<script setup lang="ts">
+import { ref, Ref } from 'vue';
+
+let isLoggedIn: Ref<boolean> = ref(true)
+let score = ref(75)
+let isSubscribed: Ref<boolean> = ref(true)
+let level = "A"
+let isAdmin ="false"
+let hasPermission ="false"
+let isLoggedIn = false
+let username = "张三"
+let roleArr = ["admin", "editor"]
+let role = roleArr[1]
+</script>
+
+<template>
+  <p v-if="isLoggedIn">您已登录</p>
+  <p v-if="score >= 60">及格</p>
+  <p v-else>不及格</p>
+  <button v-show="!isSubscribed">订阅更新</button>
+  <div v-if="level === 'A'">优秀</div>
+  <div v-else-if="level === 'B'">良好</div>
+  <div v-else-if="level === 'C'">及格</div>
+  <div v-else>需努力</div>
+  <div v-if="isAdmin && hasPermission">管理面板</div>
+  <div id="app">
+    <div v-if="isLoggedIn">
+      <div class="user-info">
+        <p>当前用户：{{ username }}</p>
+        <p>角色：{{ role }}</p>
+      </div>
+
+      <div v-if="role === 'admin'" class="admin-panel">
+        <h3>管理员面板</h3>
+        <button>用户管理</button>
+        <button>系统设置</button>
+        <button>数据统计</button>
+      </div>
+
+      <div v-else-if="role === 'editor'" class="editor-panel">
+        <h3>编辑面板</h3>
+        <button>文章管理</button>
+        <button>草稿箱</button>
+      </div>
+
+      <div v-else class="user-panel">
+        <h3>用户面板</h3>
+        <p>欢迎阅读文章</p>
+      </div>
+
+    </div>
+    <div v-if="!isLoggedIn" class="login-prompt">
+      <p>请登录后查看更多内容</p>
+      <button>登录</button>
+    </div>
+  </div>
+</template>
+```
+
+```vue
+<script setup lang="ts">
+let fruits: string[] = ['苹果', '香蕉', '橙子']
+let cities = ['北京', '上海', '广州', '深圳']
+interface User {
+  name: string,
+  age: number,
+  major: string
+}
+let user: User = { name: '李四', age: 20, major: '计算机' }
+interface Student {
+  name: string
+  score: number
+}
+let students: Student[] = [
+  { name: "张三", score: 95 },
+  { name: "李四", score: 88 },
+  { name: "王五", score: 76 },
+  { name: "赵六", score: 92 },
+  { name: "钱七", score: 82 }
+]
+interface CategoryItem {
+  value01: number;
+  value02: number;
+  value03: number;
+}
+interface Category {
+  name: string;
+  items: CategoryItem;
+}
+let categories: Category[] = [
+  {
+    name: "分类一",
+    items: {
+      value01: 10,
+      value02: 20,
+      value03: 30
+    }
+  },
+  {
+    name: "分类二",
+    items: {
+      value01: 15,
+      value02: 25,
+      value03: 35
+    }
+  },
+  {
+    name: "分类三",
+    items: {
+      value01: 40,
+      value02: 50,
+      value03: 60
+    }
+  }
+];
+interface CartItem {
+  id: number,
+  name: string,
+  quantity: number,
+  price: number
+}
+let cartItems: CartItem[] = [
+  { id: 1, name: "苹果", quantity: 2, price: 8.5 },
+  { id: 2, name: "香蕉", quantity: 5, price: 3.2 },
+  { id: 3, name: "牛奶", quantity: 1, price: 45 },
+  { id: 4, name: "面包", quantity: 3, price: 12 },
+  { id: 5, name: "可乐", quantity: 4, price: 3.5 }
+];
+let totalPrice: number = 0
+cartItems.forEach((item) => {
+  totalPrice += item.quantity * item.price
+})
+</script>
+
+<template>
+  <ul>
+    <li v-for="item in fruits">{{ item }}</li>
+  </ul>
+  <div v-for="(city, index) in cities">
+    {{ index + 1 }}. {{ city }}
+  </div>
+  <div v-for="(value, key) in user">
+    {{ key }}: {{ value }}
+  </div>
+  <tr v-for="student in students">
+    <td>{{ student.name }}</td>
+    <td>{{ student.score }}</td>
+  </tr>
+  <div v-for="category in categories">
+    <h3>{{ category.name }}</h3>
+    <ul>
+      <li v-for="item in category.items">{{ item }}</li>
+    </ul>
+  </div>
+
+  <div class="cart">
+    <h2>购物车</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>商品</th>
+          <th>单价</th>
+          <th>数量</th>
+          <th>小计</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="item in cartItems" :key="item.id">
+          <td>{{ item.name }}</td>
+          <td>¥{{ item.price }}</td>
+          <td>{{ item.quantity }}</td>
+          <td>¥{{ item.price * item.quantity }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="total">总计：¥{{ totalPrice }}</div>
+  </div>
+</template>
+```
+
-- 
Gitee


From 928ca22d9cfbedd6a243ffc4df4efc0bec064374 Mon Sep 17 00:00:00 2001
From: Lhchen <2244349522@qq.com>
Date: Sat, 9 May 2026 06:10:26 +0000
Subject: [PATCH 04/19] =?UTF-8?q?add=20=E7=BD=97=E7=9A=93=E6=99=A8/2026050?=
 =?UTF-8?q?8-Vue=E6=8F=92=E6=A7=BD.md.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Lhchen <2244349522@qq.com>
---
 .../20260508-Vue\346\217\222\346\247\275.md"  | 247 ++++++++++++++++++
 1 file changed, 247 insertions(+)
 create mode 100644 "\347\275\227\347\232\223\346\231\250/20260508-Vue\346\217\222\346\247\275.md"

diff --git "a/\347\275\227\347\232\223\346\231\250/20260508-Vue\346\217\222\346\247\275.md" "b/\347\275\227\347\232\223\346\231\250/20260508-Vue\346\217\222\346\247\275.md"
new file mode 100644
index 00000000..902d09d9
--- /dev/null
+++ "b/\347\275\227\347\232\223\346\231\250/20260508-Vue\346\217\222\346\247\275.md"
@@ -0,0 +1,247 @@
+## 笔记
+
+### 插槽 Slot
+
+组件的内容分发机制，允许父组件向子组件传递 HTML 结构，使组件更灵活、可复用，是组件封装的重要能力。
+
+#### 默认插槽
+
+子组件预留一个默认插槽，父组件插入的内容会自动填充到该插槽。
+
+子组件 MyBox.vue
+
+```vue
+<template>
+  <div class="box">
+    <!-- 插槽出口（默认插槽） -->
+    <slot></slot>
+  </div>
+</template>
+```
+
+父组件使用
+
+```vue
+<template>
+  <MyBox>
+    <!-- 插入自定义内容（填充默认插槽） -->
+    <p>父组件传递给子组件的内容</p>
+  </MyBox>
+</template>
+```
+
+#### 具名插槽（多个插槽区分使用）
+
+子组件预留多个插槽，通过名称区分，父组件可针对性填充不同插槽内容。
+
+**子组件**
+
+```vue
+<template>
+  <div class="container">
+    <!-- 具名插槽：header -->
+    <slot name="header"></slot>
+    <!-- 具名插槽：main -->
+    <slot name="main"></slot>
+    <!-- 具名插槽：footer -->
+    <slot name="footer"></slot>
+  </div>
+</template>
+```
+
+**父组件使用**
+
+```vue
+<template>
+  <MyBox>
+    <template #header>
+      <h1>页面标题（填充header插槽）</h1>
+    </template>
+    <template #main>
+      <p>页面主体内容（填充main插槽）</p>
+    </template>
+    <template #footer>
+      <p>页面底部（填充footer插槽）</p>
+    </template>
+  </MyBox>
+</template>
+```
+
+#### 作用域插槽（子组件向插槽传数据）
+
+作用域插槽可以和具名插槽结合使用，给指定名称的插槽传递数据，父组件通过对应插槽名接收数据。
+
+##### 默认作用域插槽
+
+**子组件**
+
+```vue
+<template>
+  <div>
+    <!-- 向插槽传递数据：list 和 title -->
+    <slot :list="userList" title="用户列表"></slot>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+// 子组件内部数据，传递给插槽
+const userList = ref([{ id: 1, name: '小明' }, { id: 2, name: '小红' }])
+</script>
+```
+
+**父组件接收数据并渲染**
+
+```vue
+<template>
+  <MyBox>
+    <template #default="{ list, title }">
+      <h2>{{ title }}</h2>
+      <div v-for="item in list" :key="item.id">{{ item.name }}</div>
+    </template>
+  </MyBox>
+</template>
+```
+
+##### 具名作用域插槽
+
+**子组件**
+
+```vue
+<template>
+  <div class="card">
+    <!-- 具名插槽 header 传递数据 -->
+    <slot name="header" :title="cardTitle" :id="cardId"></slot>
+    
+    <!-- 具名插槽 content 传递数据 -->
+    <slot name="content" :list="contentList"></slot>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+// 子组件内部数据
+const cardTitle = ref('用户信息卡片')
+const cardId = ref(1001)
+const contentList = ref([
+  { name: '张三', age: 22 },
+  { name: '李四', age: 25 }
+])
+</script>
+```
+
+**父组件使用具名作用域插槽**
+
+```vue
+<template>
+  <MyCard>
+    <!-- 接收 header 插槽传递的数据 -->
+    <template #header="{ title, id }">
+      <h3>卡片ID：{{ id }} —— {{ title }}</h3>
+    </template>
+
+    <!-- 接收 content 插槽传递的数据 -->
+    <template #content="{ list }">
+      <div v-for="item in list" :key="item.name">
+        姓名：{{ item }}，年龄：{{ item.age }}
+      </div>
+    </template>
+  </MyCard>
+</template>
+
+<script setup>
+import MyCard from './MyCard.vue'
+</script>
+```
+
+## 作业
+
+```vue
+<script setup lang="ts">
+import { ref, type Ref } from 'vue';
+
+let url = "https://vuejs.org"
+let textClass = { highlight: true }
+let isReadonly: Ref<boolean> = ref(false)
+let isActive = ref(false)
+let hasError = ref(true)
+let fontColor = 'red'
+let fontSize = 24
+
+interface Article {
+    id: number,
+    isFeatured: boolean,
+    thumbnail: string,
+    title: string,
+    category: string,
+    author: string,
+    publishTime: Date
+}
+let article: Article = {
+    id: 0,
+    isFeatured: true,
+    thumbnail: 'https://lf-flow-web-cdn.doubao.com/obj/flow-doubao/doubao/web/doubao_avatar.png',
+    title: '我是标题',
+    category: '种类1',
+    author: '我是作者',
+    publishTime: new Date
+}
+
+function getTagColor(category: string) {
+    if (category === "种类1") {
+        return 'red'
+    } else {
+        return 'blue'
+    }
+}
+function formatDate(date: Date) {
+    return date
+}
+</script>
+
+<template>
+    <a v-bind:href="url">访问链接</a>
+    <p v-bind:class="textClass">这是一段文本</p>
+    <input type="text" v-bind:disabled="isReadonly" />
+    <div v-bind:class="{ active: isActive, 'text-danger': hasError }">动态Class</div>
+    <div v-bind:style="{ color: fontColor, fontSize: fontSize + 'px' }">样式文本</div>
+
+    <div class="news-card" :class="{ featured: article.isFeatured }">
+        <img :src="article.thumbnail" :alt="article.title" />
+        <div class="content">
+            <span class="tag" :style="{ backgroundColor: getTagColor(article.category) }">
+                {{ article.category }}
+            </span>
+            <h3 :class="{ 'highlight-title': article.isFeatured }">
+                {{ article.title }}
+            </h3>
+            <p class="meta">
+                <span>
+                    {{ article.author }}
+                </span>
+                <span>
+                    {{ formatDate(article.publishTime) }}
+                </span>
+            </p>
+            <a :href="'/article/' + article.id" class="read-more">阅读更多</a>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.highlight {
+    color: blue;
+    font-weight: bold;
+}
+
+.active {
+    background-color: red;
+}
+
+.text-danger {
+    background-color: yellow;
+}
+</style>
+```
+
-- 
Gitee


From 7d9d1261080f203f7b82e1bcf9374b3b81f4169b Mon Sep 17 00:00:00 2001
From: Lhchen <2244349522@qq.com>
Date: Mon, 11 May 2026 00:43:23 +0800
Subject: [PATCH 05/19] =?UTF-8?q?=E8=80=81=E8=99=8E=E8=80=81=E5=B8=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20260506-Vue.md"                          |   48 +
 .../20260506-VueTypeScript.md"                | 1239 +++++++++++++++++
 2 files changed, 1287 insertions(+)
 create mode 100644 "\347\275\227\347\232\223\346\231\250/20260506-Vue.md"
 create mode 100644 "\347\275\227\347\232\223\346\231\250/20260506-VueTypeScript.md"

diff --git "a/\347\275\227\347\232\223\346\231\250/20260506-Vue.md" "b/\347\275\227\347\232\223\346\231\250/20260506-Vue.md"
new file mode 100644
index 00000000..a487dca5
--- /dev/null
+++ "b/\347\275\227\347\232\223\346\231\250/20260506-Vue.md"
@@ -0,0 +1,48 @@
+```vue
+<script setup lang="ts">
+import { Ref, ref } from 'vue';
+
+let message: Ref<string> = ref("欢迎学习Vue3")
+let htmlContent = ref("<h2 style='color:red;'>重要提示</h2><p>请认真完成练习</p>")
+let username = ref("张三")
+let price = 29.9
+let quantity = 3
+
+let createTime = Date.now()
+function formatDate(timestamp: number): Date {
+  let date = new Date(timestamp)
+  return date
+}
+let fullName = "vue3 framework"
+
+let user = {
+  name: "name",
+  title: "title",
+  company: "company", 
+  registerTime : Date.now()
+
+}
+</script>
+
+<template>
+  <div id="app">
+    <p v-text="message"></p>
+  </div>
+  <div id="app">
+    <div v-html="htmlContent"></div>
+  </div>
+  <span>{{ username }}，您好！</span>
+  <p>商品总价：{{ price * quantity }} 元</p>
+  <span>{{ formatDate(createTime) }}</span>
+  <div>{{ fullName.toUpperCase() }}</div>
+  <div class="card">
+
+    <h2>{{ user.name }}</h2>
+    <p>职位：{{ user.title }}</p>
+    <p>公司：{{ user.company }}</p>
+    <p>注册时间：{{ formatDate(user.registerTime) }}</p>
+  </div>
+</template>
+
+```
+
diff --git "a/\347\275\227\347\232\223\346\231\250/20260506-VueTypeScript.md" "b/\347\275\227\347\232\223\346\231\250/20260506-VueTypeScript.md"
new file mode 100644
index 00000000..2bd36951
--- /dev/null
+++ "b/\347\275\227\347\232\223\346\231\250/20260506-VueTypeScript.md"
@@ -0,0 +1,1239 @@
+# 第一部分：开发环境与基础结构
+
+## 基础配置
+
+## 创建 Vue3 + TS 项目
+
+```bash
+# 推荐：Vite（当前Vue3主流方案）
+npm create vite@latest my-vue-ts -- --template vue-ts
+
+# 安装依赖
+npm install
+
+# 启动项目
+npm run dev
+```
+
+------
+
+# Vue3 + TS 基础组件结构
+
+核心：
+
+- `lang="ts"` 开启 TypeScript
+- `<script setup>` 是 Vue3 组合式 API 主流写法
+- 顶层变量自动暴露给模板
+- 不需要 `return`
+
+```vue
+<script setup lang="ts">
+const count = 10
+
+const handleClick = (): void => {
+  console.log('点击事件')
+}
+</script>
+
+<template>
+  <div>{{ count }}</div>
+
+  <button @click="handleClick">
+    点击
+  </button>
+</template>
+```
+
+------
+
+------
+
+# 第二部分：TS 基础类型（Vue3 必学核心）
+
+## string
+
+```ts
+const title: string = 'Vue3 + TS'
+
+const msg: string = `Hello Vue3`
+```
+
+适配场景：
+
+- Props 文本
+- 标题
+- 提示信息
+- 用户名
+
+------
+
+## number
+
+```ts
+const age: number = 18
+
+const price: number = 99.9
+```
+
+适配场景：
+
+- ID
+- 数量
+- 金额
+- 分页
+
+------
+
+## boolean
+
+```ts
+const isShow: boolean = true
+
+const loading: boolean = false
+```
+
+适配场景：
+
+- loading
+- 开关
+- 显示隐藏
+- 权限控制
+
+------
+
+## null 与 undefined
+
+```ts
+const avatar: string | null = null
+
+const desc: string | undefined = undefined
+```
+
+Vue3 高频：
+
+```ts
+const user = ref<User | null>(null)
+```
+
+因为：
+
+- 接口数据未返回前为空
+- DOM 未挂载前为空
+
+------
+
+## void
+
+函数无返回值时使用。
+
+```ts
+const handleClick = (): void => {
+  console.log('点击')
+}
+```
+
+------
+
+## 数组类型
+
+## 基础写法
+
+```ts
+const list: string[] = ['Vue', 'React']
+```
+
+推荐写法：
+
+```ts
+类型[]
+```
+
+这是 Vue3 中最常用写法。
+
+------
+
+## 泛型数组写法
+
+```ts
+const list: Array<string> = ['Vue', 'React']
+```
+
+等价于：
+
+```ts
+string[]
+```
+
+------
+
+## 对象数组（Vue3 超高频）
+
+```ts
+interface User {
+  id: number
+  name: string
+}
+
+const userList: User[] = [
+  {
+    id: 1,
+    name: '张三'
+  },
+  {
+    id: 2,
+    name: '李四'
+  }
+]
+```
+
+适配场景：
+
+```vue
+<li v-for="item in userList" :key="item.id">
+  {{ item.name }}
+</li>
+```
+
+------
+
+------
+
+# 第三部分：函数与对象类型（Vue3 开发核心）
+
+## 函数（Vue3 高频核心）
+
+Vue3 中函数极其高频：
+
+- 点击事件
+- 接口请求
+- 工具函数
+- emit
+- computed
+- hooks
+
+必须重点掌握。
+
+------
+
+## 基础函数
+
+### 无参数无返回值
+
+```ts
+const closeDialog = (): void => {
+  console.log('关闭弹窗')
+}
+```
+
+------
+
+### 有参数无返回值
+
+```ts
+const deleteUser = (id: number): void => {
+  console.log(id)
+}
+```
+
+------
+
+### 有参数有返回值
+
+```ts
+const add = (a: number, b: number): number => {
+  return a + b
+}
+```
+
+------
+
+## 可选参数
+
+```ts
+const getName = (
+  name: string,
+  age?: number
+): string => {
+  if (age) {
+    return `${name}-${age}`
+  }
+
+  return name
+}
+```
+
+规则：
+
+- 可选参数必须放最后
+
+错误：
+
+```ts
+(name?: string, age: number)
+```
+
+------
+
+## interface（Vue3 核心）
+
+Vue3 中：
+
+- Props
+- API 数据
+- 表单
+- 用户信息
+- 商品数据
+
+大量使用 interface。
+
+------
+
+## 基础对象类型
+
+```ts
+interface User {
+  id: number
+  name: string
+  age?: number
+}
+```
+
+说明：
+
+- `?` 表示可选属性
+
+------
+
+## 使用 interface
+
+```ts
+const user: User = {
+  id: 1,
+  name: '张三'
+}
+```
+
+错误：
+
+```ts
+const user: User = {
+  name: '张三'
+}
+```
+
+因为缺少：
+
+```ts
+id
+```
+
+------
+
+## interface 继承
+
+```ts
+interface User {
+  name: string
+}
+
+interface Admin extends User {
+  role: string
+}
+```
+
+适配场景：
+
+- 用户体系
+- 接口扩展
+- 组件数据复用
+
+------
+
+## type（Vue3 高频）
+
+## 基础对象
+
+```ts
+type Product = {
+  id: number
+  title: string
+}
+```
+
+------
+
+## 联合类型（type 超高频）
+
+```ts
+type Status = 'success' | 'error' | 'loading'
+```
+
+------
+
+## 函数类型
+
+```ts
+type Fn = (name: string) => void
+```
+
+------
+
+## interface 和 type 区别（Vue3 实战版）
+
+| 场景     | 推荐      |
+| -------- | --------- |
+| Props    | interface |
+| API数据  | interface |
+| 联合类型 | type      |
+| 函数类型 | type      |
+| 工具类型 | type      |
+| 类型计算 | type      |
+
+经验：
+
+- 对象结构优先 interface
+- 联合/函数优先 type
+
+------
+
+## 联合类型（Vue3 高频）
+
+## 基础联合类型
+
+```ts
+const id: string | number = 1001
+```
+
+说明：
+
+只能是：
+
+- string
+- number
+
+之一。
+
+------
+
+## 字面量联合（最常用）
+
+```ts
+type ButtonType =
+  | 'primary'
+  | 'success'
+  | 'danger'
+const type: ButtonType = 'primary'
+```
+
+错误：
+
+```ts
+const type: ButtonType = 'warning'
+```
+
+------
+
+## Vue3 高频场景
+
+```ts
+interface Props {
+  status:
+    | 'loading'
+    | 'success'
+    | 'error'
+}
+```
+
+适配：
+
+- 状态管理
+- 按钮类型
+- 请求状态
+- 标签类型
+
+------
+
+------
+
+# 第四部分：泛型与类型系统进阶
+
+## 泛型（Vue3 + TS 核心）
+
+Vue3 大量 API 本质都是泛型。
+
+例如：
+
+```ts
+ref<User>()
+computed<string>()
+Promise<User>
+```
+
+------
+
+## 基础泛型
+
+```ts
+function getData<T>(data: T): T {
+  return data
+}
+```
+
+使用：
+
+```ts
+getData<string>('hello')
+
+getData<number>(100)
+```
+
+------
+
+## Promise 泛型
+
+```ts
+interface User {
+  name: string
+}
+
+const getUser = async (): Promise<User> => {
+  return {
+    name: '张三'
+  }
+}
+```
+
+------
+
+## 泛型约束
+
+```ts
+interface LengthType {
+  length: number
+}
+
+function getLength<T extends LengthType>(
+  data: T
+): number {
+  return data.length
+}
+```
+
+------
+
+------
+
+# 第五部分：Vue3 响应式 API + TS
+
+## Vue3 响应式 + TS
+
+这是 Vue3 + TS 真正核心。
+
+------
+
+### ref（最核心）
+
+## 基本类型
+
+```ts
+import { ref } from 'vue'
+
+const count = ref(0)
+
+count.value = 10
+```
+
+特点：
+
+- 自动推导类型
+- 必须 `.value`
+
+------
+
+## 字符串
+
+```ts
+const title = ref('Vue3')
+```
+
+------
+
+## 布尔值
+
+```ts
+const loading = ref(false)
+```
+
+------
+
+## 对象类型
+
+```ts
+interface User {
+  name: string
+  age: number
+}
+
+const user = ref<User | null>(null)
+```
+
+核心：
+
+```ts
+User | null
+```
+
+因为：
+
+初始化为空。
+
+------
+
+## 数组类型
+
+```ts
+interface User {
+  name: string
+}
+
+const userList = ref<User[]>([])
+```
+
+------
+
+## never[] 易错点
+
+错误：
+
+```ts
+const list = ref([])
+```
+
+会推导为：
+
+```ts
+Ref<never[]>
+```
+
+正确：
+
+```ts
+const list = ref<string[]>([])
+```
+
+------
+
+### reactive
+
+reactive：
+
+- 专门用于对象
+- 不需要 `.value`
+
+------
+
+## 基础对象
+
+```ts
+import { reactive } from 'vue'
+
+interface User {
+  name: string
+  age: number
+}
+
+const user = reactive<User>({
+  name: '张三',
+  age: 18
+})
+```
+
+修改：
+
+```ts
+user.age = 20
+```
+
+------
+
+## reactive 数组
+
+```ts
+const list = reactive<string[]>([])
+```
+
+------
+
+### ref 和 reactive 区别
+
+| 对比           | ref      | reactive |
+| -------------- | -------- | -------- |
+| 基本类型       | ✅        | ❌        |
+| 对象           | ✅        | ✅        |
+| 数组           | ✅        | ✅        |
+| 是否需要.value | ✅        | ❌        |
+| 推荐场景       | 基本类型 | 对象结构 |
+
+经验：
+
+- 基本类型 → ref
+- 对象 → reactive
+
+------
+
+### computed（Vue3 高频）
+
+## 自动推导
+
+```ts
+const count = ref(10)
+
+const doubleCount = computed(() => {
+  return count.value * 2
+})
+```
+
+自动推导：
+
+```ts
+ComputedRef<number>
+```
+
+------
+
+## 手动指定类型
+
+```ts
+const title = computed<string>(() => {
+  return 'Vue3 + TS'
+})
+```
+
+------
+
+------
+
+# 第六部分：Vue3 组件通信 + TS
+
+## Props + TS（核心）
+
+Vue3 + TS 最大核心之一。
+
+------
+
+## defineProps 基础写法
+
+```ts
+const props = defineProps({
+  title: String,
+
+  count: {
+    type: Number,
+    required: true
+  }
+})
+```
+
+------
+
+### defineProps 泛型写法（推荐）
+
+## interface 定义 Props
+
+```ts
+interface Props {
+  id: number
+  title: string
+  status?: 'success' | 'error'
+}
+```
+
+------
+
+## defineProps 泛型
+
+```ts
+const props = defineProps<Props>()
+```
+
+这是 Vue3 + TS 主流写法。
+
+------
+
+### Props 默认值
+
+## withDefaults
+
+```ts
+interface Props {
+  msg?: string
+  list?: string[]
+}
+
+const props = withDefaults(
+  defineProps<Props>(),
+  {
+    msg: '默认消息',
+
+    list: () => []
+  }
+)
+```
+
+重点：
+
+数组默认值必须：
+
+```ts
+() => []
+```
+
+不能直接：
+
+```ts
+[]
+```
+
+------
+
+## Emit + TS（组件通信核心）
+
+------
+
+## defineEmits 基础写法
+
+```ts
+const emit = defineEmits([
+  'change',
+  'update'
+])
+```
+
+缺点：
+
+- 不校验参数类型
+
+------
+
+### defineEmits 泛型写法（推荐）
+
+```ts
+const emit = defineEmits<{
+  change: [id: number]
+
+  update: [
+    title: string,
+    loading: boolean
+  ]
+
+  confirm: []
+}>()
+```
+
+------
+
+## 触发事件
+
+```ts
+emit('change', 1)
+
+emit('update', 'Vue3', true)
+
+emit('confirm')
+```
+
+错误：
+
+```ts
+emit('change', '1')
+```
+
+因为：
+
+```ts
+id: number
+```
+
+------
+
+## defineExpose + TS
+
+Vue3 中：
+
+<script setup> 默认封闭。
+
+需要主动暴露。
+
+------
+
+## 子组件
+
+```ts
+const count = ref(0)
+
+const increment = (): void => {
+  count.value++
+}
+
+defineExpose({
+  count,
+  increment
+})
+```
+
+------
+
+## 父组件
+
+```ts
+const childRef = ref<
+  InstanceType<typeof Child> | null
+>(null)
+```
+
+调用：
+
+```ts
+childRef.value?.increment()
+```
+
+------
+
+------
+
+# 第七部分：类型断言与 DOM 类型处理
+
+## 类型断言（Vue3 高频）
+
+语法：
+
+```ts
+值 as 类型
+```
+
+------
+
+## unknown 类型断言
+
+```ts
+const val: unknown = 'hello'
+
+const str = val as string
+```
+
+------
+
+### DOM 类型断言（超高频）
+
+```vue
+<template>
+  <input ref="inputRef" />
+</template>
+const inputRef = ref<
+  HTMLInputElement | null
+>(null)
+
+onMounted(() => {
+  inputRef.value?.focus()
+})
+```
+
+------
+
+### 事件对象类型断言
+
+```ts
+const handleInput = (
+  e: Event
+): void => {
+  const target =
+    e.target as HTMLInputElement
+
+  console.log(target.value)
+}
+```
+
+------
+
+### 非空断言 !
+
+```ts
+console.log(user.value!.name)
+```
+
+含义：
+
+告诉 TS：
+
+```txt
+这里一定不是 null
+```
+
+但：
+
+不安全。
+
+更推荐：
+
+```ts
+user.value?.name
+```
+
+------
+
+------
+
+# 第八部分：TS 高级类型工具（Vue3 高频）
+
+## keyof（Vue3 高频）
+
+## 获取对象 key
+
+```ts
+interface User {
+  name: string
+  age: number
+}
+
+// 'name' | 'age'
+type UserKey = keyof User
+```
+
+------
+
+## Vue3 高频场景
+
+```ts
+const getValue = (
+  key: keyof User
+) => {
+  return user[key]
+}
+```
+
+------
+
+## typeof（Vue3 高频）
+
+## 获取变量类型
+
+```ts
+const user = {
+  name: '张三',
+  age: 18
+}
+
+type UserType = typeof user
+```
+
+------
+
+## reactive 高频场景
+
+```ts
+const state = reactive({
+  count: 0,
+  title: 'Vue3'
+})
+
+type StateType = typeof state
+```
+
+------
+
+## 工具类型（Vue3 超高频）
+
+------
+
+### Partial
+
+全部属性变可选。
+
+```ts
+interface User {
+  name: string
+  age: number
+}
+
+type PartialUser = Partial<User>
+```
+
+适配：
+
+- 编辑接口
+- 表单更新
+
+------
+
+### Pick
+
+选择部分属性。
+
+```ts
+type UserInfo = Pick<
+  User,
+  'name' | 'age'
+>
+```
+
+------
+
+### Omit
+
+删除指定属性。
+
+```ts
+interface User {
+  id: number
+  name: string
+  password: string
+}
+
+type UserInfo = Omit<
+  User,
+  'password'
+>
+```
+
+------
+
+## 类型守卫（Vue3 高频）
+
+当一个值可能是多个类型时。
+
+必须先判断。
+
+------
+
+## typeof 守卫
+
+```ts
+const val: string | number = 'hello'
+
+if (typeof val === 'string') {
+  console.log(val.length)
+}
+```
+
+------
+
+## in 守卫
+
+```ts
+interface User {
+  name: string
+}
+
+interface Admin {
+  role: string
+}
+
+const person: User | Admin = {
+  name: '张三'
+}
+
+if ('name' in person) {
+  console.log(person.name)
+}
+```
+
+------
+
+## instanceof 守卫
+
+```ts
+const time = new Date()
+
+if (time instanceof Date) {
+  console.log(time.getFullYear())
+}
+```
+
+------
+
+#### any 和 unknown（Vue3 避坑重点）
+
+------
+
+# any
+
+```ts
+let val: any = 123
+
+val = 'hello'
+val = true
+val.xxx.yyy
+```
+
+问题：
+
+TS 完全失效。
+
+------
+
+### unknown（推荐）
+
+```ts
+let val: unknown = 'hello'
+```
+
+必须先判断：
+
+```ts
+if (typeof val === 'string') {
+  console.log(val.length)
+}
+```
+
+# 第九部分：Vue3 高频事件类型
+
+## Vue3 高频事件类型
+
+------
+
+## MouseEvent
+
+```ts
+const handleClick = (
+  e: MouseEvent
+): void => {
+  console.log(e.clientX)
+}
+```
+
+------
+
+## KeyboardEvent
+
+```ts
+const handleKeydown = (
+  e: KeyboardEvent
+): void => {
+  console.log(e.key)
+}
+```
+
+------
+
+## InputEvent
+
+```ts
+const handleInput = (
+  e: InputEvent
+): void => {
+  console.log(e.data)
+}
+```
+
+------
+
+## SubmitEvent
+
+```ts
+const handleSubmit = (
+  e: SubmitEvent
+): void => {
+  e.preventDefault()
+}
+```
+
-- 
Gitee


From 3a88913c18511ce1adafaafdc652b890061ac17b Mon Sep 17 00:00:00 2001
From: Lhchen <2244349522@qq.com>
Date: Mon, 11 May 2026 16:43:16 +0800
Subject: [PATCH 06/19] =?UTF-8?q?=E8=80=81=E8=99=8E=E8=80=81=E5=B8=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...\344\272\216Vue3\347\232\204TypeScript.md" | 285 ++++--------------
 1 file changed, 56 insertions(+), 229 deletions(-)
 rename "\347\275\227\347\232\223\346\231\250/20260506-VueTypeScript.md" => "\347\275\227\347\232\223\346\231\250/20260506-\345\237\272\344\272\216Vue3\347\232\204TypeScript.md" (83%)

diff --git "a/\347\275\227\347\232\223\346\231\250/20260506-VueTypeScript.md" "b/\347\275\227\347\232\223\346\231\250/20260506-\345\237\272\344\272\216Vue3\347\232\204TypeScript.md"
similarity index 83%
rename from "\347\275\227\347\232\223\346\231\250/20260506-VueTypeScript.md"
rename to "\347\275\227\347\232\223\346\231\250/20260506-\345\237\272\344\272\216Vue3\347\232\204TypeScript.md"
index 2bd36951..acfede83 100644
--- "a/\347\275\227\347\232\223\346\231\250/20260506-VueTypeScript.md"
+++ "b/\347\275\227\347\232\223\346\231\250/20260506-\345\237\272\344\272\216Vue3\347\232\204TypeScript.md"
@@ -2,7 +2,7 @@
 
 ## 基础配置
 
-## 创建 Vue3 + TS 项目
+### 创建 Vue3 + TS 项目
 
 ```bash
 # 推荐：Vite（当前Vue3主流方案）
@@ -15,11 +15,7 @@ npm install
 npm run dev
 ```
 
-------
-
-# Vue3 + TS 基础组件结构
-
-核心：
+### Vue3 + TS 基础组件结构
 
 - `lang="ts"` 开启 TypeScript
 - `<script setup>` 是 Vue3 组合式 API 主流写法
@@ -37,18 +33,13 @@ const handleClick = (): void => {
 
 <template>
   <div>{{ count }}</div>
-
   <button @click="handleClick">
     点击
   </button>
 </template>
 ```
 
-------
-
-------
-
-# 第二部分：TS 基础类型（Vue3 必学核心）
+# 第二部分：TS 基础类型
 
 ## string
 
@@ -65,8 +56,6 @@ const msg: string = `Hello Vue3`
 - 提示信息
 - 用户名
 
-------
-
 ## number
 
 ```ts
@@ -82,8 +71,6 @@ const price: number = 99.9
 - 金额
 - 分页
 
-------
-
 ## boolean
 
 ```ts
@@ -99,8 +86,6 @@ const loading: boolean = false
 - 显示隐藏
 - 权限控制
 
-------
-
 ## null 与 undefined
 
 ```ts
@@ -120,8 +105,6 @@ const user = ref<User | null>(null)
 - 接口数据未返回前为空
 - DOM 未挂载前为空
 
-------
-
 ## void
 
 函数无返回值时使用。
@@ -132,11 +115,9 @@ const handleClick = (): void => {
 }
 ```
 
-------
-
 ## 数组类型
 
-## 基础写法
+### 基础写法
 
 ```ts
 const list: string[] = ['Vue', 'React']
@@ -150,9 +131,7 @@ const list: string[] = ['Vue', 'React']
 
 这是 Vue3 中最常用写法。
 
-------
-
-## 泛型数组写法
+### 泛型数组写法
 
 ```ts
 const list: Array<string> = ['Vue', 'React']
@@ -164,9 +143,7 @@ const list: Array<string> = ['Vue', 'React']
 string[]
 ```
 
-------
-
-## 对象数组（Vue3 超高频）
+### 对象数组
 
 ```ts
 interface User {
@@ -198,9 +175,9 @@ const userList: User[] = [
 
 ------
 
-# 第三部分：函数与对象类型（Vue3 开发核心）
+# 第三部分：函数与对象类型
 
-## 函数（Vue3 高频核心）
+## 函数
 
 Vue3 中函数极其高频：
 
@@ -213,11 +190,9 @@ Vue3 中函数极其高频：
 
 必须重点掌握。
 
-------
-
-## 基础函数
+### 基础函数
 
-### 无参数无返回值
+#### 无参数无返回值
 
 ```ts
 const closeDialog = (): void => {
@@ -225,9 +200,7 @@ const closeDialog = (): void => {
 }
 ```
 
-------
-
-### 有参数无返回值
+#### 有参数无返回值
 
 ```ts
 const deleteUser = (id: number): void => {
@@ -235,9 +208,7 @@ const deleteUser = (id: number): void => {
 }
 ```
 
-------
-
-### 有参数有返回值
+#### 有参数有返回值
 
 ```ts
 const add = (a: number, b: number): number => {
@@ -245,9 +216,7 @@ const add = (a: number, b: number): number => {
 }
 ```
 
-------
-
-## 可选参数
+#### 可选参数
 
 ```ts
 const getName = (
@@ -272,9 +241,7 @@ const getName = (
 (name?: string, age: number)
 ```
 
-------
-
-## interface（Vue3 核心）
+## interface
 
 Vue3 中：
 
@@ -286,9 +253,7 @@ Vue3 中：
 
 大量使用 interface。
 
-------
-
-## 基础对象类型
+### 基础对象类型
 
 ```ts
 interface User {
@@ -302,9 +267,7 @@ interface User {
 
 - `?` 表示可选属性
 
-------
-
-## 使用 interface
+### 使用 interface
 
 ```ts
 const user: User = {
@@ -327,9 +290,7 @@ const user: User = {
 id
 ```
 
-------
-
-## interface 继承
+### interface 继承
 
 ```ts
 interface User {
@@ -347,11 +308,9 @@ interface Admin extends User {
 - 接口扩展
 - 组件数据复用
 
-------
-
-## type（Vue3 高频）
+## type
 
-## 基础对象
+### 基础对象
 
 ```ts
 type Product = {
@@ -360,25 +319,19 @@ type Product = {
 }
 ```
 
-------
-
-## 联合类型（type 超高频）
+### 联合类型
 
 ```ts
 type Status = 'success' | 'error' | 'loading'
 ```
 
-------
-
-## 函数类型
+### 函数类型
 
 ```ts
 type Fn = (name: string) => void
 ```
 
-------
-
-## interface 和 type 区别（Vue3 实战版）
+## interface 和 type 区别
 
 | 场景     | 推荐      |
 | -------- | --------- |
@@ -394,11 +347,9 @@ type Fn = (name: string) => void
 - 对象结构优先 interface
 - 联合/函数优先 type
 
-------
-
-## 联合类型（Vue3 高频）
+## 联合类型
 
-## 基础联合类型
+### 基础联合类型
 
 ```ts
 const id: string | number = 1001
@@ -411,11 +362,7 @@ const id: string | number = 1001
 - string
 - number
 
-之一。
-
-------
-
-## 字面量联合（最常用）
+### 字面量联合
 
 ```ts
 type ButtonType =
@@ -431,9 +378,7 @@ const type: ButtonType = 'primary'
 const type: ButtonType = 'warning'
 ```
 
-------
-
-## Vue3 高频场景
+### Vue3 高频场景
 
 ```ts
 interface Props {
@@ -451,10 +396,6 @@ interface Props {
 - 请求状态
 - 标签类型
 
-------
-
-------
-
 # 第四部分：泛型与类型系统进阶
 
 ## 泛型（Vue3 + TS 核心）
@@ -469,8 +410,6 @@ computed<string>()
 Promise<User>
 ```
 
-------
-
 ## 基础泛型
 
 ```ts
@@ -487,8 +426,6 @@ getData<string>('hello')
 getData<number>(100)
 ```
 
-------
-
 ## Promise 泛型
 
 ```ts
@@ -503,8 +440,6 @@ const getUser = async (): Promise<User> => {
 }
 ```
 
-------
-
 ## 泛型约束
 
 ```ts
@@ -519,21 +454,13 @@ function getLength<T extends LengthType>(
 }
 ```
 
-------
-
-------
-
 # 第五部分：Vue3 响应式 API + TS
 
 ## Vue3 响应式 + TS
 
-这是 Vue3 + TS 真正核心。
-
-------
-
-### ref（最核心）
+### ref
 
-## 基本类型
+#### 基本类型
 
 ```ts
 import { ref } from 'vue'
@@ -548,25 +475,19 @@ count.value = 10
 - 自动推导类型
 - 必须 `.value`
 
-------
-
-## 字符串
+#### 字符串
 
 ```ts
 const title = ref('Vue3')
 ```
 
-------
-
-## 布尔值
+#### 布尔值
 
 ```ts
 const loading = ref(false)
 ```
 
-------
-
-## 对象类型
+#### 对象类型
 
 ```ts
 interface User {
@@ -587,9 +508,7 @@ User | null
 
 初始化为空。
 
-------
-
-## 数组类型
+#### 数组类型
 
 ```ts
 interface User {
@@ -599,9 +518,7 @@ interface User {
 const userList = ref<User[]>([])
 ```
 
-------
-
-## never[] 易错点
+#### never[] 易错点
 
 错误：
 
@@ -621,8 +538,6 @@ Ref<never[]>
 const list = ref<string[]>([])
 ```
 
-------
-
 ### reactive
 
 reactive：
@@ -630,9 +545,7 @@ reactive：
 - 专门用于对象
 - 不需要 `.value`
 
-------
-
-## 基础对象
+#### 基础对象
 
 ```ts
 import { reactive } from 'vue'
@@ -654,16 +567,12 @@ const user = reactive<User>({
 user.age = 20
 ```
 
-------
-
-## reactive 数组
+#### reactive 数组
 
 ```ts
 const list = reactive<string[]>([])
 ```
 
-------
-
 ### ref 和 reactive 区别
 
 | 对比           | ref      | reactive |
@@ -679,11 +588,9 @@ const list = reactive<string[]>([])
 - 基本类型 → ref
 - 对象 → reactive
 
-------
-
 ### computed（Vue3 高频）
 
-## 自动推导
+#### 自动推导
 
 ```ts
 const count = ref(10)
@@ -699,9 +606,7 @@ const doubleCount = computed(() => {
 ComputedRef<number>
 ```
 
-------
-
-## 手动指定类型
+#### 手动指定类型
 
 ```ts
 const title = computed<string>(() => {
@@ -709,19 +614,13 @@ const title = computed<string>(() => {
 })
 ```
 
-------
-
-------
-
 # 第六部分：Vue3 组件通信 + TS
 
 ## Props + TS（核心）
 
 Vue3 + TS 最大核心之一。
 
-------
-
-## defineProps 基础写法
+### defineProps 基础写法
 
 ```ts
 const props = defineProps({
@@ -734,11 +633,9 @@ const props = defineProps({
 })
 ```
 
-------
-
 ### defineProps 泛型写法（推荐）
 
-## interface 定义 Props
+#### interface 定义 Props
 
 ```ts
 interface Props {
@@ -748,9 +645,7 @@ interface Props {
 }
 ```
 
-------
-
-## defineProps 泛型
+#### defineProps 泛型
 
 ```ts
 const props = defineProps<Props>()
@@ -758,11 +653,9 @@ const props = defineProps<Props>()
 
 这是 Vue3 + TS 主流写法。
 
-------
-
-### Props 默认值
+#### Props 默认值
 
-## withDefaults
+##### withDefaults
 
 ```ts
 interface Props {
@@ -794,13 +687,9 @@ const props = withDefaults(
 []
 ```
 
-------
-
 ## Emit + TS（组件通信核心）
 
-------
-
-## defineEmits 基础写法
+### defineEmits 基础写法
 
 ```ts
 const emit = defineEmits([
@@ -813,8 +702,6 @@ const emit = defineEmits([
 
 - 不校验参数类型
 
-------
-
 ### defineEmits 泛型写法（推荐）
 
 ```ts
@@ -830,9 +717,7 @@ const emit = defineEmits<{
 }>()
 ```
 
-------
-
-## 触发事件
+### 触发事件
 
 ```ts
 emit('change', 1)
@@ -854,9 +739,7 @@ emit('change', '1')
 id: number
 ```
 
-------
-
-## defineExpose + TS
+### defineExpose + TS
 
 Vue3 中：
 
@@ -864,8 +747,6 @@ Vue3 中：
 
 需要主动暴露。
 
-------
-
 ## 子组件
 
 ```ts
@@ -881,8 +762,6 @@ defineExpose({
 })
 ```
 
-------
-
 ## 父组件
 
 ```ts
@@ -897,10 +776,6 @@ const childRef = ref<
 childRef.value?.increment()
 ```
 
-------
-
-------
-
 # 第七部分：类型断言与 DOM 类型处理
 
 ## 类型断言（Vue3 高频）
@@ -911,9 +786,7 @@ childRef.value?.increment()
 值 as 类型
 ```
 
-------
-
-## unknown 类型断言
+### unknown 类型断言
 
 ```ts
 const val: unknown = 'hello'
@@ -921,8 +794,6 @@ const val: unknown = 'hello'
 const str = val as string
 ```
 
-------
-
 ### DOM 类型断言（超高频）
 
 ```vue
@@ -938,8 +809,6 @@ onMounted(() => {
 })
 ```
 
-------
-
 ### 事件对象类型断言
 
 ```ts
@@ -953,8 +822,6 @@ const handleInput = (
 }
 ```
 
-------
-
 ### 非空断言 !
 
 ```ts
@@ -979,15 +846,11 @@ console.log(user.value!.name)
 user.value?.name
 ```
 
-------
-
-------
-
 # 第八部分：TS 高级类型工具（Vue3 高频）
 
 ## keyof（Vue3 高频）
 
-## 获取对象 key
+### 获取对象 key
 
 ```ts
 interface User {
@@ -999,9 +862,7 @@ interface User {
 type UserKey = keyof User
 ```
 
-------
-
-## Vue3 高频场景
+### Vue3 高频场景
 
 ```ts
 const getValue = (
@@ -1011,11 +872,9 @@ const getValue = (
 }
 ```
 
-------
-
 ## typeof（Vue3 高频）
 
-## 获取变量类型
+### 获取变量类型
 
 ```ts
 const user = {
@@ -1026,9 +885,7 @@ const user = {
 type UserType = typeof user
 ```
 
-------
-
-## reactive 高频场景
+### reactive 高频场景
 
 ```ts
 const state = reactive({
@@ -1039,12 +896,8 @@ const state = reactive({
 type StateType = typeof state
 ```
 
-------
-
 ## 工具类型（Vue3 超高频）
 
-------
-
 ### Partial
 
 全部属性变可选。
@@ -1063,8 +916,6 @@ type PartialUser = Partial<User>
 - 编辑接口
 - 表单更新
 
-------
-
 ### Pick
 
 选择部分属性。
@@ -1076,8 +927,6 @@ type UserInfo = Pick<
 >
 ```
 
-------
-
 ### Omit
 
 删除指定属性。
@@ -1095,16 +944,12 @@ type UserInfo = Omit<
 >
 ```
 
-------
-
 ## 类型守卫（Vue3 高频）
 
 当一个值可能是多个类型时。
 
 必须先判断。
 
-------
-
 ## typeof 守卫
 
 ```ts
@@ -1115,8 +960,6 @@ if (typeof val === 'string') {
 }
 ```
 
-------
-
 ## in 守卫
 
 ```ts
@@ -1137,8 +980,6 @@ if ('name' in person) {
 }
 ```
 
-------
-
 ## instanceof 守卫
 
 ```ts
@@ -1149,13 +990,9 @@ if (time instanceof Date) {
 }
 ```
 
-------
-
-#### any 和 unknown（Vue3 避坑重点）
-
-------
+## any 和 unknown（Vue3 避坑重点）
 
-# any
+### any
 
 ```ts
 let val: any = 123
@@ -1169,8 +1006,6 @@ val.xxx.yyy
 
 TS 完全失效。
 
-------
-
 ### unknown（推荐）
 
 ```ts
@@ -1189,9 +1024,7 @@ if (typeof val === 'string') {
 
 ## Vue3 高频事件类型
 
-------
-
-## MouseEvent
+### MouseEvent
 
 ```ts
 const handleClick = (
@@ -1201,9 +1034,7 @@ const handleClick = (
 }
 ```
 
-------
-
-## KeyboardEvent
+### KeyboardEvent
 
 ```ts
 const handleKeydown = (
@@ -1213,9 +1044,7 @@ const handleKeydown = (
 }
 ```
 
-------
-
-## InputEvent
+### InputEvent
 
 ```ts
 const handleInput = (
@@ -1225,9 +1054,7 @@ const handleInput = (
 }
 ```
 
-------
-
-## SubmitEvent
+### SubmitEvent
 
 ```ts
 const handleSubmit = (
-- 
Gitee


From d7fbcb6c8abd81dc8c1192051064e9f2be1e2b70 Mon Sep 17 00:00:00 2001
From: Lhchen <2244349522@qq.com>
Date: Tue, 12 May 2026 06:08:51 +0000
Subject: [PATCH 07/19] =?UTF-8?q?rename=20=E7=BD=97=E7=9A=93=E6=99=A8/2026?=
 =?UTF-8?q?0506-=E5=9F=BA=E4=BA=8EVue3=E7=9A=84TypeScript.md=20to=20?=
 =?UTF-8?q?=E7=BD=97=E7=9A=93=E6=99=A8/202605011-=E5=9F=BA=E4=BA=8EVue3?=
 =?UTF-8?q?=E7=9A=84TypeScript.md.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Lhchen <2244349522@qq.com>
---
 ...2605011-\345\237\272\344\272\216Vue3\347\232\204TypeScript.md" | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename "\347\275\227\347\232\223\346\231\250/20260506-\345\237\272\344\272\216Vue3\347\232\204TypeScript.md" => "\347\275\227\347\232\223\346\231\250/202605011-\345\237\272\344\272\216Vue3\347\232\204TypeScript.md" (100%)

diff --git "a/\347\275\227\347\232\223\346\231\250/20260506-\345\237\272\344\272\216Vue3\347\232\204TypeScript.md" "b/\347\275\227\347\232\223\346\231\250/202605011-\345\237\272\344\272\216Vue3\347\232\204TypeScript.md"
similarity index 100%
rename from "\347\275\227\347\232\223\346\231\250/20260506-\345\237\272\344\272\216Vue3\347\232\204TypeScript.md"
rename to "\347\275\227\347\232\223\346\231\250/202605011-\345\237\272\344\272\216Vue3\347\232\204TypeScript.md"
-- 
Gitee


From 1933176b2eae15a6f18d88d923b7f974498b42b9 Mon Sep 17 00:00:00 2001
From: Lhchen <2244349522@qq.com>
Date: Tue, 12 May 2026 06:09:14 +0000
Subject: [PATCH 08/19] =?UTF-8?q?rename=20=E7=BD=97=E7=9A=93=E6=99=A8/2026?=
 =?UTF-8?q?05011-=E5=9F=BA=E4=BA=8EVue3=E7=9A=84TypeScript.md=20to=20?=
 =?UTF-8?q?=E7=BD=97=E7=9A=93=E6=99=A8/20260511-=E5=9F=BA=E4=BA=8EVue3?=
 =?UTF-8?q?=E7=9A=84TypeScript.md.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Lhchen <2244349522@qq.com>
---
 ...0260511-\345\237\272\344\272\216Vue3\347\232\204TypeScript.md" | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename "\347\275\227\347\232\223\346\231\250/202605011-\345\237\272\344\272\216Vue3\347\232\204TypeScript.md" => "\347\275\227\347\232\223\346\231\250/20260511-\345\237\272\344\272\216Vue3\347\232\204TypeScript.md" (100%)

diff --git "a/\347\275\227\347\232\223\346\231\250/202605011-\345\237\272\344\272\216Vue3\347\232\204TypeScript.md" "b/\347\275\227\347\232\223\346\231\250/20260511-\345\237\272\344\272\216Vue3\347\232\204TypeScript.md"
similarity index 100%
rename from "\347\275\227\347\232\223\346\231\250/202605011-\345\237\272\344\272\216Vue3\347\232\204TypeScript.md"
rename to "\347\275\227\347\232\223\346\231\250/20260511-\345\237\272\344\272\216Vue3\347\232\204TypeScript.md"
-- 
Gitee


From 296213c7b79770f0e20076148314b8ef91b09a44 Mon Sep 17 00:00:00 2001
From: Lhchen <2244349522@qq.com>
Date: Tue, 12 May 2026 06:09:35 +0000
Subject: [PATCH 09/19] =?UTF-8?q?update=20=20=E7=BD=97=E7=9A=93=E6=99=A8/2?=
 =?UTF-8?q?0260506-Vue.md.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Lhchen <2244349522@qq.com>
---
 .../20260506\347\274\226\350\276\221-Vue.md"                      | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename "\347\275\227\347\232\223\346\231\250/20260506-Vue.md" => "\347\275\227\347\232\223\346\231\250/20260506\347\274\226\350\276\221-Vue.md" (100%)

diff --git "a/\347\275\227\347\232\223\346\231\250/20260506-Vue.md" "b/\347\275\227\347\232\223\346\231\250/20260506\347\274\226\350\276\221-Vue.md"
similarity index 100%
rename from "\347\275\227\347\232\223\346\231\250/20260506-Vue.md"
rename to "\347\275\227\347\232\223\346\231\250/20260506\347\274\226\350\276\221-Vue.md"
-- 
Gitee


From 75b5bbe1872bd917cdc2597ae15f5259a4b40bea Mon Sep 17 00:00:00 2001
From: Lhchen <2244349522@qq.com>
Date: Tue, 12 May 2026 06:10:40 +0000
Subject: [PATCH 10/19] =?UTF-8?q?rename=20=E7=BD=97=E7=9A=93=E6=99=A8/2026?=
 =?UTF-8?q?0506=E7=BC=96=E8=BE=91-Vue.md=20to=20=E7=BD=97=E7=9A=93?=
 =?UTF-8?q?=E6=99=A8/20260506-Vue=E7=BB=83=E4=B9=A0.md.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Lhchen <2244349522@qq.com>
---
 .../20260506-Vue\347\273\203\344\271\240.md"                      | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename "\347\275\227\347\232\223\346\231\250/20260506\347\274\226\350\276\221-Vue.md" => "\347\275\227\347\232\223\346\231\250/20260506-Vue\347\273\203\344\271\240.md" (100%)

diff --git "a/\347\275\227\347\232\223\346\231\250/20260506\347\274\226\350\276\221-Vue.md" "b/\347\275\227\347\232\223\346\231\250/20260506-Vue\347\273\203\344\271\240.md"
similarity index 100%
rename from "\347\275\227\347\232\223\346\231\250/20260506\347\274\226\350\276\221-Vue.md"
rename to "\347\275\227\347\232\223\346\231\250/20260506-Vue\347\273\203\344\271\240.md"
-- 
Gitee


From 6b24f38cf79a2de0427e9524b41aec33563cfdba Mon Sep 17 00:00:00 2001
From: Lhchen <2244349522@qq.com>
Date: Tue, 12 May 2026 14:12:40 +0800
Subject: [PATCH 11/19] =?UTF-8?q?=E8=80=81=E8=99=8E=E8=80=81=E5=B8=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...0506-\345\237\272\344\272\216Vue3\347\232\204TypeScript.md" | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git "a/\347\275\227\347\232\223\346\231\250/20260506-\345\237\272\344\272\216Vue3\347\232\204TypeScript.md" "b/\347\275\227\347\232\223\346\231\250/20260506-\345\237\272\344\272\216Vue3\347\232\204TypeScript.md"
index acfede83..20811b34 100644
--- "a/\347\275\227\347\232\223\346\231\250/20260506-\345\237\272\344\272\216Vue3\347\232\204TypeScript.md"
+++ "b/\347\275\227\347\232\223\346\231\250/20260506-\345\237\272\344\272\216Vue3\347\232\204TypeScript.md"
@@ -743,7 +743,8 @@ id: number
 
 Vue3 中：
 
-<script setup> 默认封闭。
+`<script setup>` 默认封闭。
+
 
 需要主动暴露。
 
-- 
Gitee


From ea6580319efb04949651d21245c1e3fa2bdbf9b5 Mon Sep 17 00:00:00 2001
From: Lhchen <2244349522@qq.com>
Date: Wed, 13 May 2026 02:32:29 +0000
Subject: [PATCH 12/19] =?UTF-8?q?update=20=E7=BD=97=E7=9A=93=E6=99=A8/2026?=
 =?UTF-8?q?0508-Vue=E6=8F=92=E6=A7=BD.md.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Lhchen <2244349522@qq.com>
---
 .../20260508-Vue\346\217\222\346\247\275.md"  | 59 +++++++++++--------
 1 file changed, 33 insertions(+), 26 deletions(-)

diff --git "a/\347\275\227\347\232\223\346\231\250/20260508-Vue\346\217\222\346\247\275.md" "b/\347\275\227\347\232\223\346\231\250/20260508-Vue\346\217\222\346\247\275.md"
index 902d09d9..7a37334d 100644
--- "a/\347\275\227\347\232\223\346\231\250/20260508-Vue\346\217\222\346\247\275.md"
+++ "b/\347\275\227\347\232\223\346\231\250/20260508-Vue\346\217\222\346\247\275.md"
@@ -1,15 +1,15 @@
-## 笔记
-
-### 插槽 Slot
-
+# 笔记
+## 插槽 Slot
 组件的内容分发机制，允许父组件向子组件传递 HTML 结构，使组件更灵活、可复用，是组件封装的重要能力。
 
-#### 默认插槽
-
-子组件预留一个默认插槽，父组件插入的内容会自动填充到该插槽。
+### 默认插槽
+**描述：**
+子组件预留一个默认插槽出口，父组件写在子组件内部的所有内容，会自动填充到这个位置。
+**语法：**
+- 子组件：`<slot></slot>`（无 name 属性即为默认插槽）
+- 父组件：直接在组件标签内书写内容，无需包裹 template
 
 子组件 MyBox.vue
-
 ```vue
 <template>
   <div class="box">
@@ -20,7 +20,6 @@
 ```
 
 父组件使用
-
 ```vue
 <template>
   <MyBox>
@@ -30,12 +29,14 @@
 </template>
 ```
 
-#### 具名插槽（多个插槽区分使用）
-
-子组件预留多个插槽，通过名称区分，父组件可针对性填充不同插槽内容。
+### 具名插槽（多个插槽区分使用）
+**描述：**
+子组件需要多个插槽位置时，给插槽命名区分；父组件通过名称精准匹配，把内容放到指定位置。
+**语法：**
+- 子组件：`<slot name="插槽名"></slot>`
+- 父组件：`<template #插槽名> 内容 </template>`
 
 **子组件**
-
 ```vue
 <template>
   <div class="container">
@@ -50,7 +51,6 @@
 ```
 
 **父组件使用**
-
 ```vue
 <template>
   <MyBox>
@@ -67,14 +67,21 @@
 </template>
 ```
 
-#### 作用域插槽（子组件向插槽传数据）
+### 作用域插槽（子组件向插槽传数据）
+**描述：**
+让子组件可以把自身的数据传递给父组件的插槽内容使用，实现子传父数据。
+**语法：**
+- 子组件：`<slot :自定义变量名="数据"></slot>` 绑定数据
+- 父组件：`#插槽名="{ 变量名 }"` 解构接收数据
 
-作用域插槽可以和具名插槽结合使用，给指定名称的插槽传递数据，父组件通过对应插槽名接收数据。
-
-##### 默认作用域插槽
+#### 默认作用域插槽
+**描述：**
+给默认插槽绑定数据，父组件从默认插槽接收子组件数据并渲染。
+**语法：**
+- 子组件：默认插槽上用 `:变量="数据"` 传值
+- 父组件：`<template #default="{ 变量 }">` 接收
 
 **子组件**
-
 ```vue
 <template>
   <div>
@@ -91,7 +98,6 @@ const userList = ref([{ id: 1, name: '小明' }, { id: 2, name: '小红' }])
 ```
 
 **父组件接收数据并渲染**
-
 ```vue
 <template>
   <MyBox>
@@ -103,10 +109,14 @@ const userList = ref([{ id: 1, name: '小明' }, { id: 2, name: '小红' }])
 </template>
 ```
 
-##### 具名作用域插槽
+#### 具名作用域插槽
+**描述：**
+给具名插槽单独绑定数据，每个命名插槽可传递独立数据。
+**语法：**
+- 子组件：`<slot name="名称" :变量="数据"></slot>`
+- 父组件：`<template #名称="{ 变量 }">` 接收对应数据
 
 **子组件**
-
 ```vue
 <template>
   <div class="card">
@@ -132,7 +142,6 @@ const contentList = ref([
 ```
 
 **父组件使用具名作用域插槽**
-
 ```vue
 <template>
   <MyCard>
@@ -156,7 +165,6 @@ import MyCard from './MyCard.vue'
 ```
 
 ## 作业
-
 ```vue
 <script setup lang="ts">
 import { ref, type Ref } from 'vue';
@@ -243,5 +251,4 @@ function formatDate(date: Date) {
     background-color: yellow;
 }
 </style>
-```
-
+```
\ No newline at end of file
-- 
Gitee


From d1a0bd68948a2ce2af2c99831b815250f5d358ad Mon Sep 17 00:00:00 2001
From: Lhchen <2244349522@qq.com>
Date: Wed, 13 May 2026 02:33:08 +0000
Subject: [PATCH 13/19] =?UTF-8?q?update=20=E7=BD=97=E7=9A=93=E6=99=A8/2026?=
 =?UTF-8?q?0508-Vue=E6=8F=92=E6=A7=BD.md.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Lhchen <2244349522@qq.com>
---
 .../20260508-Vue\346\217\222\346\247\275.md"                  | 4 ++++
 1 file changed, 4 insertions(+)

diff --git "a/\347\275\227\347\232\223\346\231\250/20260508-Vue\346\217\222\346\247\275.md" "b/\347\275\227\347\232\223\346\231\250/20260508-Vue\346\217\222\346\247\275.md"
index 7a37334d..af2912b5 100644
--- "a/\347\275\227\347\232\223\346\231\250/20260508-Vue\346\217\222\346\247\275.md"
+++ "b/\347\275\227\347\232\223\346\231\250/20260508-Vue\346\217\222\346\247\275.md"
@@ -5,6 +5,7 @@
 ### 默认插槽
 **描述：**
 子组件预留一个默认插槽出口，父组件写在子组件内部的所有内容，会自动填充到这个位置。
+
 **语法：**
 - 子组件：`<slot></slot>`（无 name 属性即为默认插槽）
 - 父组件：直接在组件标签内书写内容，无需包裹 template
@@ -32,6 +33,7 @@
 ### 具名插槽（多个插槽区分使用）
 **描述：**
 子组件需要多个插槽位置时，给插槽命名区分；父组件通过名称精准匹配，把内容放到指定位置。
+
 **语法：**
 - 子组件：`<slot name="插槽名"></slot>`
 - 父组件：`<template #插槽名> 内容 </template>`
@@ -70,6 +72,7 @@
 ### 作用域插槽（子组件向插槽传数据）
 **描述：**
 让子组件可以把自身的数据传递给父组件的插槽内容使用，实现子传父数据。
+
 **语法：**
 - 子组件：`<slot :自定义变量名="数据"></slot>` 绑定数据
 - 父组件：`#插槽名="{ 变量名 }"` 解构接收数据
@@ -112,6 +115,7 @@ const userList = ref([{ id: 1, name: '小明' }, { id: 2, name: '小红' }])
 #### 具名作用域插槽
 **描述：**
 给具名插槽单独绑定数据，每个命名插槽可传递独立数据。
+
 **语法：**
 - 子组件：`<slot name="名称" :变量="数据"></slot>`
 - 父组件：`<template #名称="{ 变量 }">` 接收对应数据
-- 
Gitee


From 2066b426edc29d058083354f20df79e4cdf582f2 Mon Sep 17 00:00:00 2001
From: Lhchen <2244349522@qq.com>
Date: Wed, 13 May 2026 02:41:11 +0000
Subject: [PATCH 14/19] =?UTF-8?q?update=20=E7=BD=97=E7=9A=93=E6=99=A8/2026?=
 =?UTF-8?q?0507-Vue=E7=BB=84=E4=BB=B6.md.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Lhchen <2244349522@qq.com>
---
 .../20260507-Vue\347\273\204\344\273\266.md"  | 69 +++++++++++--------
 1 file changed, 40 insertions(+), 29 deletions(-)

diff --git "a/\347\275\227\347\232\223\346\231\250/20260507-Vue\347\273\204\344\273\266.md" "b/\347\275\227\347\232\223\346\231\250/20260507-Vue\347\273\204\344\273\266.md"
index 55cb58ad..0f8e144f 100644
--- "a/\347\275\227\347\232\223\346\231\250/20260507-Vue\347\273\204\344\273\266.md"
+++ "b/\347\275\227\347\232\223\346\231\250/20260507-Vue\347\273\204\344\273\266.md"
@@ -1,10 +1,12 @@
-## 笔记
 
+## 笔记
 ### 组件基本定义与使用
-
 #### 全局注册组件
-
 在入口文件 main.js 中注册，所有页面和组件都能直接使用。
+- 注册方法：`app.component(组件名, 组件文件)`
+- 第一个参数：组件在模板中使用的标签名
+- 第二个参数：导入的组件对象
+- 注册后全局可直接使用，无需再次导入
 
 ```javascript
 // main.js
@@ -20,8 +22,10 @@ app.mount('#app')
 ```
 
 #### 局部注册组件
-
 推荐优先使用局部注册，减少不必要的全局挂载，优化性能。
+- Vue3 `<script setup>` 直接导入即可使用
+- 导入的变量名 = 模板标签名
+- 只在当前组件生效，不污染全局
 
 ```vue
 <!-- 父组件 App.vue -->
@@ -40,15 +44,14 @@ import MyCard from './components/MyCard.vue'
 ```
 
 ### 组件通信
-
 #### 父子组件通信
-
 ##### Props（父 → 子 传值）
-
 父组件通过属性传递数据，子组件通过 defineProps 接收数据，支持类型校验、默认值、必填校验。
+- 父组件：`<Child 属性名="值" :动态属性="变量" />`
+- 子组件：`defineProps({ 属性名: 校验规则 })`
+- 可配置：type 类型 / required 必填 / default 默认值
 
 **子组件 Child.vue**
-
 ```vue
 <template>
   <div class="child">
@@ -75,7 +78,6 @@ const props = defineProps({
 ```
 
 **父组件使用**
-
 ```vue
 <template>
   <Child title="我是父组件传的值" :count="10" />
@@ -87,11 +89,12 @@ import Child from './Child.vue'
 ```
 
 ##### defineEmits（子 → 父 传值/触发事件）
-
 子组件通过自定义事件向父组件发送数据，父组件通过 v-on 监听事件。
+- 子组件：`defineEmits(['事件名'])` 声明 → `emit(事件名, 参数)` 触发
+- 父组件：`@事件名="处理方法"` 监听接收
+- 可传递多个参数，父组件按顺序接收
 
 **子组件Child.vue**
-
 ```vue
 <template>
   <button @click="sendMsg">向父组件传值</button>
@@ -109,7 +112,6 @@ const sendMsg = () => {
 ```
 
 **父组件监听**
-
 ```vue
 <template>
   <Child @send-data="handleReceive" />
@@ -126,11 +128,14 @@ const handleReceive = (msg, num) => {
 ```
 
 #### 跨级传值（provide / inject）
-
 用于祖孙组件、多级组件间传值，无需逐层传递（跳过中间组件），父组件（或祖先组件）用 provide 提供数据，子组件（或后代组件）用 inject 接收数据，支持响应式传值。
+- provide：`provide('标识名', 数据/方法)`
+  - 参数1：自定义唯一名称
+  - 参数2：要传递的内容
+- inject：`inject('标识名', 默认值)`
+- 支持响应式数据，更新后所有后代同步更新
 
 **祖先组件（提供数据）**
-
 ```vue
 <script setup>
 import { provide, ref } from 'vue'
@@ -151,7 +156,6 @@ provide('updateUser', updateUser)
 ```
 
 **后代组件（接收数据）**
-
 ```vue
 <template>
   <div>
@@ -174,10 +178,11 @@ const updateUser = inject('updateUser')
 ```
 
 ### 组件核心能力（数据与生命周期）
-
 #### 组件响应式数据（组件内部状态管理）
-
 组件内部的响应式数据，用于维护组件自身的状态，仅在组件内部或通过通信传递给其他组件，常用 ref 和 reactive 定义。
+- ref：基本类型（数字/字符串/布尔）
+- reactive：对象/数组
+- 数据变化 → 视图自动更新
 
 ```vue
 <template>
@@ -195,15 +200,15 @@ import { ref, reactive } from 'vue'
 const count = ref(0)
 // 引用类型响应式（组件内部状态）
 const info = reactive({ name: '组件自身数据' })
-&lt;/script&gt;
+</script>
 ```
 
 #### 组件生命周期
-
 组件从创建到销毁的整个过程，Vue3 组合式 API 中使用钩子函数监听，用于在组件不同阶段执行自定义逻辑，是组件的核心能力之一。
+- 直接导入使用，传入回调函数自动执行
+- 用于请求、操作DOM、清理定时器/监听
 
 常用钩子函数：
-
 - onMounted：组件挂载完成（DOM 渲染完毕，适合发起网络请求、操作 DOM）
 - onUpdated：组件更新完成（组件数据变化导致 DOM 重新渲染后执行）
 - onUnmounted：组件卸载（组件销毁时执行，适合清除定时器、事件监听、取消请求）
@@ -229,8 +234,11 @@ onUnmounted(() => {
 ```
 
 ### 模板引用（获取 DOM/子组件实例）
-
-通过 ref 获取组件内部的 DOM 元素或子组件实例，实现组件内部 DOM 操作或调用子组件方法，是组件的常用能力。
+通过 ref 获取组件内部的 DOM 元素或子组件实例，实现组件内部 DOM 操作或调用子组件方法。
+- 模板：`ref="变量名"`
+- 脚本：`const 变量名 = ref(null)`
+- 挂载后通过 `.value` 获取真实DOM / 子组件实例
+- 子组件必须用 `defineExpose` 暴露方法才能被调用
 
 ```vue
 <template>
@@ -258,6 +266,8 @@ onMounted(() => {
 ```
 
 子组件暴露方法/属性（默认不暴露，需手动暴露）
+- 作用：让父组件能访问子组件的方法/属性
+- 语法：`defineExpose({ 方法名/属性名 })`
 
 ```vue
 <script setup>
@@ -274,8 +284,10 @@ defineExpose({
 ```
 
 ### 动态组件
-
 根据数据动态切换不同的组件，实现组件的灵活切换，适用于标签页、弹窗切换等场景。
+- 使用内置组件：`<component :is="组件变量" />`
+- `:is` 绑定要显示的组件
+- 切换时会销毁旧组件、创建新组件
 
 ```vue
 <template>
@@ -298,8 +310,10 @@ const currentCom = ref('Home')
 ```
 
 ### 组件缓存 keep-alive
-
-缓存不活动的组件实例，避免组件重复创建和销毁，提升页面性能，常与动态组件搭配使用（缓存切换后的组件状态）。
+缓存不活动的组件实例，避免组件重复创建和销毁，提升页面性能，常与动态组件搭配使用。
+- 语法：`<keep-alive>` 包裹需要缓存的组件
+- 效果：切换后组件不销毁，保留状态
+- 适合：标签页、表单页、频繁切换的模块
 
 ```vue
 <template>
@@ -311,8 +325,6 @@ const currentCom = ref('Home')
 ```
 
 ## 作业
-
-
 ```vue
 <script setup lang="ts">
 import { ref, Ref } from 'vue';
@@ -492,5 +504,4 @@ cartItems.forEach((item) => {
     <div class="total">总计：¥{{ totalPrice }}</div>
   </div>
 </template>
-```
-
+```
\ No newline at end of file
-- 
Gitee


From 9f7c14464eb2a6bb76f565160070c04b0bb3f6be Mon Sep 17 00:00:00 2001
From: Lhchen <2244349522@qq.com>
Date: Wed, 13 May 2026 02:43:25 +0000
Subject: [PATCH 15/19] =?UTF-8?q?update=20=E7=BD=97=E7=9A=93=E6=99=A8/2026?=
 =?UTF-8?q?0508-Vue=E6=8F=92=E6=A7=BD.md.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Lhchen <2244349522@qq.com>
---
 .../20260508-Vue\346\217\222\346\247\275.md"  | 52 +++++++------------
 1 file changed, 20 insertions(+), 32 deletions(-)

diff --git "a/\347\275\227\347\232\223\346\231\250/20260508-Vue\346\217\222\346\247\275.md" "b/\347\275\227\347\232\223\346\231\250/20260508-Vue\346\217\222\346\247\275.md"
index af2912b5..e712d4ac 100644
--- "a/\347\275\227\347\232\223\346\231\250/20260508-Vue\346\217\222\346\247\275.md"
+++ "b/\347\275\227\347\232\223\346\231\250/20260508-Vue\346\217\222\346\247\275.md"
@@ -1,14 +1,12 @@
 # 笔记
 ## 插槽 Slot
-组件的内容分发机制，允许父组件向子组件传递 HTML 结构，使组件更灵活、可复用，是组件封装的重要能力。
+组件的内容分发机制，允许父组件向子组件传递 HTML 结构，让组件更灵活、可复用。
 
 ### 默认插槽
-**描述：**
-子组件预留一个默认插槽出口，父组件写在子组件内部的所有内容，会自动填充到这个位置。
-
-**语法：**
-- 子组件：`<slot></slot>`（无 name 属性即为默认插槽）
-- 父组件：直接在组件标签内书写内容，无需包裹 template
+子组件只留一个通用内容占位位置，父组件写在子组件标签中间的内容，会自动填充进去。
+- 写法：子组件直接写 `<slot></slot>`
+- 规则：不用加任何属性，一个组件只能有一个默认插槽
+- 用法：父组件直接在子组件标签内部写内容即可
 
 子组件 MyBox.vue
 ```vue
@@ -31,12 +29,10 @@
 ```
 
 ### 具名插槽（多个插槽区分使用）
-**描述：**
-子组件需要多个插槽位置时，给插槽命名区分；父组件通过名称精准匹配，把内容放到指定位置。
-
-**语法：**
-- 子组件：`<slot name="插槽名"></slot>`
-- 父组件：`<template #插槽名> 内容 </template>`
+适合页面分多块区域布局，给每个插槽起名字，父组件可以把内容精准放到指定位置。
+- 子组件：`<slot name="插槽名"></slot>` 给插槽命名
+- 父组件：用 `<template #插槽名>` 包裹对应区域内容
+- 优势：可以同时定义多个互不干扰的插槽位置
 
 **子组件**
 ```vue
@@ -70,19 +66,14 @@
 ```
 
 ### 作用域插槽（子组件向插槽传数据）
-**描述：**
-让子组件可以把自身的数据传递给父组件的插槽内容使用，实现子传父数据。
-
-**语法：**
-- 子组件：`<slot :自定义变量名="数据"></slot>` 绑定数据
-- 父组件：`#插槽名="{ 变量名 }"` 解构接收数据
+普通插槽只能父传结构，作用域插槽可以**子组件把自己的数据传给父组件使用**。
+- 子组件：在 slot 标签上自定义属性绑定数据
+- 父组件：在插槽模板中解构接收子组件传过来的字段
+- 可以和默认插槽、具名插槽组合使用
 
 #### 默认作用域插槽
-**描述：**
-给默认插槽绑定数据，父组件从默认插槽接收子组件数据并渲染。
-**语法：**
-- 子组件：默认插槽上用 `:变量="数据"` 传值
-- 父组件：`<template #default="{ 变量 }">` 接收
+- 子组件在无名称的默认 slot 上绑定自定义数据
+- 父组件通过 `#default` 接收，直接解构取值渲染
 
 **子组件**
 ```vue
@@ -113,12 +104,9 @@ const userList = ref([{ id: 1, name: '小明' }, { id: 2, name: '小红' }])
 ```
 
 #### 具名作用域插槽
-**描述：**
-给具名插槽单独绑定数据，每个命名插槽可传递独立数据。
-
-**语法：**
-- 子组件：`<slot name="名称" :变量="数据"></slot>`
-- 父组件：`<template #名称="{ 变量 }">` 接收对应数据
+- 给带 name 的具名插槽单独绑定专属数据
+- 每个命名插槽数据相互独立，互不影响
+- 父组件对应 `#插槽名` 解构接收当前插槽的数据
 
 **子组件**
 ```vue
@@ -157,7 +145,7 @@ const contentList = ref([
     <!-- 接收 content 插槽传递的数据 -->
     <template #content="{ list }">
       <div v-for="item in list" :key="item.name">
-        姓名：{{ item }}，年龄：{{ item.age }}
+        姓名：{{ item.name }}，年龄：{{ item.age }}
       </div>
     </template>
   </MyCard>
@@ -255,4 +243,4 @@ function formatDate(date: Date) {
     background-color: yellow;
 }
 </style>
-```
\ No newline at end of file
+```
-- 
Gitee


From 3bf29eb1ba56376f4cac60565dd55b33bec5c85a Mon Sep 17 00:00:00 2001
From: Lhchen <2244349522@qq.com>
Date: Wed, 13 May 2026 10:53:01 +0800
Subject: [PATCH 16/19] =?UTF-8?q?=E8=80=81=E8=99=8E=E8=80=81=E9=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20260507-Vue\347\273\204\344\273\266.md"      |  3 ++-
 .../20260508-Vue\346\217\222\346\247\275.md"      | 15 ++++++++-------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git "a/\347\275\227\347\232\223\346\231\250/20260507-Vue\347\273\204\344\273\266.md" "b/\347\275\227\347\232\223\346\231\250/20260507-Vue\347\273\204\344\273\266.md"
index 0f8e144f..20bcf0c1 100644
--- "a/\347\275\227\347\232\223\346\231\250/20260507-Vue\347\273\204\344\273\266.md"
+++ "b/\347\275\227\347\232\223\346\231\250/20260507-Vue\347\273\204\344\273\266.md"
@@ -1,6 +1,7 @@
-
 ## 笔记
+
 ### 组件基本定义与使用
+
 #### 全局注册组件
 在入口文件 main.js 中注册，所有页面和组件都能直接使用。
 - 注册方法：`app.component(组件名, 组件文件)`
diff --git "a/\347\275\227\347\232\223\346\231\250/20260508-Vue\346\217\222\346\247\275.md" "b/\347\275\227\347\232\223\346\231\250/20260508-Vue\346\217\222\346\247\275.md"
index e712d4ac..817c4511 100644
--- "a/\347\275\227\347\232\223\346\231\250/20260508-Vue\346\217\222\346\247\275.md"
+++ "b/\347\275\227\347\232\223\346\231\250/20260508-Vue\346\217\222\346\247\275.md"
@@ -1,8 +1,8 @@
-# 笔记
-## 插槽 Slot
+## 笔记
+### 插槽 Slot
 组件的内容分发机制，允许父组件向子组件传递 HTML 结构，让组件更灵活、可复用。
 
-### 默认插槽
+#### 默认插槽
 子组件只留一个通用内容占位位置，父组件写在子组件标签中间的内容，会自动填充进去。
 - 写法：子组件直接写 `<slot></slot>`
 - 规则：不用加任何属性，一个组件只能有一个默认插槽
@@ -28,7 +28,7 @@
 </template>
 ```
 
-### 具名插槽（多个插槽区分使用）
+#### 具名插槽（多个插槽区分使用）
 适合页面分多块区域布局，给每个插槽起名字，父组件可以把内容精准放到指定位置。
 - 子组件：`<slot name="插槽名"></slot>` 给插槽命名
 - 父组件：用 `<template #插槽名>` 包裹对应区域内容
@@ -65,13 +65,13 @@
 </template>
 ```
 
-### 作用域插槽（子组件向插槽传数据）
+#### 作用域插槽（子组件向插槽传数据）
 普通插槽只能父传结构，作用域插槽可以**子组件把自己的数据传给父组件使用**。
 - 子组件：在 slot 标签上自定义属性绑定数据
 - 父组件：在插槽模板中解构接收子组件传过来的字段
 - 可以和默认插槽、具名插槽组合使用
 
-#### 默认作用域插槽
+##### 默认作用域插槽
 - 子组件在无名称的默认 slot 上绑定自定义数据
 - 父组件通过 `#default` 接收，直接解构取值渲染
 
@@ -92,6 +92,7 @@ const userList = ref([{ id: 1, name: '小明' }, { id: 2, name: '小红' }])
 ```
 
 **父组件接收数据并渲染**
+
 ```vue
 <template>
   <MyBox>
@@ -103,7 +104,7 @@ const userList = ref([{ id: 1, name: '小明' }, { id: 2, name: '小红' }])
 </template>
 ```
 
-#### 具名作用域插槽
+##### 具名作用域插槽
 - 给带 name 的具名插槽单独绑定专属数据
 - 每个命名插槽数据相互独立，互不影响
 - 父组件对应 `#插槽名` 解构接收当前插槽的数据
-- 
Gitee


From e44284cb83dd13d98734a16547371ff364f20880 Mon Sep 17 00:00:00 2001
From: Lhchen <2244349522@qq.com>
Date: Wed, 13 May 2026 11:14:20 +0800
Subject: [PATCH 17/19] =?UTF-8?q?=E8=80=81=E8=99=8E=E8=80=81=E9=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20260424-Vue\346\214\207\344\273\244.md"  | 256 +++++++++++++-----
 .../20260513-Vue\350\267\257\347\224\261.md"  | 204 ++++++++++++++
 2 files changed, 391 insertions(+), 69 deletions(-)
 create mode 100644 "\347\275\227\347\232\223\346\231\250/20260513-Vue\350\267\257\347\224\261.md"

diff --git "a/\347\275\227\347\232\223\346\231\250/20260424-Vue\346\214\207\344\273\244.md" "b/\347\275\227\347\232\223\346\231\250/20260424-Vue\346\214\207\344\273\244.md"
index 4b9f0907..9ede70f0 100644
--- "a/\347\275\227\347\232\223\346\231\250/20260424-Vue\346\214\207\344\273\244.md"
+++ "b/\347\275\227\347\232\223\346\231\250/20260424-Vue\346\214\207\344\273\244.md"
@@ -1,16 +1,15 @@
 ## 笔记
-
 ### 指令基础
-
 - 指令：Vue 中以 `v-` 开头的特殊属性，用于**操作DOM、控制视图、绑定数据、绑定事件**
 - 语法：`v-指令名="数据/表达式"`
 - 优势：数据驱动视图，无需手动操作DOM
 
----
-
 ### 内容渲染指令
 #### v-text
-- 作用：渲染**纯文本**，覆盖标签内容，不解析HTML
+- 渲染**纯文本**内容
+- 会覆盖标签内部原有所有内容
+- 不解析 HTML 标签，只展示文本
+
 ```vue
 <template>
   <div v-text="msg"></div>
@@ -23,40 +22,50 @@ const msg = ref('学习Vue指令')
 ```
 
 #### v-html
-- 作用：渲染**HTML标签**
-- 注意：有XSS风险，不渲染用户输入内容
+- 渲染包含 HTML 标签的字符串内容
+- 会解析标签并生成对应 DOM 结构
+- 存在 XSS 安全风险，不可渲染用户输入内容
+
 ```vue
 <template>
   <div v-html="htmlStr"></div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 const htmlStr = ref('<h3 style="color:red">红色标题</h3>')
 </script>
 ```
 
 #### v-once
-- 作用：**只渲染一次**，数据更新视图不变
+- 元素**只进行初次渲染**
+- 数据后续更新，视图不会重新渲染
+- 用于优化不需要更新的静态内容
+
 ```vue
 <div v-once>{{ num }}</div>
 ```
 
 #### v-pre
-- 作用：跳过编译，原样显示内容
+- 跳过当前节点的编译过程
+- 标签内内容**原样输出**，不解析插值语法
+- 用于展示原始代码片段
+
 ```vue
 <div v-pre>{{ 不解析 }}</div>
 ```
 
----
-
 ### 条件渲染指令
 #### v-if / v-else-if / v-else
-- 原理：不满足条件**直接销毁DOM**
+- 根据条件**动态创建/销毁 DOM**
+- 条件不成立时，元素直接从页面移除
+- 多分支指令必须**连续书写**，不能被其他标签打断
+
 ```vue
 <template>
   <div v-if="score >= 90">优秀</div>
   <div v-else-if="score >= 60">合格</div>
-  <div v-else">不及格</div>
+  <div v-else>不及格</div>
 </template>
 
 <script setup>
@@ -66,8 +75,11 @@ const score = ref(80)
 ```
 
 #### v-show
-- 原理：用CSS `display` 隐藏，**DOM保留**
-- 适合：频繁切换
+- 根据条件**控制元素显示隐藏**
+- 底层使用 CSS `display:none` 实现隐藏
+- DOM 元素始终保留在页面中
+- 适合**频繁切换**显示状态的场景
+
 ```vue
 <template>
   <div v-show="isShow">显示隐藏内容</div>
@@ -79,15 +91,16 @@ const isShow = ref(true)
 </script>
 ```
 
----
-
 ### 循环指令 v-for
-
-- 作用：遍历数据渲染列表
-
-- 必须加 **:key**
+- 遍历数组/对象数据，循环渲染列表结构
+- 必须配合 `:key` 属性使用，保证列表更新性能
+- 支持遍历数组、对象、数字等多种数据类型
 
 #### 遍历数组
+- 语法：`(item, index) in 数组`
+- item：当前遍历项
+- index：当前项索引值
+
 ```vue
 <template>
   <ul>
@@ -104,6 +117,10 @@ const list = ref(['Vue', 'React', '小程序'])
 ```
 
 #### 遍历对象
+- 语法：`(value, key) in 对象`
+- value：对象属性值
+- key：对象属性名
+
 ```vue
 <template>
   <div v-for="(value, key) in user" :key="key">
@@ -121,14 +138,14 @@ const user = reactive({
 </script>
 ```
 
----
-
 ### 属性绑定v-bind
-
-- 简写：`:`
-- 作用：动态绑定标签原生属性、class 类名、行内 style 样式
+- 官方简写：`:`
+- 动态绑定标签原生属性、class、style
+- 绑定后属性值可使用变量、表达式
 
 #### 基础属性绑定
+- 支持 src、title、href、disabled 等所有原生属性
+- 动态数据变化，属性自动更新
 
 ```vue
 <template>
@@ -144,8 +161,10 @@ const tip = ref('悬浮查看提示信息')
 ```
 
 #### 动态绑定 class
-
-**对象写法：控制类名显示 / 隐藏**
+**对象写法**
+- 语法：`{ 类名: 布尔值 }`
+- 布尔值为 true 时，添加对应类名
+- 可同时控制多个类名的显示隐藏
 
 ```vue
 <template>
@@ -154,7 +173,6 @@ const tip = ref('悬浮查看提示信息')
 
 <script setup>
 import { ref } from 'vue'
-// 布尔值为true则添加对应类名
 const isActive = ref(true)
 const isBold = ref(false)
 </script>
@@ -165,7 +183,10 @@ const isBold = ref(false)
 </style>
 ```
 
- **数组写法：批量绑定多个固定类名**
+**数组写法**
+- 批量绑定多个固定类名
+- 直接传入类名变量/字符串
+- 类名会全部生效展示
 
 ```vue
 <template>
@@ -184,8 +205,10 @@ const boxSize = 'font-16'
 ```
 
 #### 动态绑定 style
-
-**对象写法：常用，动态控制行内样式**
+**对象写法**
+- 语法：`{ css属性名: 属性值 }`
+- css 属性名采用小驼峰命名
+- 适合动态控制单个/多个样式
 
 ```vue
 <template>
@@ -198,7 +221,10 @@ const textColor = ref('#f56c6c')
 </script>
 ```
 
-**数组写法：合并多个样式对象**
+**数组写法**
+- 绑定多个样式对象
+- 多个样式会自动合并生效
+- 适合样式分模块定义场景
 
 ```vue
 <template>
@@ -212,10 +238,14 @@ const styleTwo = { padding: '10px', border: '1px solid #ccc' }
 ```
 
 ### 事件绑定 v-on
-- 简写：`@`
-- 作用：绑定**页面原生事件**，触发 methods/setup 函数
+- 官方简写：`@`
+- 绑定原生 DOM 事件，触发对应函数执行
+- 支持自定义传参、事件对象、修饰符
 
 #### 事件传参
+- 函数后加括号，可传递自定义参数
+- 支持传递数字、字符串、变量等类型
+
 ```vue
 <template>
   <button @click="add(5)">点击+5</button>
@@ -231,6 +261,9 @@ const add = (num) => {
 ```
 
 #### 获取原生事件对象 $event
+- 使用 `$event` 传递原生事件对象
+- 可获取事件源、阻止默认行为等
+
 ```vue
 <template>
   <button @click="getEvent($event)">获取事件对象</button>
@@ -238,43 +271,37 @@ const add = (num) => {
 
 <script setup>
 const getEvent = (e) => {
-  console.log(e.target) // 当前点击DOM元素
+  console.log(e.target)
 }
 </script>
 ```
 
-#### 完整常用修饰符
-```bash
-@click.prevent   阻止标签默认行为
-@click.stop      阻止事件冒泡
-@click.once      事件只触发一次
-@click.self      仅点击自身元素才触发
-@click.capture   捕获模式执行
-
-@keyup.enter     回车按键触发
-@keyup.esc       返回退出触发
-```
+#### 常用事件修饰符
+- `@click.prevent` 阻止标签默认行为
+- `@click.stop` 阻止事件冒泡
+- `@click.once` 事件只触发一次
+- `@click.self` 仅点击自身触发事件
+- `@click.capture` 事件采用捕获模式
+- `@keyup.enter` 回车按键触发
+- `@keyup.esc` esc 按键触发
 
 #### 常用原生事件
-```txt
-@input    输入实时触发
-@change   值改变且失焦触发
-@blur     失去焦点
-@focus    获得焦点
-@submit   表单提交
-@mouseover 鼠标移入
-@mouseout  鼠标移出
-```
-
----
+- `@input` 输入框实时输入触发
+- `@change` 值改变且失焦后触发
+- `@blur` 输入框失去焦点触发
+- `@focus` 输入框获得焦点触发
+- `@submit` 表单提交触发
+- `@mouseover` 鼠标移入触发
+- `@mouseout` 鼠标移出触发
 
 ### 双向绑定 v-model 
-- 作用：表单元素 **数据 <=> 视图 双向同步**
-- 本质：语法糖 = `:value` 绑定 + `@input` 事件
+- 用于表单元素，实现**数据 ↔ 视图双向同步**
+- 视图修改 → 数据自动更新
+- 数据修改 → 视图自动更新
+- 底层语法糖：`value` 绑定 + `input` 事件
 
 #### 多表单元素支持
 **文本域 textarea**
-
 ```vue
 <template>
   <textarea v-model="desc"></textarea>
@@ -287,7 +314,6 @@ const desc = ref('')
 ```
 
 **下拉选择 select**
-
 ```vue
 <template>
   <select v-model="city">
@@ -302,8 +328,7 @@ const city = ref('beijing')
 </script>
 ```
 
-**复选框 / 单选框**
-
+**单选框、复选框**
 ```vue
 <!-- 单选框 -->
 <input type="radio" v-model="gender" value="男">男
@@ -313,18 +338,111 @@ const city = ref('beijing')
 <input type="checkbox" v-model="hobby" value="打球">打球
 ```
 
-#### 修饰符组合使用
+#### 修饰符使用
+- `.trim` 去除内容首尾空格
+- `.number` 将输入内容转为数字类型
+- `.lazy` 失去焦点后再同步数据
+- 多个修饰符可组合使用
+
 ```vue
-<!-- 先去首尾空格，再转为数字类型 -->
 <input v-model.trim.number="age" />
-
-<!-- 失去焦点后才同步数据 -->
 <input v-model.lazy="username" />
 ```
 
 #### v-model 底层原理
+- 等价于 `:value` 绑定数据
+- 配合 `@input` 事件更新数据
+- 底层实现：`username = $event.target.value`
+
 ```vue
-<!-- v-model 等价写法 -->
 <input :value="username" @input="username = $event.target.value" />
 ```
 
+## 作业
+```vue
+<script setup lang="ts">
+import { ref, type Ref } from 'vue';
+
+let url = "https://vuejs.org"
+let textClass = { highlight: true }
+let isReadonly: Ref<boolean> = ref(false)
+let isActive = ref(false)
+let hasError = ref(true)
+let fontColor = 'red'
+let fontSize = 24
+
+interface Article {
+    id: number,
+    isFeatured: boolean,
+    thumbnail: string,
+    title: string,
+    category: string,
+    author: string,
+    publishTime: Date
+}
+let article: Article = {
+    id: 0,
+    isFeatured: true,
+    thumbnail: 'https://lf-flow-web-cdn.doubao.com/obj/flow-doubao/doubao/web/doubao_avatar.png',
+    title: '我是标题',
+    category: '种类1',
+    author: '我是作者',
+    publishTime: new Date
+}
+
+function getTagColor(category: string) {
+    if (category === "种类1") {
+        return 'red'
+    } else {
+        return 'blue'
+    }
+}
+function formatDate(date: Date) {
+    return date
+}
+</script>
+
+<template>
+    <a v-bind:href="url">访问链接</a>
+    <p v-bind:class="textClass">这是一段文本</p>
+    <input type="text" v-bind:disabled="isReadonly" />
+    <div v-bind:class="{ active: isActive, 'text-danger': hasError }">动态Class</div>
+    <div v-bind:style="{ color: fontColor, fontSize: fontSize + 'px' }">样式文本</div>
+
+    <div class="news-card" :class="{ featured: article.isFeatured }">
+        <img :src="article.thumbnail" :alt="article.title" />
+        <div class="content">
+            <span class="tag" :style="{ backgroundColor: getTagColor(article.category) }">
+                {{ article.category }}
+            </span>
+            <h3 :class="{ 'highlight-title': article.isFeatured }">
+                {{ article.title }}
+            </h3>
+            <p class="meta">
+                <span>
+                    {{ article.author }}
+                </span>
+                <span>
+                    {{ formatDate(article.publishTime) }}
+                </span>
+            </p>
+            <a :href="'/article/' + article.id" class="read-more">阅读更多</a>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.highlight {
+    color: blue;
+    font-weight: bold;
+}
+
+.active {
+    background-color: red;
+}
+
+.text-danger {
+    background-color: yellow;
+}
+</style>
+```
diff --git "a/\347\275\227\347\232\223\346\231\250/20260513-Vue\350\267\257\347\224\261.md" "b/\347\275\227\347\232\223\346\231\250/20260513-Vue\350\267\257\347\224\261.md"
new file mode 100644
index 00000000..0d3ff708
--- /dev/null
+++ "b/\347\275\227\347\232\223\346\231\250/20260513-Vue\350\267\257\347\224\261.md"
@@ -0,0 +1,204 @@
+## 笔记
+### Vue3 路由基础与使用
+
+#### 路由安装
+- 项目单独安装 vue-router 依赖，Vue3 项目搭配 vue-router@4 版本使用
+- 安装完成后才可在项目中配置路由规则、实现页面跳转
+
+#### 路由创建与挂载
+- 单独新建路由配置文件，导入 `createRouter`、`createWebHistory` 核心方法
+- `createRouter` 用于创建路由实例，接收路由配置对象
+- `createWebHistory` 开启 history 路由模式，地址栏不带 # 号
+- 通过 routes 数组配置路由规则，最后在入口文件把路由实例挂载到 Vue 实例
+
+```javascript
+// router/index.js
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '../views/Home.vue'
+import About from '../views/About.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/about',
+    name: 'About',
+    component: About
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router
+```
+
+#### 入口文件挂载路由
+- 导入写好的路由文件
+- 通过 `app.use(router)` 全局安装路由，整个项目即可使用路由功能
+
+```javascript
+// main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+app.use(router)
+app.mount('#app')
+```
+
+#### 路由出口 router-view
+- 作为页面组件的渲染占位位置
+- 路由匹配到的页面，会自动渲染到 `<router-view>` 所在位置
+- 一般放在根组件 App.vue 中，固定页面布局，中间内容随路由切换
+
+```vue
+<template>
+  <!-- 路由跳转导航 -->
+  <router-link to="/">首页</router-link>
+  <router-link to="/about">关于</router-link>
+
+  <!-- 路由页面渲染出口 -->
+  <router-view></router-view>
+</template>
+```
+
+#### 路由导航 router-link
+- 替代 a 标签实现跳转，不会刷新整个页面
+- `to` 属性配置目标路由地址，和路由规则里的 path 保持一致
+- 自带路由激活样式，选中路由会自动添加默认 class
+
+#### 编程式导航
+- 不用标签，通过代码逻辑实现路由跳转
+- `useRouter` 获取路由实例，调用 `push` 方法跳转页面
+- 可以传字符串路径，也可以传对象配置路径和参数
+
+```vue
+<template>
+  <button @click="goHome">回到首页</button>
+  <button @click="goAbout">前往关于页</button>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
+const goHome = () => {
+  router.push('/')
+}
+const goAbout = () => {
+  router.push({ path: '/about' })
+}
+</script>
+```
+
+#### 路由传参
+##### 路径参数
+- 路由规则中通过 `:参数名` 声明动态参数
+- 跳转时在路径后拼接实际参数值
+- 页面内用 `useRoute` 获取 params 中的参数
+
+```javascript
+// 路由配置
+{
+  path: '/user/:id',
+  name: 'User',
+  component: () => import('../views/User.vue')
+}
+```
+
+```vue
+<!-- 跳转 -->
+<router-link to="/user/1001">用户</router-link>
+```
+
+```vue
+<!-- 接收参数页面 -->
+<script setup>
+import { useRoute } from 'vue-router'
+const route = useRoute()
+// 获取路径参数
+console.log(route.params.id)
+</script>
+```
+
+##### 查询参数
+- 不用提前在路由规则声明参数
+- 跳转时通过 query 传递键值对
+- 页面内从 route.query 直接取值
+
+```vue
+<script setup>
+import { useRouter, useRoute } from 'vue-router'
+const router = useRouter()
+
+const goPage = () => {
+  router.push({
+    path: '/about',
+    query: { name: '张三', age: 20 }
+  })
+}
+
+// 接收参数
+const route = useRoute()
+console.log(route.query.name)
+</script>
+```
+
+#### 嵌套路由
+- 适用于页面内包含子页面的布局结构
+- 路由规则中使用 `children` 配置子路由
+- 父组件中必须预留 `<router-view>` 作为子路由出口
+
+```javascript
+const routes = [
+  {
+    path: '/layout',
+    component: () => import('../views/Layout.vue'),
+    children: [
+      { path: 'news', component: () => import('../views/News.vue') },
+      { path: 'msg', component: () => import('../views/Msg.vue') }
+    ]
+  }
+]
+```
+
+#### 路由重定向
+- 访问指定路径时，自动跳转到目标路由
+- 通过 `redirect` 配置要跳转的 path 地址
+
+```javascript
+{
+  path: '/',
+  redirect: '/home'
+}
+```
+
+#### 路由守卫
+##### 全局前置守卫
+- 所有路由跳转前都会执行
+- 三个参数：to 即将进入的路由、from 离开的路由、next 放行函数
+- 常用于登录权限判断，未登录拦截跳转到登录页
+
+```javascript
+router.beforeEach((to, from, next) => {
+  // 模拟登录判断
+  const isLogin = true
+  if (to.path !== '/login' && !isLogin) {
+    next('/login')
+  } else {
+    next()
+  }
+})
+```
+
+## 作业
+```vue
+
+```
-- 
Gitee


From 2480bb82c7609a43ffd6c341ca0996196f6e4a6a Mon Sep 17 00:00:00 2001
From: Lhchen <2244349522@qq.com>
Date: Sat, 16 May 2026 19:00:11 +0800
Subject: [PATCH 18/19] =?UTF-8?q?=E8=80=81=E8=99=8E=E8=80=81=E9=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...57\347\224\261\345\237\272\347\241\200.md" | 103 ----
 ...57\347\224\261\345\257\274\350\210\252.md" | 204 +++++++
 ...57\347\224\261\345\265\214\345\245\227.md" | 496 ++++++++++++++++++
 3 files changed, 700 insertions(+), 103 deletions(-)
 rename "\347\275\227\347\232\223\346\231\250/20260513-Vue\350\267\257\347\224\261.md" => "\347\275\227\347\232\223\346\231\250/20260513-Vue\350\267\257\347\224\261\345\237\272\347\241\200.md" (51%)
 create mode 100644 "\347\275\227\347\232\223\346\231\250/20260514-Vue\350\267\257\347\224\261\345\257\274\350\210\252.md"
 create mode 100644 "\347\275\227\347\232\223\346\231\250/20260515-Vue\350\267\257\347\224\261\345\265\214\345\245\227.md"

diff --git "a/\347\275\227\347\232\223\346\231\250/20260513-Vue\350\267\257\347\224\261.md" "b/\347\275\227\347\232\223\346\231\250/20260513-Vue\350\267\257\347\224\261\345\237\272\347\241\200.md"
similarity index 51%
rename from "\347\275\227\347\232\223\346\231\250/20260513-Vue\350\267\257\347\224\261.md"
rename to "\347\275\227\347\232\223\346\231\250/20260513-Vue\350\267\257\347\224\261\345\237\272\347\241\200.md"
index 0d3ff708..284d4cf2 100644
--- "a/\347\275\227\347\232\223\346\231\250/20260513-Vue\350\267\257\347\224\261.md"
+++ "b/\347\275\227\347\232\223\346\231\250/20260513-Vue\350\267\257\347\224\261\345\237\272\347\241\200.md"
@@ -53,104 +53,6 @@ app.use(router)
 app.mount('#app')
 ```
 
-#### 路由出口 router-view
-- 作为页面组件的渲染占位位置
-- 路由匹配到的页面，会自动渲染到 `<router-view>` 所在位置
-- 一般放在根组件 App.vue 中，固定页面布局，中间内容随路由切换
-
-```vue
-<template>
-  <!-- 路由跳转导航 -->
-  <router-link to="/">首页</router-link>
-  <router-link to="/about">关于</router-link>
-
-  <!-- 路由页面渲染出口 -->
-  <router-view></router-view>
-</template>
-```
-
-#### 路由导航 router-link
-- 替代 a 标签实现跳转，不会刷新整个页面
-- `to` 属性配置目标路由地址，和路由规则里的 path 保持一致
-- 自带路由激活样式，选中路由会自动添加默认 class
-
-#### 编程式导航
-- 不用标签，通过代码逻辑实现路由跳转
-- `useRouter` 获取路由实例，调用 `push` 方法跳转页面
-- 可以传字符串路径，也可以传对象配置路径和参数
-
-```vue
-<template>
-  <button @click="goHome">回到首页</button>
-  <button @click="goAbout">前往关于页</button>
-</template>
-
-<script setup>
-import { useRouter } from 'vue-router'
-const router = useRouter()
-
-const goHome = () => {
-  router.push('/')
-}
-const goAbout = () => {
-  router.push({ path: '/about' })
-}
-</script>
-```
-
-#### 路由传参
-##### 路径参数
-- 路由规则中通过 `:参数名` 声明动态参数
-- 跳转时在路径后拼接实际参数值
-- 页面内用 `useRoute` 获取 params 中的参数
-
-```javascript
-// 路由配置
-{
-  path: '/user/:id',
-  name: 'User',
-  component: () => import('../views/User.vue')
-}
-```
-
-```vue
-<!-- 跳转 -->
-<router-link to="/user/1001">用户</router-link>
-```
-
-```vue
-<!-- 接收参数页面 -->
-<script setup>
-import { useRoute } from 'vue-router'
-const route = useRoute()
-// 获取路径参数
-console.log(route.params.id)
-</script>
-```
-
-##### 查询参数
-- 不用提前在路由规则声明参数
-- 跳转时通过 query 传递键值对
-- 页面内从 route.query 直接取值
-
-```vue
-<script setup>
-import { useRouter, useRoute } from 'vue-router'
-const router = useRouter()
-
-const goPage = () => {
-  router.push({
-    path: '/about',
-    query: { name: '张三', age: 20 }
-  })
-}
-
-// 接收参数
-const route = useRoute()
-console.log(route.query.name)
-</script>
-```
-
 #### 嵌套路由
 - 适用于页面内包含子页面的布局结构
 - 路由规则中使用 `children` 配置子路由
@@ -197,8 +99,3 @@ router.beforeEach((to, from, next) => {
   }
 })
 ```
-
-## 作业
-```vue
-
-```
diff --git "a/\347\275\227\347\232\223\346\231\250/20260514-Vue\350\267\257\347\224\261\345\257\274\350\210\252.md" "b/\347\275\227\347\232\223\346\231\250/20260514-Vue\350\267\257\347\224\261\345\257\274\350\210\252.md"
new file mode 100644
index 00000000..16ca9dc4
--- /dev/null
+++ "b/\347\275\227\347\232\223\346\231\250/20260514-Vue\350\267\257\347\224\261\345\257\274\350\210\252.md"
@@ -0,0 +1,204 @@
+## 笔记
+
+### 路由导航 router\-link
+
+- 核心作用：替代 a 标签实现页面跳转
+
+- 跳转特点：不会刷新整个页面，属于单页应用局部跳转
+
+- 核心属性：to —— 配置目标路由地址
+
+- to 属性要求：必须和路由规则里的 path 完全保持一致
+
+- 自带特性：路由激活样式，选中的路由会自动添加默认 class
+
+```vue
+<!-- router-link 基础使用示例 -->
+<template>
+  <!-- 跳转到首页，路径与路由规则path一致 -->
+  <router-link to="/">首页</router-link>
+  <!-- 跳转到关于页 -->
+  <router-link to="/about">关于页</router-link>
+  <!-- 跳转到用户页（后续结合路径参数使用） -->
+  <router-link to="/user/1001">用户1001</router-link>
+</template>
+
+```
+
+### 编程式导航
+
+- 核心特点：不用写标签，通过代码逻辑实现路由跳转
+
+- 获取路由实例：使用 useRouter 函数
+
+- 核心跳转方法1：push —— 新增历史记录，可通过返回键回到上一页
+
+- push 传参方式1：直接传字符串路径（简洁直观）
+
+- push 传参方式2：传对象，配置 path 字段指定路径
+
+- 核心跳转方法2：replace —— 替换当前历史记录，无法通过返回键回到上一页
+
+- replace 用法：与push完全一致，仅方法名不同
+
+```vue
+<template>
+  <button @click="goHome">回到首页</button>
+  <button @click="goAbout">前往关于页</button>
+  <button @click="goUser">前往用户页</button>
+  <button @click="replaceAbout">replace前往关于页</button>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+// 获取路由实例
+const router = useRouter()
+
+// 跳转首页（字符串路径）- push方法
+const goHome = () => {
+  router.push('/')
+}
+
+// 跳转关于页（对象配置路径）- push方法
+const goAbout = () => {
+  router.push({ path: '/about' })
+}
+
+// 跳转用户页（带路径参数）- push方法
+const goUser = () => {
+  router.push('/user/1002')
+}
+
+// 跳转关于页 - replace方法（替换历史记录）
+const replaceAbout = () => {
+  // 用法和push完全一致，仅方法名不同
+  router.replace('/about')
+  // 也可传对象配置
+  // router.replace({ path: '/about' })
+}
+</script>
+
+```
+
+### 路由传参
+
+#### 路径参数
+
+- 声明方式：路由规则中通过 \`:参数名\` 声明动态参数
+
+- 跳转方式：跳转时在路径后直接拼接实际参数值
+
+- 接收方式：页面内用 useRoute 获取路由实例
+
+- 取值位置：从 route\.params 中获取对应参数
+
+- 适用场景：参数是页面必需的（如用户ID、商品ID）
+
+```javascript
+// 路由配置（声明路径参数）
+{
+  path: '/user/:id', // :id 是动态参数，可自定义参数名
+  name: 'User',
+  component: () => import('../views/User.vue')
+}
+
+```
+
+```vue
+<!-- 跳转方式1：router-link 跳转（带路径参数） -->
+<template>
+  <router-link to="/user/1001">用户1001</router-link>
+  <router-link to="/user/1002">用户1002</router-link>
+</template>
+
+```
+
+```vue
+<!-- 跳转方式2：编程式导航跳转（带路径参数）- 含push和replace两种方法 -->
+<script setup>
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
+const goUser = () => {
+  // 方式1：push方法（新增历史记录）
+  router.push('/user/1003')
+  // 方式2：replace方法（替换历史记录）
+  // router.replace('/user/1003')
+  // 两种方法均可传对象配置
+  // router.push({ path: '/user/1003' })
+  // router.replace({ path: '/user/1003' })
+}
+</script>
+
+```
+
+```vue
+<!-- 接收参数页面（User.vue） -->
+<script setup>
+import { useRoute } from 'vue-router'
+// 获取路由实例（用于接收参数）
+const route = useRoute()
+// 获取路径参数id，控制台打印验证
+console.log('路径参数id：', route.params.id)
+</script>
+
+```
+
+#### 查询参数
+
+- 声明特点：不用提前在路由规则中声明参数
+
+- 传递方式：跳转时通过 query 字段传递键值对参数
+
+- 接收方式：页面内用 useRoute 获取路由实例
+
+- 取值位置：从 route\.query 中直接获取对应键的值
+
+- 适用场景：参数是非必需的（如筛选条件、分页参数）
+
+```vue
+<!-- 跳转方式1：router-link 跳转（带查询参数） -->
+<template>
+  <router-link 
+    :to="{ 
+      path: '/about', 
+      query: { name: '张三', age: 20 } 
+    }"
+  >
+    前往关于页（带查询参数）
+  </router-link>
+</template>
+
+```
+
+```vue
+<!-- 跳转方式2：编程式导航跳转（带查询参数）- 含push和replace两种方法 -->
+<script setup>
+import { useRouter, useRoute } from 'vue-router'
+const router = useRouter()
+const route = useRoute()
+
+// 跳转并传递查询参数 - push方法
+const goPage = () => {
+  router.push({
+    path: '/about',
+    query: { name: '张三', age: 20, gender: '男' }
+  })
+}
+
+// 跳转并传递查询参数 - replace方法
+const replacePage = () => {
+  router.replace({
+    path: '/about',
+    query: { name: '李四', age: 22, gender: '女' }
+  })
+}
+
+// 接收查询参数，控制台打印验证
+const getQueryParams = () => {
+  console.log('查询参数name：', route.query.name)
+  console.log('查询参数age：', route.query.age)
+}
+</script>
+
+```
diff --git "a/\347\275\227\347\232\223\346\231\250/20260515-Vue\350\267\257\347\224\261\345\265\214\345\245\227.md" "b/\347\275\227\347\232\223\346\231\250/20260515-Vue\350\267\257\347\224\261\345\265\214\345\245\227.md"
new file mode 100644
index 00000000..9687617e
--- /dev/null
+++ "b/\347\275\227\347\232\223\346\231\250/20260515-Vue\350\267\257\347\224\261\345\265\214\345\245\227.md"
@@ -0,0 +1,496 @@
+## 笔记
+
+### 嵌套路由
+
+- 适用场景：页面内包含子页面的布局（如后台管理、主体布局\+子页面切换）
+- 核心配置：用children数组配置子路由，父组件需预留\&lt;router\-view\&gt;出口
+- 路径规则：子路由path不加/拼接父路由，加/为绝对路径（不拼接）
+- 支持多层嵌套、默认子路由，子路由传参与父路由一致（params/query）
+
+```javascript
+// 父路由path：/layout，父组件Layout.vue需包含<router-view>（子组件渲染出口）
+// 子路由path不加/，自动拼接父路由path → /layout/news、/layout/msg
+// path: '' 为默认子路由，访问/layout时自动渲染Index.vue
+const routes = [
+  {
+    path: '/layout', 
+    component: () => import('../views/Layout.vue'), // 父组件必须含<router-view>
+    children: [
+      { path: 'news', component: () => import('../views/News.vue') }, // 子路由1：/layout/news
+      { path: 'msg', component: () => import('../views/Msg.vue') }, // 子路由2：/layout/msg
+      { path: '', component: () => import('../views/Index.vue') }, // 默认子路由
+      // 多层嵌套示例：子路由嵌套孙路由，访问路径 /layout/user/detail
+      {
+        path: 'user',
+        component: () => import('../views/User.vue'),
+        children: [
+          { path: 'detail', component: () => import('../views/UserDetail.vue') }
+        ]
+      },
+      // params传参（动态路由）：访问路径 /layout/news/123，id为动态参数
+      { path: 'news/:id', component: () => import('../views/NewsDetail.vue') }
+    ]
+  }
+]
+```
+
+#### 子路由传参补充
+
+- 传参方式：支持params（动态路由）、query（地址栏拼接）两种
+
+- params传参：路由path需加:参数名，跳转时拼接路径传递参数
+
+- query传参：无需修改路由path，通过路由对象的query属性传递
+
+- 组件中获取参数：params用this\.$route\.params，query用this\.$route\.query
+
+```javascript
+// 路由配置（配合传参，注释说明传参规则）
+const routes = [
+  {
+    path: '/layout',
+    component: () => import('../views/Layout.vue'),
+    children: [
+      { path: 'news/:id', component: () => import('../views/NewsDetail.vue') }, // params传参（:id为动态参数）
+      { path: 'msg', component: () => import('../views/Msg.vue') } // query传参（无需修改path）
+    ]
+  }
+]
+
+// 页面跳转传参示例（注释说明每种传参的用法和访问路径）
+// 1. params传参：跳转路径 /layout/news/123，参数id=123（组件中this.$route.params.id获取）
+this.$router.push('/layout/news/123')
+// 2. query传参：跳转路径 /layout/msg?id=456，参数id=456（组件中this.$route.query.id获取）
+this.$router.push({ path: '/layout/msg', query: { id: 456 } })
+```
+
+### 路由重定向
+
+- 作用：访问指定路径时自动跳转目标路由，简化访问流程、避免页面空白
+- 核心配置：通过redirect属性指定跳转目标（path、回调函数、路由对象三种写法）
+- 常见场景：根路径重定向、旧路径跳转新路径、未登录权限跳转
+- 与别名区别：重定向改变地址栏路径，别名（alias）不改变
+
+```javascript
+// 基础示例：根路径/重定向到/home（最常用写法，注释说明场景）
+// 场景：访问网站根目录时，自动跳转到首页，避免页面空白
+{
+  path: '/',
+  redirect: '/home' // redirect直接写目标path（写法1）
+}
+```
+
+```javascript
+{
+  path: '/',
+  redirect: '/home'
+}
+```
+
+#### 路由重定向三种写法示例
+
+- 写法1：直接写目标path（最简洁，适合固定跳转）
+
+- 写法2：回调函数（可根据当前路由参数动态跳转）
+
+- 写法3：路由对象（配合name属性，跳转更灵活）
+
+```javascript
+const routes = [
+  // 写法1：直接写目标path（注释：固定跳转，访问/ → /home）
+  { path: '/', redirect: '/home' },
+  // 写法2：回调函数写法（注释：to为当前路由对象，可获取query/params参数动态跳转）
+  { 
+    path: '/oldPath', 
+    redirect: (to) => {
+      // 示例：根据query参数type，动态跳转到page1或page2
+      if (to.query.type === '1') {
+        return '/page1'
+      } else {
+        return '/page2'
+      }
+    }
+  },
+  // 写法3：路由对象写法（注释：配合name属性，跳转name为Home的路由）
+  { 
+    path: '/test', 
+    redirect: { name: 'Home' } 
+  },
+  // 配合写法3：给路由配置name属性（name唯一，用于路由对象跳转）
+  { path: '/home', name: 'Home', component: () => import('../views/Home.vue') }
+]
+```
+
+```javascript
+const routes = [
+  // 写法1：直接写目标path（最常用）
+  { path: '/', redirect: '/home' },
+  // 写法2：回调函数写法（动态重定向）
+  { 
+    path: '/oldPath', 
+    // to为当前访问的路由对象，可获取params、query等参数
+    redirect: (to) => {
+      // 示例：根据参数动态跳转
+      if (to.query.type === '1') {
+        return '/page1'
+      } else {
+        return '/page2'
+      }
+    }
+  },
+  // 写法3：路由对象写法（配合name属性）
+  { 
+    path: '/test', 
+    redirect: { name: 'Home' } // 跳转至name为Home的路由
+  },
+  // 配置name属性的路由（配合上面写法3）
+  { path: '/home', name: 'Home', component: () => import('../views/Home.vue') }
+]
+```
+
+#### 重定向与别名（alias）区别示例
+
+- 重定向（redirect）：改变地址栏路径，本质是跳转
+
+- 别名（alias）：不改变地址栏路径，仅路径映射（相当于别名）
+
+```javascript
+const routes = [
+  // 重定向示例：访问/about → 地址栏变成/home，页面渲染Home组件
+  { path: '/about', redirect: '/home' },
+  // 别名示例：访问/aliasHome → 地址栏还是/aliasHome，页面渲染Home组件
+  { path: '/home', name: 'Home', component: Home, alias: '/aliasHome' }
+]
+
+// 区别说明（注释）：
+// 1. 访问/about → 地址栏→/home，页面→Home（重定向：跳转+路径变更）
+// 2. 访问/aliasHome → 地址栏→/aliasHome，页面→Home（别名：无跳转+路径不变）
+```
+
+## 作业
+
+### router/index.ts
+
+```ts
+import { createRouter, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [{
+    path: "/",
+    name: "home",
+    component: () => import("@/components/Home.vue"),
+    children: [
+      {
+        path: "",
+        redirect: "/ParentA/A01"
+      },
+      {
+        path: "ParentA",
+        name: "PA",
+        component: () => import("@/components/ParentA.vue"),
+        children: [
+          {
+            path: "A01",
+            name: "A01",
+            component: () => import("@/components/A01.vue")
+          },
+          {
+            path: "A02",
+            name: "A02",
+            component: () => import("@/components/A02.vue")
+          },
+          {
+            path: "A03",
+            name: "A03",
+            component: () => import("@/components/A03.vue")
+          }
+        ]
+      },
+      {
+        path: "ParentB",
+        name: "PB",
+        component: () => import("@/components/ParentB.vue"),
+        children: [
+
+          {
+            path: "B01",
+            name: "B01",
+            component: () => import("@/components/B01.vue")
+          },
+          {
+            path: "B02",
+            name: "B02",
+            component: () => import("@/components/B02.vue")
+          },
+          {
+            path: "B03",
+            name: "B03",
+            component: () => import("@/components/B03.vue")
+          },
+        ]
+      },
+      {
+        path: "ParentC",
+        name: "PC",
+        component: () => import("@/components/ParentC.vue"),
+        children: [
+
+          {
+            path: "C01",
+            name: "C01",
+            component: () => import("@/components/C01.vue")
+          },
+          {
+            path: "C02",
+            name: "C02",
+            component: () => import("@/components/C02.vue")
+          },
+          {
+            path: "C03",
+            name: "C03",
+            component: () => import("@/components/B03.vue")
+          },
+        ]
+      },
+    ]
+  }
+  ]
+})
+
+export default router
+```
+
+### App.vue
+
+```vue
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <RouterView></RouterView>
+</template>
+
+<style scoped>
+* {
+    margin: 0;
+    padding: 0;
+}
+</style>
+```
+
+### src/components/Home.vue（一级路由）
+
+```vue
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+let router = useRouter()
+function changeContentA() {
+    router.push({ name: "PA" })
+}
+function changeContentB() {
+    router.push({ name: "PB" })
+}
+function changeContentC() {
+    router.push({ name: "PC" })
+}
+</script>
+
+<template>
+    <div class="box">
+        <div class="box-top">
+            <div class="nav-list">
+                <button class="nav-itme" @click="changeContentA">A</button>
+                <button class="nav-itme" @click="changeContentB">B</button>
+                <button class="nav-itme" @click="changeContentC">C</button>
+            </div>
+        </div>
+        <div class="box-bottom">
+           <RouterView></RouterView>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+* {
+    margin: 0;
+    padding: 0;
+}
+
+.box {
+    width: 98vw;
+    height: 97vh;
+}
+
+.box-top {
+    height: 10%;
+    width: 33%;
+}
+
+.box-bottom {
+    height: 80%;
+    width: 100%;
+    display: flex;
+}
+
+.nav-list {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+</style>
+```
+
+### src/components/ParentA.vue(二级路由A)
+
+```vue
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+let router = useRouter()
+function changeContentA01() {
+    router.push({ name: "A01" })
+}
+function changeContentA02() {
+    router.push({ name: "A02" })
+}
+function changeContentA03() {
+    router.push({ name: "A03" })
+}
+</script>
+
+
+<template>
+
+    <div class="bottom-left">
+        <button class="nav-itme" @click="changeContentA01">A01</button>
+        <button class="nav-itme" @click="changeContentA02">A02</button>
+        <button class="nav-itme" @click="changeContentA03">A03</button>
+
+    </div>
+    <div class="bottom-right">
+        <RouterView></RouterView>
+    </div>
+</template>
+
+<style scoped>
+.bottom-left {
+    height: 100%;
+    width: 20%;
+    background-color: yellowgreen;
+}
+
+.bottom-right {
+    height: 100%;
+    width: 80%;
+    background-color: orange;
+}
+</style>
+```
+
+### src/components/ParentB.vue(二级路由B)
+
+```vue
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+let router = useRouter()
+function changeContentB01() {
+    router.push({ name: "B01" })
+}
+function changeContentB02() {
+    router.push({ name: "B02" })
+}
+function changeContentB03() {
+    router.push({ name: "B03" })
+}
+</script>
+
+
+<template>
+
+    <div class="bottom-left">
+        <button class="nav-itme" @click="changeContentB01">B01</button>
+        <button class="nav-itme" @click="changeContentB02">B02</button>
+        <button class="nav-itme" @click="changeContentB03">B03</button>
+
+    </div>
+    <div class="bottom-right">
+        <RouterView></RouterView>
+    </div>
+</template>
+
+<style scoped>
+.bottom-left {
+    height: 100%;
+    width: 20%;
+    background-color: yellowgreen;
+}
+
+.bottom-right {
+    height: 100%;
+    width: 80%;
+    background-color: orange;
+}
+</style>
+```
+
+### src/components/ParentC.vue(二级路由C)
+
+```vue
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+let router = useRouter()
+function changeContentC01() {
+    router.push({ name: "C01" })
+}
+function changeContentC02() {
+    router.push({ name: "C02" })
+}
+function changeContentC03() {
+    router.push({ name: "C03" })
+}
+</script>
+
+
+<template>
+
+    <div class="bottom-left">
+        <button class="nav-itme" @click="changeContentC01">C01</button>
+        <button class="nav-itme" @click="changeContentC02">C02</button>
+        <button class="nav-itme" @click="changeContentC03">C03</button>
+
+    </div>
+    <div class="bottom-right">
+        <RouterView></RouterView>
+    </div>
+</template>
+
+<style scoped>
+.bottom-left {
+    height: 100%;
+    width: 20%;
+    background-color: yellowgreen;
+}
+
+.bottom-right {
+    height: 100%;
+    width: 80%;
+    background-color: orange;
+}
+</style>
+```
+
+### src/components/A01.vue......(三级路由)
+
+```vue
+<template>
+    I Am A ON.1
+</template>
+```
+
-- 
Gitee


From 07a6d6896d6c86e98b7604f6cf706d176ef92ddb Mon Sep 17 00:00:00 2001
From: Lhchen <2244349522@qq.com>
Date: Sat, 16 May 2026 19:06:05 +0800
Subject: [PATCH 19/19] =?UTF-8?q?=E8=80=81=E8=99=8E=E8=80=81=E9=BC=A0?=
 =?UTF-8?q?=EF=BC=8C=E4=BD=A0=E5=98=B4=E5=94=87=E5=8F=91=E7=B4=AB=EF=BC=8C?=
 =?UTF-8?q?=E5=8F=AF=E8=83=BD=E5=BF=83=E8=84=8F=E4=B8=8D=E5=A5=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...57\347\224\261\345\237\272\347\241\200.md" | 46 -------------------
 ...57\347\224\261\345\256\210\345\215\253.md" | 20 ++++++++
 2 files changed, 20 insertions(+), 46 deletions(-)
 create mode 100644 "\347\275\227\347\232\223\346\231\250/20260518-Vue\350\267\257\347\224\261\345\256\210\345\215\253.md"

diff --git "a/\347\275\227\347\232\223\346\231\250/20260513-Vue\350\267\257\347\224\261\345\237\272\347\241\200.md" "b/\347\275\227\347\232\223\346\231\250/20260513-Vue\350\267\257\347\224\261\345\237\272\347\241\200.md"
index 284d4cf2..b4ae0aee 100644
--- "a/\347\275\227\347\232\223\346\231\250/20260513-Vue\350\267\257\347\224\261\345\237\272\347\241\200.md"
+++ "b/\347\275\227\347\232\223\346\231\250/20260513-Vue\350\267\257\347\224\261\345\237\272\347\241\200.md"
@@ -53,49 +53,3 @@ app.use(router)
 app.mount('#app')
 ```
 
-#### 嵌套路由
-- 适用于页面内包含子页面的布局结构
-- 路由规则中使用 `children` 配置子路由
-- 父组件中必须预留 `<router-view>` 作为子路由出口
-
-```javascript
-const routes = [
-  {
-    path: '/layout',
-    component: () => import('../views/Layout.vue'),
-    children: [
-      { path: 'news', component: () => import('../views/News.vue') },
-      { path: 'msg', component: () => import('../views/Msg.vue') }
-    ]
-  }
-]
-```
-
-#### 路由重定向
-- 访问指定路径时，自动跳转到目标路由
-- 通过 `redirect` 配置要跳转的 path 地址
-
-```javascript
-{
-  path: '/',
-  redirect: '/home'
-}
-```
-
-#### 路由守卫
-##### 全局前置守卫
-- 所有路由跳转前都会执行
-- 三个参数：to 即将进入的路由、from 离开的路由、next 放行函数
-- 常用于登录权限判断，未登录拦截跳转到登录页
-
-```javascript
-router.beforeEach((to, from, next) => {
-  // 模拟登录判断
-  const isLogin = true
-  if (to.path !== '/login' && !isLogin) {
-    next('/login')
-  } else {
-    next()
-  }
-})
-```
diff --git "a/\347\275\227\347\232\223\346\231\250/20260518-Vue\350\267\257\347\224\261\345\256\210\345\215\253.md" "b/\347\275\227\347\232\223\346\231\250/20260518-Vue\350\267\257\347\224\261\345\256\210\345\215\253.md"
new file mode 100644
index 00000000..52304263
--- /dev/null
+++ "b/\347\275\227\347\232\223\346\231\250/20260518-Vue\350\267\257\347\224\261\345\256\210\345\215\253.md"
@@ -0,0 +1,20 @@
+## 笔记
+
+### 路由守卫
+
+#### 全局前置守卫
+- 所有路由跳转前都会执行
+- 三个参数：to 即将进入的路由、from 离开的路由、next 放行函数
+- 常用于登录权限判断，未登录拦截跳转到登录页
+
+```javascript
+router.beforeEach((to, from, next) => {
+  // 模拟登录判断
+  const isLogin = true
+  if (to.path !== '/login' && !isLogin) {
+    next('/login')
+  } else {
+    next()
+  }
+})
+```
\ No newline at end of file
-- 
Gitee