+ ```
+
+三、事件指令
+
+ 4. v-on 绑定事件
+
+ 作用：绑定鼠标、键盘等事件
+ - 完整写法：`v-on:事件名="方法"`
+ - 简写：`@`
+
+ ```html
+
+ ```
+
+ **常用事件修饰符**
+ - `.stop` 阻止事件冒泡
+ - `.prevent` 阻止默认行为（a标签、表单提交）
+ ```html
+
+ ```
+
+四、双向绑定指令
+
+ 5. v-model 双向数据绑定
+
+ 作用：**表单元素专属**
+ 数据 ↔ 输入框 双向同步
+
+ ```html
+
+ ```
+
+ 适用：input、textarea、select、复选框、单选框
+
+五、条件渲染指令
+
+ 6. v-if / v-else-if / v-else
+
+ 作用：**条件判断，控制元素创建/销毁**
+
+ ```html
+
+ ```
+
+ 7. v-show
+
+ 作用：控制元素**显示/隐藏**
+
+ ```html
+
+ ```
+
+ v-if 与 v-show 区别（必考）
+
+ 1. **v-if**：操作DOM，移除/创建元素，切换频率低使用
+ 2. **v-show**：操作CSS(display)，只是隐藏，切换频繁使用
+
+ ---
+
+六、列表循环指令
+
+ 8. v-for 循环渲染
+
+ 作用：遍历数组/对象，批量生成元素
+
+ 基础语法：
+ ```html
+
+
+ ```
+ 必加 **key**：提升渲染效率，防止列表错乱
+
+ ---
+
+七、特殊常用指令
+
+ 9. v-once
+
+ 作用：元素/组件**只渲染一次**，后续数据改变不再更新
+
+ ```html
+
+ ```
+
+ 10. v-pre
+
+ 作用：跳过编译，直接原样显示内容
+
+ ```html
+
+ ```
+
+八、指令汇总背诵
+
+ | 指令 | 作用 | 简写 |
+ |------|------|------|
+ | v-text | 设置纯文本 | 无 |
+ | v-html | 解析html | 无 |
+ | v-bind | 动态绑定属性 | : |
+ | v-on | 绑定事件 | @ |
+ | v-model | 表单双向绑定 | 无 |
+ | v-if | 条件渲染（销毁） | 无 |
+ | v-show | 条件显示（隐藏） | 无 |
+ | v-for | 列表循环 | 无 |
+
+九、核心总结
+
+ 1. 动态属性用 **:`(v-bind)`**
+ 2. 绑定事件用 **@`(v-on)`**
+ 3. 表单输入同步用 **v-model**
+ 4. 判断显示：低频切换v-if，高频切换v-show
+ 5. 循环列表必须写 **key**
+
+## 练习
diff --git "a/\350\203\241\346\245\232\345\251\267/20260420\345\210\235\350\257\206Vue.md" "b/\350\203\241\346\245\232\345\251\267/20260420\345\210\235\350\257\206Vue.md"
new file mode 100644
index 0000000..60a1ce3
--- /dev/null
+++ "b/\350\203\241\346\245\232\345\251\267/20260420\345\210\235\350\257\206Vue.md"
@@ -0,0 +1,5 @@
+## 笔记
+
+
+
+## 练习
diff --git "a/\350\203\241\346\245\232\345\251\267/20260422\346\225\260\346\215\256\347\273\221\345\256\232.md" "b/\350\203\241\346\245\232\345\251\267/20260422\346\225\260\346\215\256\347\273\221\345\256\232.md"
new file mode 100644
index 0000000..6214396
--- /dev/null
+++ "b/\350\203\241\346\245\232\345\251\267/20260422\346\225\260\346\215\256\347\273\221\345\256\232.md"
@@ -0,0 +1,74 @@
+## 笔记
+
+1 文本插价
+
+ 文本插值是最基本的数据绑定方式
+
+ 语法格式如下
+ <标签名>｛｛数据名｝｝
+
+ 除了使用双大括号外，还可以使用Vuejs 提供的v-text 指令进行文本数据绑定。
+
+2 HTML 绑定
+
+ 使用双大括号会将含有 HTML元素的数据解释为纯文本，而不是HTNL元素。在使用Vuejs 进行内容谊染时，如果内容中含有 HTML元素且希望元素被浏览器解析，可以使用v-html 指令进行数据綁定。
+
+ 语法格式如下
+ <标签名 v-html="纹据名">.-..
+
+4 JavaScript表达式
+
+ 在 Vue.js 中，所有的数据绑定都支持完整的 JavaScript 表达式。
+
+ JavaScript 表达式的应用示例如下
+ { {a+b}}
+ { (ok?'YES':'NO'}}
+ { {message. split (''). reverse () join (''))}
+