From 070eeb9a38ad800b95a42db1c3c229767842425c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=AD=A6=E6=B6=B5?= <463023604@qq.com>
Date: Mon, 27 Apr 2026 10:57:53 +0800
Subject: [PATCH 1/3] 06

---
 ...36\346\200\247\346\214\207\344\273\244.md" | 79 +++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 "\351\231\210\345\255\246\346\266\265/20260427 \345\276\252\347\216\257\345\222\214\345\261\236\346\200\247\346\214\207\344\273\244.md"

diff --git "a/\351\231\210\345\255\246\346\266\265/20260427 \345\276\252\347\216\257\345\222\214\345\261\236\346\200\247\346\214\207\344\273\244.md" "b/\351\231\210\345\255\246\346\266\265/20260427 \345\276\252\347\216\257\345\222\214\345\261\236\346\200\247\346\214\207\344\273\244.md"
new file mode 100644
index 0000000..cfa73a2
--- /dev/null
+++ "b/\351\231\210\345\255\246\346\266\265/20260427 \345\276\252\347\216\257\345\222\214\345\261\236\346\200\247\346\214\207\344\273\244.md"	
@@ -0,0 +1,79 @@
+# 20260427
+- 基础语法
+```js
+<!-- 遍历数组（最常用） -->
+<li v-for="(item, index) in 数组名" :key="唯一值">
+  {{ item }} - 索引：{{ index }}
+</li>
+```
+
+- 必写：key 属性
+    - 必须给 v-for 绑定 :key
+    - 值必须是唯一、不重复的（id / 索引 index 仅临时用）
+    - 作用：让 Vue 精准追踪元素，提升渲染性能，避免列表错乱
+- 常用写法示例
+```js
+<template>
+  <div>
+    <!-- 1. 数组遍历（最常用） -->
+    <div v-for="(user, idx) in userList" :key="user.id || idx">
+      姓名：{{ user.name }}，年龄：{{ user.age }}
+    </div>
+
+    <!-- 2. 对象遍历 -->
+    <div v-for="(value, key) in obj" :key="key">
+      {{ key }}：{{ value }}
+    </div>
+
+    <!-- 3. 数字循环（1~n） -->
+    <div v-for="n in 5" :key="n">第 {{ n }} 个</div>
+  </div>
+</template>
+
+<script setup>
+// 数据
+const userList = [
+  { id: 1, name: '小明', age: 20 },
+  { id: 2, name: '小红', age: 18 }
+]
+
+const obj = { name: 'Vue', age: 3 }
+</script>
+```
+
+- 属性绑定指令：v-bind
+    - 可以直接用 : 代替 v-bind:
+    ```js
+    <!-- 完整写法 -->
+    v-bind:src="imgUrl"
+
+    <!-- 简写（推荐） -->
+    :src="imgUrl"
+    ```
+- 绑定普通属性
+    ```js
+    <img :src="avatar" :alt="name">
+    <a :href="link">跳转</a>
+    <button :disabled="isDisabled">按钮</button>
+    ```
+- 绑定 class（超常用）
+    - 方式 1：对象形式
+    ```js
+    <div :class="{ active: isActive, danger: isDanger }">内容</div>
+    ```
+    - isActive 为 true → 显示 active 类
+    - 可同时绑定多个类
+    - 方式 2：数组形式
+    ```js
+    <div :class="[baseClass, activeClass]">内容</div>
+    ```
+    - 方式 3：数组 + 对象混合
+    ```js
+    <div :class="[baseClass, { active: isActive }]">内容</div>
+    ```
+- 绑定 style（行内样式）
+        ```js
+        <div :style="{ color: textColor, fontSize: fontSize + 'px' }">
+        文字
+        </div>
+        ```
\ No newline at end of file
-- 
Gitee


From 713e32fd1dba7d9f9fc2483bbcece61d914aeb57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=AD=A6=E6=B6=B5?= <463023604@qq.com>
Date: Wed, 29 Apr 2026 16:54:45 +0800
Subject: [PATCH 2/3] 06

---
 ...04\347\220\206\347\254\224\350\256\260.md" | 97 +++++++++++++++++++
 1 file changed, 97 insertions(+)
 create mode 100644 "\351\231\210\345\255\246\346\266\265/20260429 \344\272\213\344\273\266\345\244\204\347\220\206\347\254\224\350\256\260.md"

