diff --git "a/\350\222\213\347\273\215\346\264\213/20260420-\345\210\235\350\257\206Vue\347\254\224\350\256\260.md" "b/\350\222\213\347\273\215\346\264\213/20260420-\345\210\235\350\257\206Vue\347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000000000000000000000000000000..0eace656cbdd2d733268e7287fe1dffa56970173
--- /dev/null
+++ "b/\350\222\213\347\273\215\346\264\213/20260420-\345\210\235\350\257\206Vue\347\254\224\350\256\260.md"
@@ -0,0 +1,27 @@
+# 笔记
+## 基础认识Vue
+1. Vue.js是基于HTML、CSS和JS构建的，是一个更轻量级的前端框架，文件体积小，加载速度快。
+2. Vue.js采用MVVM模式进行前端开发，是MVC模式本质上的改进版，目的是分离视图和模型，主要有低耦合、可重用、可独立开发、可测试。
+3. Model、View、ViewModel（当用户操作View时，ViewModel会感知到变化，并通知Model进行相应改变；反之，当Model发生改变，ViewModel也会感知到变化，并通知View进行更新。）
+## 项目的创建方式
+```
+yarn create vite   # 创建项目
+cd 项目名          # 进入文件夹
+yarn              # 安装依赖
+yarn dev          # 启动项目
+```
+## 项目的目录结构
+```
+my-vue3/
+├── node_modules/       # 项目依赖包（不用管）
+├── public/             # 静态资源（图标等）
+├── src/                # 【核心：我们写代码的文件夹】
+│   ├── assets/         # 图片、样式等资源
+│   ├── components/     # 公共组件
+│   ├── App.vue         # 【根组件：所有页面入口】
+│   └── main.js         # 【项目主入口：挂载Vue】
+├── .gitignore          # git忽略文件
+├── index.html          # 页面模板
+├── package.json        # 项目配置、依赖
+└── vite.config.js      # vite配置文件
+```
\ No newline at end of file
diff --git "a/\350\222\213\347\273\215\346\264\213/20260422-\346\225\260\346\215\256\347\273\221\345\256\232.md" "b/\350\222\213\347\273\215\346\264\213/20260422-\346\225\260\346\215\256\347\273\221\345\256\232.md"
new file mode 100644
index 0000000000000000000000000000000000000000..0b670b4f50f903056dc5b119649e8f9deff27e54
--- /dev/null
+++ "b/\350\222\213\347\273\215\346\264\213/20260422-\346\225\260\346\215\256\347\273\221\345\256\232.md"
@@ -0,0 +1,48 @@
+# 2026-04-22 数据绑定
+
+## 数据绑定概念
+
+数据绑定是 Vue 的核心功能之一，指的是将数据与视图模板关联起来，使得数据变化时视图自动更新。
+
+## 插值绑定
+
+在模板中使用双花括号语法进行文本插值：
+
+```html
+<div>{{ message }}</div>
+```
+
+## 属性绑定
+
+使用 `:` 语法绑定属性，例如：
+
+```html
+<img :src="imageUrl" alt="图片">
+```
+
+## 事件绑定
+
+使用 `@` 语法绑定事件：
+
+```html
+<button @click="handleClick">点击</button>
+```
+
+## 双向绑定
+
+使用 `v-model` 实现表单控件的数据双向绑定：
+
+```html
+<input v-model="name" placeholder="输入姓名">
+<p>输入内容：{{ name }}</p>
+```
+
+## 常见场景
+
+- 表单输入
+- 切换样式和类
+- 动态显示/隐藏元素
+
+## 小结
+
+数据绑定让 DOM 和 JavaScript 数据保持同步，中间无需手动操作 DOM，是 Vue 高效开发的重要基础。
\ No newline at end of file
diff --git "a/\350\222\213\347\273\215\346\264\213/20260423-\350\256\241\347\256\227\346\234\272\345\261\236\346\200\247\344\270\216\344\276\246\345\220\254\345\231\250.md" "b/\350\222\213\347\273\215\346\264\213/20260423-\350\256\241\347\256\227\346\234\272\345\261\236\346\200\247\344\270\216\344\276\246\345\220\254\345\231\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..36bd74a9f4e8cc14a9ed1bd9a6bd3eeadab335d3
--- /dev/null
+++ "b/\350\222\213\347\273\215\346\264\213/20260423-\350\256\241\347\256\227\346\234\272\345\261\236\346\200\247\344\270\216\344\276\246\345\220\254\345\231\250.md"
@@ -0,0 +1,59 @@
+# 2026-04-23 计算属性与侦听器
+
+## 计算属性（computed）
+
+计算属性用于基于已有数据生成新的值，并且会根据依赖自动缓存。
+
+```js
+const app = Vue.createApp({
+  data() {
+    return {
+      firstName: '张',
+      lastName: '三'
+    }
+  },
+  computed: {
+    fullName() {
+      return `${this.firstName} ${this.lastName}`
+    }
+  }
+})
+```
+
+### 特点
+
+- 依赖于响应式数据
+- 只有在依赖发生变化时才重新计算
+- 适合用于模板中复杂表达式的封装
+
+## 侦听器（watch）
+
+侦听器用于观察数据变化并执行副作用逻辑，适合处理异步或开销较大的操作。
+
+```js
+watch: {
+  firstName(newVal, oldVal) {
+    console.log('firstName changed:', newVal)
+  }
+}
+```
+
+### 适用场景
+
+- 监听数据变化后发送网络请求
+- 监控复杂数据对象变更
+- 在数据变更时执行手动逻辑
+
+## 计算属性与侦听器对比
+
+- 计算属性用于声明式计算、依赖缓存；
+- 侦听器用于执行响应式副作用、处理异步逻辑。
+
+## 示例场景
+
+- 显示组合文本：`computed`
+- 监控输入并请求接口：`watch`
+
+## 学习建议
+
+先用计算属性做模板中的派生数据，再用侦听器处理需要“观察变化后执行”场景。
\ No newline at end of file
diff --git "a/\350\222\213\347\273\215\346\264\213/20260424-Vue.js.md" "b/\350\222\213\347\273\215\346\264\213/20260424-Vue.js.md"
new file mode 100644
index 0000000000000000000000000000000000000000..dd8f469247d6a1f93eb2e88a6335661553d61173
--- /dev/null
+++ "b/\350\222\213\347\273\215\346\264\213/20260424-Vue.js.md"
@@ -0,0 +1,50 @@
+# 2024-04-24 Vue.js 指令
+
+## 指令概念
+
+Vue 指令是带有 `v-` 前缀的特殊属性，用于在模板中绑定 DOM 行为或数据。
+
+## 常用指令
+
+- `v-bind`：绑定元素属性，可以缩写为 `:`。
+- `v-on`：绑定事件，可以缩写为 `@`。
+- `v-model`：实现表单控件的双向绑定。
+- `v-if`：条件渲染元素。
+- `v-show`：通过 `display` 控制显示隐藏。
+- `v-for`：列表渲染。
+
+## 使用示例
+
+```html
+<div v-if="show">显示内容</div>
+<ul>
+  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
+</ul>
+<input v-model="text">
+<button @click="submit">提交</button>
+```
+
+## 指令修饰符
+
+修饰符用于对指令进行更细粒度的控制，例如：
+
+```html
+<input v-model.trim="message">
+<button @click.once="handleClick">只触发一次</button>
+```
+
+## 自定义指令
+
+虽然 Vue 主要依赖内置指令，但也可创建自定义指令：
+
+```js
+app.directive('focus', {
+  mounted(el) {
+    el.focus()
+  }
+})
+```
+
+## 小结
+
+Vue 指令让模板更具声明性，开发时推荐优先使用内置指令，只有在特殊需求时才使用自定义指令。
\ No newline at end of file
diff --git "a/\350\222\213\347\273\215\346\264\213/20260427 \345\276\252\347\216\257\345\222\214\345\261\236\346\200\247\346\214\207\344\273\244.md" "b/\350\222\213\347\273\215\346\264\213/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 0000000000000000000000000000000000000000..5836422cf0988cf92ef9e0a4b4c0dc5897abbe0e
--- /dev/null
+++ "b/\350\222\213\347\273\215\346\264\213/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
diff --git "a/\350\222\213\347\273\215\346\264\213/20260429 \344\272\213\344\273\266\345\244\204\347\220\206\347\254\224\350\256\260.md" "b/\350\222\213\347\273\215\346\264\213/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 0000000000000000000000000000000000000000..f8f5bcee407b7f8f0ffb613ad9774cc53dc1f422
--- /dev/null
+++ "b/\350\222\213\347\273\215\346\264\213/20260429 \344\272\213\344\273\266\345\244\204\347\220\206\347\254\224\350\256\260.md"	
@@ -0,0 +1,96 @@
+ 基础语法
+    -  完整语法（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
diff --git "a/\350\222\213\347\273\215\346\264\213/20260430 \350\241\250\345\215\225\344\277\256\351\245\260\347\254\224\350\256\260.md" "b/\350\222\213\347\273\215\346\264\213/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 0000000000000000000000000000000000000000..cd98b5389cba701c173b4bdd42d3d97702faf001
--- /dev/null
+++ "b/\350\222\213\347\273\215\346\264\213/20260430 \350\241\250\345\215\225\344\277\256\351\245\260\347\254\224\350\256\260.md"	
@@ -0,0 +1,27 @@
+ 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