+ ```
+
+三、事件指令
+
+ 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
+
+
{{item.name}}
+
+
+
+ ```
+ 必加 **key**：提升渲染效率，防止列表错乱
+
+ ---
+
+七、特殊常用指令
+
+ 9. v-once
+
+ 作用：元素/组件**只渲染一次**，后续数据改变不再更新
+
+ ```html
+
{{ msg }}
+ ```
+
+ 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 0000000000000000000000000000000000000000..60a1ce362eed030869e45678f6bf123dfcb35b9d
--- /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 0000000000000000000000000000000000000000..62143969726c06281c24acf9290490f4b5d5b361
--- /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 (''))}
+
s/div>
+
+ 这些表达式都会在当前所属的组件的数据作用域下被解析。
+
+5 响应式数据绑定
+如果要实现页面中数据的更新，则需要将数据定义为响应式数据。Vue.js 提供了 ref()函数和reactive()函数定义响应式数据。
+
+ 1. ref()函数
+ ref）函数用于声明数据的响应式状态，其参数为数据，返回值为一个带有value 属性的ref对象。
+
+ 使用 refO函数定义响应式数据
+ 语法格式如下。
+ const 响应式数据名=Vue.ref（数据值）
+
+ 其中，参数数据值可以是任何类型。
+
+ 在 setup（）函数中，更改ref（）函数定义的响应式数据的值时。
+ 可以使用如下语法格式：
+ 响应式数据名.value=新值
+
+ 在 HTML 元素中访问使用 refO函数定义的响应式数据不需要附加“.value”。
+ 示例代码如下：
+
+ ｛｛message｝｝
+
+2 reactivc（）函数
+
+ reactive（）函数用于声明对象类型（如过象、数组、集合等）数据的响应式状态
+ reactive（）函数定义响应式数据的语法格式如下：
+ const 响应式數据名=Vue.reactive（数据值）
+
+ 在 setup（）函数中，更改 reactive（）函数定义的响应式数据的值时不需要附加 “.value”，直接更改即可。
+ 语法格式如下：
+ 响应式数据名=新值
+
+## 练习
diff --git "a/\350\203\241\346\245\232\345\251\267/20260423\350\256\241\347\256\227\345\261\236\346\200\247\344\270\216\344\276\246\345\220\254\345\231\250.md" "b/\350\203\241\346\245\232\345\251\267/20260423\350\256\241\347\256\227\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..300aa3e2620553bec193fd8954dc8069814bad1d
--- /dev/null
+++ "b/\350\203\241\346\245\232\345\251\267/20260423\350\256\241\347\256\227\345\261\236\346\200\247\344\270\216\344\276\246\345\220\254\345\231\250.md"
@@ -0,0 +1,37 @@
+## 笔记
+
+1. 计算属性
+
+ 计算属性可以实时监听数据的变化，并缓存返回的计算结果。只有计算属性中依赖的数据源发生变化了，计算属性才会重新求值，并缓存新的计算结果。计算属性通过computed（）函数定义。
+
+ 语法格式如下：
+
+ const 计算属性名=vue.computed(()=>{
+ ... //计算属性的值
+ return 计算后的数据
+ })
+
+2. 侦听器
+
+ 计算属性允许我们声明性地计算衍生值，但是在有些情况下，我们需要在状态变化时执行一些动作。例如，更改 DOM，或者根据异步操作的结果去修改另一处的状态。Vue.js提供的侦听器可以实现这个功能。
+
+ 侦昕器通过 watch（）函数定义
+
+ 语法格式如下
+ vue. watch（侦听器的数据源，回调函数，可选参数）
+
+ **第1个参数是侦听器的数握源**
+
+ 它可以是一个响应式数据、一个响应式对象、一个有返回值的函数或由多个数据源组成的数组。
+
+ **第2个参数是数据源发生变化时要週朋的回调函数**。
+
+ 这个回调函数的第1个参数表示新值，即数据发生变化后的值，第2个参数表示旧值，即数据发生变化前的值。
+
+ **第3个参数是可选参数**。
+
+ 它是一个对象，该对象有两个常用选项 immediate 和 deep。
+
+ **umnediate 选项的默认值为false**，表示侦听器在**初次加载时不会调用侦听器的回调函数**，如果要使侦听器在初次加载时就调用回调函数，只需将该选项的值**设置为 true:deep 选项的默认值也为 false**，当监听的数据源为一个对象时，如果对象中的属性值发生了变化，则无法被监听到，若要监听对象中属性值的变化，只需将该选项的值设置为 true。
+
+## 练习
diff --git "a/\350\203\241\346\245\232\345\251\267/\345\233\276\347\211\207/8dc2c37e09dcfbb62d8e69a91a935ab5.jpg" "b/\350\203\241\346\245\232\345\251\267/\345\233\276\347\211\207/8dc2c37e09dcfbb62d8e69a91a935ab5.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..588d8a0aa246e2637aa7ba54c66fdd5879523bde
Binary files /dev/null and "b/\350\203\241\346\245\232\345\251\267/\345\233\276\347\211\207/8dc2c37e09dcfbb62d8e69a91a935ab5.jpg" differ