diff --git "a/\351\231\210\345\255\246\346\266\265/20260429 \344\272\213\344\273\266\345\244\204\347\220\206\347\254\224\350\256\260.md" "b/\351\231\210\345\255\246\346\266\265/20260429 \344\272\213\344\273\266\345\244\204\347\220\206\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..9bc9941
--- /dev/null
+++ "b/\351\231\210\345\255\246\346\266\265/20260429 \344\272\213\344\273\266\345\244\204\347\220\206\347\254\224\350\256\260.md"	
@@ -0,0 +1,97 @@
+# 20260429
+- 基础语法
+    -  完整语法（v-on）
+    ```js
+    <button v-on:click="handleClick">点击我</button>
+    ```
+    - 简写语法（@，推荐）
+    ```js
+    <button @click="handleClick">点击我</button>
+    ```
+- 绑定方法（最常用）
+    - 绑定 Vue 实例 methods 中定义的函数，逻辑复用性强。
+    ```js
+    <template>
+    <button @click="sayHello">打招呼</button>
+    </template>
+
+    <script>
+    export default {
+    methods: {
+        // 事件处理函数
+        sayHello() {
+        alert("Hello Vue!");
+        }
+    }
+    };
+    </script>
+    ```
+- 绑定内联语句
+    - 直接写简单 JS 表达式，适合简单逻辑。
+    ```js
+    <button @click="count = count + 1">计数：{{ count }}</button>
+
+    <script>
+    export default {
+    data() {
+        return {
+        count: 0
+        };
+    }
+    };
+    </script>
+    ```
+- 绑定带参数的方法
+    - 手动传参
+    ```js
+    <button @click="greet('Vue')">传参问候</button>
+
+    <script>
+    export default {
+    methods: {
+        greet(name) {
+        alert(`你好，${name}！`);
+        }
+    }
+    };
+    </script>
+    ```
+    - 获取原生事件对象 $event
+    - 需要原生事件（如阻止默认行为、获取事件源）时，传入 $event：
+    ```js
+    <button @click="handleEvent($event)">获取事件对象</button>
+
+    <script>
+    export default {
+    methods: {
+        handleEvent(e) {
+        console.log(e); // 原生 MouseEvent 对象
+        console.log(e.target); // 触发事件的 DOM 元素
+        }
+    }
+    };
+    </script>
+    ```
+    - 参数 + 事件对象同时传
+    ```js
+    <button @click="handleParams('Vue', $event)">传参+事件</button>
+
+    <script>
+    export default {
+    methods: {
+        handleParams(name, e) {
+        alert(`名称：${name}，事件类型：${e.type}`);
+        }
+    }
+    };
+    </script>
+    ```
+- 常用事件类型
+    - @click	点击元素
+    - @input	输入框内容变化
+    - @change	表单值改变确认
+    - @submit	表单提交
+    - @mouseover	鼠标移入
+    - @mouseout	鼠标移出
+    - @keydown	键盘按下
+    - @scroll	滚动元素
\ No newline at end of file
-- 
Gitee


From 787343699cb9d1d2aecfd71e173287580a6ad5bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=AD=A6=E6=B6=B5?= <463023604@qq.com>
Date: Thu, 30 Apr 2026 10:17:55 +0800
Subject: [PATCH 3/3] 06

---
 ...56\351\245\260\347\254\224\350\256\260.md" | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 "\351\231\210\345\255\246\346\266\265/20260430 \350\241\250\345\215\225\344\277\256\351\245\260\347\254\224\350\256\260.md"

diff --git "a/\351\231\210\345\255\246\346\266\265/20260430 \350\241\250\345\215\225\344\277\256\351\245\260\347\254\224\350\256\260.md" "b/\351\231\210\345\255\246\346\266\265/20260430 \350\241\250\345\215\225\344\277\256\351\245\260\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..9384f8c
--- /dev/null
+++ "b/\351\231\210\345\255\246\346\266\265/20260430 \350\241\250\345\215\225\344\277\256\351\245\260\347\254\224\350\256\260.md"	
@@ -0,0 +1,28 @@
+# 20260430
+- lazy （延迟同步）
+    - 作用：输入时不实时同步数据，失去焦点 / 按回车才更新
+    - 场景：输入框实时同步太频繁，想减少更新次数
+    ```js
+    <input v-model.lazy="username" placeholder="失去焦点才同步">
+    ```
+- number （转数字）
+    - 作用：自动把输入值转为数字类型（默认输入都是字符串）
+    - 场景：年龄、价格、数量等数字输入
+    ```js
+    <input v-model.number="age" type="number" placeholder="自动转数字">
+    ```
+    - 注意：空输入会保留 NaN，建议加判断处理
+- trim （去首尾空格）
+    - 作用：自动去掉输入内容开头和结尾的空格
+    - 场景：用户名、密码、账号等，避免多余空格
+    ```js
+    <input v-model.trim="password" placeholder="自动去首尾空格">
+    ```
+- 修饰符组合使用
+    - 可以多个一起用，顺序不影响效果：
+    ```js
+    <!-- 去空格 + 延迟同步 -->
+    <input v-model.trim.lazy="username">
+    <!-- 去空格 + 转数字 -->
+    <input v-model.trim.number="price">
+    ```
\ No newline at end of file
-- 
Gitee