diff --git "a/\351\231\210\345\255\246\346\266\265/20260420 \351\241\271\347\233\256\345\210\233\345\273\272\344\270\216\344\276\235\350\265\226\347\254\224\350\256\260.md" "b/\351\231\210\345\255\246\346\266\265/20260420 \351\241\271\347\233\256\345\210\233\345\273\272\344\270\216\344\276\235\350\265\226\347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000000000000000000000000000000..9e9ec000b5d2397a219842892b6ba10ed1a14ede
--- /dev/null
+++ "b/\351\231\210\345\255\246\346\266\265/20260420 \351\241\271\347\233\256\345\210\233\345\273\272\344\270\216\344\276\235\350\265\226\347\254\224\350\256\260.md"	
@@ -0,0 +1,68 @@
+# 20260420
+
+## 笔记
+- 验证安装：
+```js
+yarn -v
+```
+    - 安装 Yarn(验证安装时没安装yarn，使用该命令进行安装)
+    ```js
+    npm install -g yarn
+    ```
+- 执行创建命令
+```js
+yarn create vue@latest
+```
+- 进入项目目录
+```js
+cd your-project-name
+```
+- 安装项目依赖(这个命令会读取package.json中的依赖列表，自动下载并安装到node_modules目录)
+```js
+yarn install
+```
+- 启动开发服务器
+```js
+yarn dev
+```
+生产环境打包
+```js
+yarn build
+```
+- 预览生产打包结果
+```js
+yarn preview
+```
+- 核心生态依赖
+    - 路由管理
+    ```js
+    yarn add vue-router
+    ```
+    - 状态管理（替代 Vuex）
+    ```js
+    yarn add pinia
+    ```
+- 主流 UI 组件库
+    - Element Plus（PC 端）
+    ```js
+    yarn add element-plus
+    ```
+    - Ant Design Vue（PC 端）
+    ```js
+    yarn add ant-design-vue
+    ```
+    - Vant（移动端）
+    ```js
+    yarn add vant
+    ```
+- 命令合集 
+    ```js
+    yarn init	初始化一个新项目
+    yarn install	安装所有依赖
+    yarn add 包名	安装生产依赖
+    yarn add -D 包名	安装开发依赖
+    yarn remove 包名	卸载依赖
+    yarn upgrade 包名	更新指定依赖
+    yarn run 脚本名	执行 package.json 中的脚本
+    yarn cache clean	清除 Yarn 缓存
+    ```
\ No newline at end of file
diff --git "a/\351\231\210\345\255\246\346\266\265/20260422 \345\223\215\345\272\224\345\274\217\347\254\224\350\256\260.md" "b/\351\231\210\345\255\246\346\266\265/20260422 \345\223\215\345\272\224\345\274\217\347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000000000000000000000000000000..aee96d116e41e93c115f53859deaf32d1adb73e7
--- /dev/null
+++ "b/\351\231\210\345\255\246\346\266\265/20260422 \345\223\215\345\272\224\345\274\217\347\254\224\350\256\260.md"	
@@ -0,0 +1,13 @@
+# 20260423
+- Vue 2 响应式原理
+    ```js
+    基于 Object.defineProperty()
+    ```
+- 对象新增属性不更新
+    ```js
+    this.$set(this.obj, 'newKey', value)
+    ```
+- 数组下标修改不更新
+    ```js
+    this.$set(this.arr, index, value)
+    ```
\ No newline at end of file
diff --git "a/\351\231\210\345\255\246\346\266\265/20260423 \350\256\241\347\256\227\345\261\236\346\200\247\344\276\246\345\220\254\345\231\250.md" "b/\351\231\210\345\255\246\346\266\265/20260423 \350\256\241\347\256\227\345\261\236\346\200\247\344\276\246\345\220\254\345\231\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..76a8d95344abe5e9206d6f314af37dccad6978b1
--- /dev/null
+++ "b/\351\231\210\345\255\246\346\266\265/20260423 \350\256\241\347\256\227\345\261\236\346\200\247\344\276\246\345\220\254\345\231\250.md"	
@@ -0,0 +1,83 @@
+# 20260423
+- 计算属性 (Computed)
+    - 语法：computed: { 计算属性名() { return 结果 } }
+    - 基础用法示例
+    ```js
+    <template>
+    <div>
+        原价：<input v-model="price" />
+        <!-- 计算属性直接使用 -->
+        折后价：{{ discountPrice }}
+    </div>
+    </template>
+
+    <script>
+    export default {
+    data() {
+        return {
+        price: 100,
+        discount: 0.8
+        }
+    },
+    computed: {
+        // 只读计算属性
+        discountPrice() {
+        // 依赖：price、discount 变化才重新计算
+        return (this.price * this.discount).toFixed(2)
+        }
+    }
+    }
+    </script>
+    ```
+    - 可读写计算属性（get + set）
+    ```js
+    computed: {
+    fullName: {
+        // 获取值
+        get() {
+        return this.firstName + ' ' + this.lastName
+        },
+        // 设置值（赋值时触发）
+        set(newVal) {
+        const arr = newVal.split(' ')
+        this.firstName = arr[0]
+        this.lastName = arr[1]
+        }
+    }
+    }
+    ```
+    - 方法封装校验（提交时统一校验）
+    ```js
+    methods: {
+    // 统一校验方法
+    validateForm() {
+        if (!this.username) {
+        alert('请输入用户名')
+        return false
+        }
+        if (!this.password) {
+        alert('请输入密码')
+        return false
+        }
+        return true
+    },
+    submit() {
+        // 提交前先纠错校验
+        if (!this.validateForm()) return
+        // 校验通过，发起请求
+    }
+    }
+    ```
+    - 侦听器校验（watch）
+    ```js
+    watch: {
+    username(newVal) {
+        // 模拟接口校验
+        if (newVal === 'admin') {
+        this.errMsg = '该用户名已被占用'
+        } else {
+        this.errMsg = ''
+        }
+    }
+    }
+    ```
\ No newline at end of file
diff --git "a/\351\231\210\345\255\246\346\266\265/20260424 \345\221\275\344\273\244\347\254\224\350\256\260.md" "b/\351\231\210\345\255\246\346\266\265/20260424 \345\221\275\344\273\244\347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000000000000000000000000000000..cc4e63486db508d94215192b34a46e890746cbfe
--- /dev/null
+++ "b/\351\231\210\345\255\246\346\266\265/20260424 \345\221\275\344\273\244\347\254\224\350\256\260.md"	
@@ -0,0 +1,38 @@
+# 20260424
+
+1. 指令（3 个）
+    - `v-if="条件"`	条件为 true：显示元素（创建 DOM）
+    - `条件为 false：`隐藏元素（销毁 DOM）
+    - `v-else-if="条件"`	多条件分支，跟在 v-if 后
+    - `v-else`	兜底分支，前面都不满足时显示
+2. 用法
+    - 单分支：v-if
+    ```js
+    <template>
+    <!-- 条件为 true 显示，false 隐藏 -->
+    <p v-if="isShow">我显示了</p>
+    </template>
+
+    <script>
+    export default {
+    data() {
+        return {
+        isShow: true // 改为 false 就隐藏
+        }
+    }
+    }
+    </script>
+    ```
+    - 双分支：v-if + v-else
+    ```js
+    <p v-if="isLogin">欢迎回来！</p>
+    <p v-else>请先登录</p>
+    ```
+    - 多分支：v-if + v-else-if + v-else
+        - 必须连续写，中间不能插其他元素
+    ```js
+    <p v-if="score >= 90">优秀</p>
+    <p v-else-if="score >= 80">良好</p>
+    <p v-else-if="score >= 60">及格</p>
+    <p v-else">不及格</p>
+    ```
\ No newline at end of file