diff --git "a/\347\245\235\346\204\217\350\277\234/20260427-class\345\261\236\346\200\247\347\273\221\345\256\232\345\222\214styl\345\261\236\346\200\247\347\273\221\345\256\232.md" "b/\347\245\235\346\204\217\350\277\234/20260427-class\345\261\236\346\200\247\347\273\221\345\256\232\345\222\214styl\345\261\236\346\200\247\347\273\221\345\256\232.md"
new file mode 100644
index 0000000000000000000000000000000000000000..aa8205bbcdcd8c160ed674a7fb4891a8863a4a2b
--- /dev/null
+++ "b/\347\245\235\346\204\217\350\277\234/20260427-class\345\261\236\346\200\247\347\273\221\345\256\232\345\222\214styl\345\261\236\346\200\247\347\273\221\345\256\232.md"
@@ -0,0 +1,116 @@
+# 笔记
+
+## Vue Class 和 Style 绑定精简总结
+
+## Class 绑定
+
+### 1. 对象语法
+```vue
+<div :class="{ active: isActive, 'text-red': hasError }">内容</div>
+```
+
+### 2. 数组语法
+```vue
+<div :class="[activeClass, errorClass]">内容</div>
+<div :class="[isActive ? 'active' : '', errorClass]">内容</div>
+```
+
+### 3. 与普通 class 共存
+```vue
+<div class="base" :class="{ active: isActive }">内容</div>
+```
+
+---
+
+## Style 绑定
+
+### 1. 对象语法（推荐）
+```vue
+<!-- 驼峰命名 -->
+<div :style="{ color: textColor, fontSize: fontSize + 'px' }">内容</div>
+
+<!-- 短横线需加引号 -->
+<div :style="{ 'font-size': fontSize + 'px' }">内容</div>
+
+<!-- 直接绑定对象 -->
+<div :style="styleObject"></div>
+```
+```js
+const styleObject = { color: 'red', fontSize: '14px' }
+```
+
+### 2. 数组语法
+```vue
+<div :style="[baseStyles, activeStyles]">内容</div>
+```
+
+---
+
+## 核心要点
+
+| 绑定 | 推荐写法 | 命名 |
+|-----|---------|-----|
+| **Class** | `:class="{ active: true }"` | 短横线加引号 `'text-red'` |
+| **Style** | `:style="{ color: 'red' }"` | 驼峰命名 `fontSize` |
+
+### 示例
+```vue
+<div 
+  class="base" 
+  :class="{ active: isActive }"
+  :style="{ color: colorValue, fontSize: size + 'px' }"
+>
+  内容
+</div>
+```
+
+# 作业
+```vue
+
+<script setup>
+
+import { reactive,ref } from 'vue';
+
+let obj = reactive({sf: true, zd: false})
+
+let po = ref(true)
+let pr = ref(false)
+
+let arr1 = reactive([pr.value ? 'sf' : '', 'zd'])
+
+
+
+</script>
+
+<template>
+
+<div v-bind:class="obj">fhg</div>
+
+<div v-bind:class="{zd:true}">hkjkl</div>
+
+<div v-bind:class="[sf,zd]">uio</div>
+
+<div v-bind:class="arr1">imd</div>
+
+</template>
+
+
+<style scoped>
+
+.sf{
+  height: 60px;
+  width: 50px;
+  border: 1px solid red;
+
+}
+
+.centetr{
+  text-align: center;
+}
+
+.zd{
+  font-size: 30px;
+}
+</style>
+
+```
\ No newline at end of file
diff --git "a/\347\245\235\346\204\217\350\277\234/20260429-\344\272\213\344\273\266\345\244\204\347\220\206\345\222\214\345\270\270\347\224\250\347\232\204\344\272\213\344\273\266\344\277\256\351\245\260\347\254\246\345\222\214v-model.md" "b/\347\245\235\346\204\217\350\277\234/20260429-\344\272\213\344\273\266\345\244\204\347\220\206\345\222\214\345\270\270\347\224\250\347\232\204\344\272\213\344\273\266\344\277\256\351\245\260\347\254\246\345\222\214v-model.md"
new file mode 100644
index 0000000000000000000000000000000000000000..af9cb9fb21a6cf26bbc1bd6494055b6de56599c1
--- /dev/null
+++ "b/\347\245\235\346\204\217\350\277\234/20260429-\344\272\213\344\273\266\345\244\204\347\220\206\345\222\214\345\270\270\347\224\250\347\232\204\344\272\213\344\273\266\344\277\256\351\245\260\347\254\246\345\222\214v-model.md"
@@ -0,0 +1,178 @@
+# 笔记
+
+## Vue 事件处理、修饰符和 v-model 精简总结
+
+## 一、事件处理
+
+### 基本用法
+```vue
+<button @click="handleClick">点击</button>
+<button @click="handleClick('参数')">传参</button>
+<button @click="handleClick($event)">传事件对象</button>
+<button @click="handleClick('参数', $event)">混合传参</button>
+```
+
+### 方法调用方式
+```vue
+<!-- 方法名 -->
+<button @click="handleClick"></button>
+
+<!-- 调用语句 -->
+<button @click="count++"></button>
+
+<!-- 调用方法 -->
+<button @click="handleClick()"></button>
+```
+
+---
+
+## 二、事件修饰符
+
+### 常用修饰符
+
+| 修饰符 | 作用 | 示例 |
+|-------|------|------|
+| **`.stop`** | 阻止冒泡 | `@click.stop` |
+| **`.prevent`** | 阻止默认行为 | `@submit.prevent` |
+| **`.once`** | 只触发一次 | `@click.once` |
+| **`.self`** | 只有自身触发 | `@click.self` |
+| **`.capture`** | 捕获阶段触发 | `@click.capture` |
+
+### 按键修饰符
+```vue
+<!-- 回车触发 -->
+<input @keyup.enter="submit">
+
+<!-- 常用别名 -->
+<!-- .enter .tab .delete .esc .space .up .down .left .right -->
+```
+
+### 系统修饰符
+```vue
+<!-- Ctrl + 点击 -->
+<button @click.ctrl="handle">点击</button>
+
+<!-- 组合键 -->
+<!-- .ctrl .alt .shift .meta -->
+```
+
+### 鼠标修饰符
+```vue
+<button @click.right="handle">右键</button>
+<button @click.middle="handle">中键</button>
+<!-- .left .right .middle -->
+```
+
+### 链式调用
+```vue
+<!-- 阻止冒泡 + 阻止默认 -->
+<a @click.stop.prevent="handle">链接</a>
+
+<!-- 只有自身且阻止默认 -->
+<form @submit.self.prevent="submit"></form>
+```
+
+---
+
+## 三、v-model 修饰符
+
+| 修饰符 | 作用 | 示例 |
+|-------|------|------|
+| **`.lazy`** | change 事件后同步 | `v-model.lazy="msg"` |
+| **`.number`** | 转为数字类型 | `v-model.number="age"` |
+| **`.trim`** | 去除首尾空格 | `v-model.trim="name"` |
+
+```vue
+<!-- 组合使用 -->
+<input v-model.lazy.trim="username">
+<input v-model.number="age">
+```
+
+---
+
+## 四、核心要点速记
+
+### 事件修饰符链式顺序很重要
+```vue
+<!-- 先阻止冒泡再阻止默认 -->
+@click.stop.prevent
+
+<!-- 先阻止默认再阻止冒泡 -->
+@click.prevent.stop
+```
+
+### 常用组合
+```vue
+<!-- 表单阻止提交刷新 -->
+<form @submit.prevent="handleSubmit">
+
+<!-- 列表阻止冒泡 -->
+<div @click.stop="handleDiv">
+
+<!-- 回车搜索 -->
+<input @keyup.enter="search">
+
+<!-- 只生效一次 -->
+<button @click.once="handleOnce">
+```
+
+### v-model 本质
+```vue
+<!-- 语法糖 -->
+<input v-model="message">
+
+<!-- 等价于 -->
+<input :value="message" @input="message = $event.target.value">
+```
+
+# 作业
+```vue
+
+<script setup>
+
+import { ref } from 'vue';
+
+let gender = ref('male')
+
+let message = ref('')
+
+let se = ref('')
+
+function fujn(event){
+  // console.log(event.target.value);
+  console.log(se.value);
+}
+
+</script>
+
+<template>
+
+<input type="text" v-model="message" >
+<p>{{ message }}</p>
+
+<input type="radio" v-model="gender" value="male">男
+<input type="radio" v-model="gender" value="female">女
+
+
+<select v-model="se" @change ="fujn">
+
+  <option value="bj">北京</option>
+  <option value="sh">上海</option>
+
+</select>
+
+
+
+
+
+
+
+
+</template>
+
+<style scoped>
+
+</style>
+
+
+```
\ No newline at end of file
diff --git "a/\347\245\235\346\204\217\350\277\234/20260430-mounted().md" "b/\347\245\235\346\204\217\350\277\234/20260430-mounted().md"
new file mode 100644
index 0000000000000000000000000000000000000000..974f3b00d2b16e6370db7cc583a92fcc72bf7aa8
--- /dev/null
+++ "b/\347\245\235\346\204\217\350\277\234/20260430-mounted().md"
@@ -0,0 +1,110 @@
+# 笔记
+
+`mounted` 是 Vue 组件生命周期中**最常用**的钩子之一。以下是精简讲解：
+
+---
+
+### 核心概念
+- **触发时机**：组件被挂载到 DOM 树之后。此时 `this.$el`（选项式）或模板中的 DOM 元素已创建完成，可安全访问。
+- **对应组合式 API**：`onMounted(() => { ... })`
+
+### 主要用途
+1. **操作 DOM**：获取元素尺寸、绑定原生事件、初始化图表/地图等依赖真实 DOM 的第三方库。
+2. **发起异步请求**：可在 `mounted` 中请求数据，但要注意如果需要在服务端渲染（SSR）中获取数据，应使用 `serverPrefetch` 或 `asyncData`，因为 `mounted` 只在客户端执行。
+3. **访问子组件/refs**：通过 `this.$refs` 拿到子组件或 DOM 节点。
+
+### 注意细节
+- **不要在此钩子中执行大量数据修改**，因为修改响应式数据会触发重新渲染 → `updated` → 可能导致性能问题或死循环。
+- **父子顺序**：子组件 `mounted` 全部执行完毕后，父组件的 `mounted` 才执行。因此：
+  - 父组件 `mounted` 中可以访问所有子组件已挂载的状态。
+  - 子组件 `mounted` 中不能确保父组件其他子组件已挂载。
+
+### 代码示例
+```javascript
+// 选项式
+mounted() {
+  this.chart = new Chart(this.$refs.canvas, {...})
+}
+
+// 组合式
+import { onMounted, ref } from 'vue'
+const canvas = ref(null)
+onMounted(() => {
+  const chart = new Chart(canvas.value, {...})
+})
+```
+
+
+# 作业
+
+```vue
+<script setup>
+
+import { ref } from 'vue';
+
+let message = ref('欢迎学习Vue3');
+
+let htmlContent = '<h2 style="color:red;">重要提示</h2><p>请认真完成练习</p>'
+
+let username = "张三"
+
+let createTime = Date.now()
+
+function formatDate(time){
+  let date = new Date(time);
+
+  const year = date.getFullYear();
+
+   const month = String(date.getMonth() + 1).padStart(2, '0');
+
+  const day = String(date.getDate()).padStart(2, '0');
+
+   return `${year}-${month}-${day}`;
+}
+
+let fullName = "vue3 framework"
+
+let user = {
+  name: 'dfdf',
+  title: 'zhj',
+  company: 'dfff',
+  registerTime: Date.now()
+}
+
+let isLoggedIn = true
+
+</script>
+
+<template>
+ 
+<div id="app">
+  <p v-text="message"></p>
+</div>
+
+<div id="app1">
+  <div v-html="htmlContent"></div>
+</div>
+
+<span>{{username}},你好</span>
+<p></p>
+
+<span>{{ formatDate(createTime) }}</span>
+
+<div>{{ fullName.toUpperCase() }}</div>
+
+<div class="card">
+  <h2>{{ user.name }}</h2>
+  <p>职位：{{ user.title }}</p>
+  <p>公司：{{ user.company }}</p>
+  <p>注册时间：{{ formatDate(user.registerTime) }}</p>
+</div>
+
+<p v-if="isLoggedIn">您已登录</p>
+
+</template>
+
+<style scoped>
+
+</style>
+
+```