diff --git "a/\350\203\241\346\231\250\350\276\211/20260427-\345\261\236\346\200\247\347\273\221\345\256\232\346\214\207\344\273\244.md" "b/\350\203\241\346\231\250\350\276\211/20260427-\345\261\236\346\200\247\347\273\221\345\256\232\346\214\207\344\273\244.md"
new file mode 100644
index 0000000000000000000000000000000000000000..9fb05f445ef97a40053c2248a9104824e4904881
--- /dev/null
+++ "b/\350\203\241\346\231\250\350\276\211/20260427-\345\261\236\346\200\247\347\273\221\345\256\232\346\214\207\344\273\244.md"
@@ -0,0 +1,75 @@
+# 属性绑定指令
+
+## class属性绑定
+
+    将class属性值绑定为对象
+
+    <标签名 v-bind:class="{属性名:true }">.....</标签名>
+
+    <template>
+
+    <p v-bind:class="{aa:true,bb:true }">商品A的价格：<input type="text" v-model="A"></p>
+ 
+    </template>
+    <script setup>
+
+    </script>
+    <style scoped>
+
+    .aa{
+    font-size: 20px;
+    }
+
+    </style>
+
+
+    将class属性值绑定为数组
+
+    <标签名 v-bind:class="['aa' ]">.....</标签名>
+
+    <template>
+
+    <p v-bind:class="['aa','bb' ]">商品A的价格：<input type="text" v-model="A"></p>
+ 
+    </template>
+
+
+## style属性绑定
+
+    将style属性值绑定为对象
+
+    <标签名 v-bind:style="{属性名:'属性值',}">.....</标签名>
+
+    <template>
+
+    <p v-bind:style="{font-size:'50px',}">商品A的价格：<input type="text" v-model="A"></p>
+ 
+    </template>
+    <script setup>
+
+    </script>
+    <style scoped>
+
+    .aa{
+    font-size: 20px;
+    }
+
+    </style>
+
+
+    将style属性值绑定为数组
+
+    <标签名 v-bind:style="{样式名,}">.....</标签名>
+
+    <template>
+
+    <p v-bind:style="{a1,a2}">商品A的价格：<input type="text" v-model="A"></p>
+ 
+    </template>
+    <script setup>
+    let a1 =ref({
+        text-align:"center",
+        font-size:"10px"
+    })
+    </script>
+    
\ No newline at end of file
diff --git "a/\350\203\241\346\231\250\350\276\211/20260429-\344\272\213\344\273\266\345\244\204\347\220\206\346\214\207\344\273\244.md" "b/\350\203\241\346\231\250\350\276\211/20260429-\344\272\213\344\273\266\345\244\204\347\220\206\346\214\207\344\273\244.md"
new file mode 100644
index 0000000000000000000000000000000000000000..1b29dabf0570d5cebcbedd637845ab115a24a62a
--- /dev/null
+++ "b/\350\203\241\346\231\250\350\276\211/20260429-\344\272\213\344\273\266\345\244\204\347\220\206\346\214\207\344\273\244.md"
@@ -0,0 +1,18 @@
+# 事件处理指令
+
+	事件处理器：方法事件处理器，内联事件处理器
+
+## 事件监听与处理
+
+	<标签名 v-on:事件名="事件处理器">....</标签名>
+	<标签名 @事件名="事件处理器">....</标签名>(简写)
+
+## DOM中常见的事件
+
+	click：单击事件,单击元素时触发
+	dblclick：双击事件,双击元素时触发
+	mousedown：按下鼠标任意按键时触发
+	mouseup：释放鼠标任意按键时触发
+	mousemove：鼠标在元素内移动时触发
+	mouseout：鼠标移出元素时触发
+
diff --git "a/\350\203\241\346\231\250\350\276\211/20260430-\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232\346\214\207\344\273\244.md" "b/\350\203\241\346\231\250\350\276\211/20260430-\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232\346\214\207\344\273\244.md"
new file mode 100644
index 0000000000000000000000000000000000000000..2a2e4de28f1c215430333ffb985484f54cffcaff
--- /dev/null
+++ "b/\350\203\241\346\231\250\350\276\211/20260430-\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232\346\214\207\344\273\244.md"
@@ -0,0 +1,16 @@
+
+# 表单输入绑定指令
+
+## 双向数据绑定
+
+	可以在表单元素input，textarea，select建立双向数据绑定
+	<input v-model="变量名"/>
+
+## 表单修饰符
+
+	.lazy:监听change事件而不是input事件，即只有在文本框失去焦点后才会更新数据
+	.number自动将用户输入的数据转为数值类型
+	.trim自动过滤用户的首尾空白字符
+
+
+​	
\ No newline at end of file
diff --git "a/\350\203\241\346\231\250\350\276\211/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223-vue3.md" "b/\350\203\241\346\231\250\350\276\211/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223-vue3.md"
new file mode 100644
index 0000000000000000000000000000000000000000..12d0a125370171d4bfb1bb2214be17c1b7a2c90a
--- /dev/null
+++ "b/\350\203\241\346\231\250\350\276\211/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223-vue3.md"
@@ -0,0 +1,690 @@
+# 一、内容渲染（v-text / v-html）
+    基础题
+  ##  1. v-text 绑定文本
+
+    <div id="app">
+    <p v-text="message"></p>
+    </div>
+    要求：声明 message 变量，内容为"欢迎学习Vue3"，页面加载后显示该文本。
+
+效果图
+![alt text](src/24级练习题库/1.内容渲染/image1.png)
+
+关键代码
+
+    <script setup>
+
+    import { ref } from 'vue';
+
+    let message = "欢迎学习Vue3"
+
+    </script>
+
+    <template>
+
+    <div id="app">
+        <p v-text="message"></p>
+    </div>
+
+    </template>
+
+  ##  2. v-html 渲染HTML
+
+    <div id="app">
+    <div v-html="htmlContent"></div>
+    </div>
+    要求：htmlContent 的值为 '<h2 style="color:red;">重要提示</h2><p>请认真完成练习</p>'，渲染出红色标题和段落。
+
+效果图
+![alt text](src/24级练习题库/1.内容渲染/image2.png)
+
+关键代码
+
+    <script setup>
+
+    import { ref } from 'vue';
+
+    let htmlContent = `<h2 style="color:red;">重要提示</h2><p>请认真完成练习</p>`
+
+    </script>
+
+    <template>
+
+    <div id="app">
+        <p v-html="htmlContent"></p>
+    </div>
+
+    </template>
+
+
+  ##   3. 双大括号插值
+
+    <span>{{ username }}，您好！</span>
+    要求：声明 username 为"张三"，渲染后显示"张三，您好！"。
+
+效果图
+
+![alt text](src/24级练习题库/1.内容渲染/image3.png)
+
+关键代码
+
+    <script setup>
+
+    import { ref } from 'vue';
+
+    let username ="张三" 
+
+    </script>
+
+    <template>
+
+    <div id="app">
+        <span>{{ username }}，您好！</span>
+    </div>
+
+    </template>
+
+
+  ##   4. 表达式计算
+
+    <p>商品总价：{{ price * quantity }} 元</p>
+    要求：price 为 29.9，quantity 为 3，计算并显示总价。
+
+效果图
+![alt text](src/24级练习题库/1.内容渲染/image4.png)
+
+关键代码
+
+    <script setup>
+
+    import { ref } from 'vue';
+
+    let price =29.9
+    let quantity=3 
+
+    </script>
+
+    <template>
+
+    <div id="app">
+        <p>商品总价：{{ price * quantity }} 元</p>
+    </div>
+
+    </template>
+
+
+  ##   5. 方法调用
+
+    <span>{{ formatDate(createTime) }}</span>
+    要求：声明 createTime 为 Date.now()，实现 formatDate 方法返回格式如"2026-04-27"的日期字符串。
+
+效果图
+![alt text](src/24级练习题库/1.内容渲染/image5.png)
+
+关键代码
+
+    <template>
+    <div>
+        <span>{{ formatDate(createTime) }}</span>
+    </div>
+    </template>
+
+    <script setup>
+    import { ref } from 'vue'
+
+    const createTime = ref(Date.now())
+
+    function formatDate(timestamp) {
+        const date = new Date(timestamp)
+        const year = date.getFullYear()
+        const month = (date.getMonth() + 1).toString().padStart(2, '0')
+        const day = date.getDate().toString().padStart(2, '0')
+        return `${year}-${month}-${day}`
+    }
+    </script>
+
+
+  ##   6. 文本拼接与转换
+
+    <div>{{ fullName.toUpperCase() }}</div>
+    要求：fullName 为"vue3 framework"，渲染为大写"VUE3 FRAMEWORK"。
+
+    效果图
+![alt text](src/24级练习题库/1.内容渲染/image6.png)
+
+关键代码
+
+    <script setup>
+
+    import { ref } from 'vue';
+
+    let fullName ="vue3 framework"
+
+    </script>
+
+    <template>
+
+    <div id="app">
+        <div>{{ fullName.toUpperCase() }}</div>
+    </div>
+
+    </template>
+
+
+    综合实践题
+  ##   7. 用户信息卡片
+
+    <div class="card">
+    <h2>{{ user.name }}</h2>
+    <p>职位：{{ user.title }}</p>
+    <p>公司：{{ user.company }}</p>
+    <p>注册时间：{{ formatDate(user.registerTime) }}</p>
+    </div>
+    要求：定义包含 name、title、company、registerTime 的用户对象，formatDate 格式化为"YYYY年MM月DD日"，用CSS美化卡片样式。
+
+# 二、条件渲染（v-if / v-show）
+  ##   1. v-if 简单条件
+
+    <p v-if="isLoggedIn">您已登录</p>
+    要求：声明 isLoggedIn 为 true，当为 true 时显示文本。
+
+效果图
+![alt text](src/24级练习题库/2.条件渲染/image1.png)
+
+关键代码
+
+    <script setup>
+    import { ref } from 'vue';
+    let isLoggedIn =true
+
+    </script>
+    <template>
+      <p v-if="isLoggedIn">您已登录</p>
+    </template>
+
+
+  ##   2. v-else 条件分支
+
+    <p v-if="score >= 60">及格</p>
+    <p v-else>不及格</p>
+    要求：score 为 75，显示"及格"；score 改为 45，显示"不及格"。
+效果图
+![alt text](src/24级练习题库/2.条件渲染/image2.1.png)
+![alt text](src/24级练习题库/2.条件渲染/image2.2.png)
+
+关键代码
+
+    <script setup>
+
+    import { ref } from 'vue';
+
+    let score =75
+    //let score =45
+    </script>
+
+    <template>
+
+    <p v-if="score >= 60">及格</p>
+    <p v-else>不及格</p>
+
+    </template>
+
+
+  ##   3. v-show 切换显示
+
+    <button v-show="!isSubscribed">订阅更新</button>
+    要求：isSubscribed 为 false 时按钮可见，为 true 时隐藏。
+效果图
+![alt text](src/24级练习题库/2.条件渲染/image3.1.png)
+![alt text](src/24级练习题库/2.条件渲染/image3.2.png)
+
+关键代码
+
+    <script setup>
+
+    import { ref } from 'vue';
+
+    //let isSubscribed =false
+    let isSubscribed =true
+    </script>
+
+    <template>
+
+    <button v-show="!isSubscribed">订阅更新</button>
+
+    </template>
+
+  ##   4. v-else-if 多条件
+
+    <div v-if="level === 'A'">优秀</div>
+    <div v-else-if="level === 'B'">良好</div>
+    <div v-else-if="level === 'C'">及格</div>
+    <div v-else>需努力</div>
+    要求：分别测试 level 为 'A'、'B'、'C'、'D' 的显示结果。
+效果图
+![alt text](src/24级练习题库/2.条件渲染/image4.png)
+
+关键代码
+
+    <script setup>
+
+    import { ref } from 'vue';
+
+    let level ='A'
+    //let level ='B'
+    //let level ='C'
+
+    </script>
+
+    <template>
+
+    <div v-if="level === 'A'">优秀</div>
+    <div v-else-if="level === 'B'">良好</div>
+    <div v-else-if="level === 'C'">及格</div>
+    <div v-else>需努力</div>
+
+    </template>
+
+  ##   5. 条件组合渲染
+
+    <div v-if="isAdmin && hasPermission">管理面板</div>
+    要求：isAdmin 为 true，hasPermission 为 true 时显示；任一为 false 时不显示。
+效果图
+![alt text](src/24级练习题库/2.条件渲染/image5.png)
+
+关键代码
+
+    <script setup>
+
+    import { ref } from 'vue';
+
+    let isAdmin ='true'
+    let hasPermission ='true'
+
+    </script>
+
+    <template>
+
+    <div v-if="isAdmin && hasPermission">管理面板</div>
+
+    </template>
+
+
+  ##   6. 权限管理系统界面
+
+    <div id="app">
+    <div class="user-info">
+        <p>当前用户：{{ username }}</p>
+        <p>角色：{{ role }}</p>
+    </div>
+
+    <div v-if="role === 'admin'" class="admin-panel">
+        <h3>管理员面板</h3>
+        <button>用户管理</button>
+        <button>系统设置</button>
+        <button>数据统计</button>
+    </div>
+
+    <div v-else-if="role === 'editor'" class="editor-panel">
+        <h3>编辑面板</h3>
+        <button>文章管理</button>
+        <button>草稿箱</button>
+    </div>
+
+    <div v-else class="user-panel">
+        <h3>用户面板</h3>
+        <p>欢迎阅读文章</p>
+    </div>
+
+    <div v-if="!isLoggedIn" class="login-prompt">
+        <p>请登录后查看更多内容</p>
+        <button>登录</button>
+    </div>
+    </div>
+    要求：实现三种角色（admin/editor/user）的不同界面展示，模拟切换角色查看权限差异。
+效果图
+
+
+关键代码
+
+
+#   三、循环渲染（v-for）
+    基础题
+  ##   1. 数组遍历
+
+    <ul>
+    <li v-for="item in fruits">{{ item }}</li>
+    </ul>
+    要求：fruits 数组为 ['苹果','香蕉','橙子']，渲染三个列表项。
+
+  ##   2. 带索引遍历
+
+    <div v-for="(city, index) in cities">{{ index + 1 }}. {{ city }}</div>
+    要求：cities 为 ['北京','上海','广州','深圳']，显示带序号的列表。
+
+  ##   3. 对象属性遍历
+
+    <div v-for="(value, key) in user">{{ key }}: {{ value }}</div>
+    要求：user 对象为 {name: '李四', age: 20, major: '计算机'}。
+
+  ##   4. 遍历对象数组
+
+    <tr v-for="student in students">
+    <td>{{ student.name }}</td>
+    <td>{{ student.score }}</td>
+    </tr>
+    要求：students 数组包含5个学生对象，渲染成表格行。
+
+  ##   5. 嵌套循环
+
+    <div v-for="category in categories">
+    <h3>{{ category.name }}</h3>
+    <ul>
+        <li v-for="item in category.items">{{ item }}</li>
+    </ul>
+    </div>
+    要求：定义分类数据结构，每个分类包含2-3个items，渲染成嵌套列表。
+
+    综合实践题
+ ##    6. 商品购物车
+
+    <div class="cart">
+    <h2>购物车</h2>
+    <table>
+        <thead>
+        <tr>
+            <th>商品</th>
+            <th>单价</th>
+            <th>数量</th>
+            <th>小计</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="(item, index) in cartItems" :key="item.id">
+            <td>{{ item.name }}</td>
+            <td>¥{{ item.price }}</td>
+            <td>{{ item.quantity }}</td>
+            <td>¥{{ item.price * item.quantity }}</td>
+        </tr>
+        </tbody>
+    </table>
+    <div class="total">总计：¥{{ totalPrice }}</div>
+    </div>
+    要求：购物车包含5种商品，每种有id、name、price、quantity，计算所有商品总价，显示空购物车提示（当cartItems为空数组时）。
+
+#    四、属性绑定（v-bind）
+    基础题
+  ##   1. 动态href
+
+    <a v-bind:href="url">访问链接</a>
+    要求：url 为 'https://vuejs.org'。
+
+  ##   2. 动态class
+
+    <p v-bind:class="textClass">这是一段文本</p>
+    要求：textClass 为 'highlight'，在 <style> 中定义 .highlight { color: blue; font-weight: bold; }。
+
+  ##   3. 布尔属性绑定
+
+    <input type="text" v-bind:disabled="isReadonly" />
+    要求：isReadonly 为 true 时输入框禁用，为 false 时可编辑。
+
+  ##   4. 对象语法绑定class
+
+    <div v-bind:class="{ active: isActive, 'text-danger': hasError }">动态Class</div>
+    要求：切换 isActive 和 hasError 的值，观察样式变化。
+
+  ##   5. 动态style绑定
+
+    <div v-bind:style="{ color: fontColor, fontSize: fontSize + 'px' }">样式文本</div>
+    要求：fontColor 为 'red'、fontSize 为 24。
+
+  ##   6. 组件prop绑定
+
+    <child-component v-bind:title="pageTitle" v-bind:items="menuItems" />
+    要求：父组件传递 pageTitle（字符串）和 menuItems（数组）给子组件，子组件通过 props 接收并显示。
+
+    综合实践题
+  ##   7. 动态新闻卡片组件
+
+    <div class="news-card" v-bind:class="{ featured: article.isFeatured }">
+    <img v-bind:src="article.thumbnail" v-bind:alt="article.title" />
+    <div class="content">
+        <span
+        class="tag"
+        v-bind:style="{ backgroundColor: getTagColor(article.category) }"
+        >{{ article.category }}</span>
+        <h3 v-bind:class="{ 'highlight-title': article.isFeatured }">{{ article.title }}</h3>
+        <p class="meta">
+        <span>{{ article.author }}</span>
+        <span>{{ formatDate(article.publishTime) }}</span>
+        </p>
+        <a v-bind:href="'/article/' + article.id" class="read-more">阅读更多</a>
+    </div>
+    </div>
+    要求：创建包含isFeatured布尔值的文章数据，实现根据条件动态切换样式（featured卡片有特殊边框、highlight-title有下划线），getTagColor根据分类返回不同颜色。
+
+#    五、事件绑定（v-on）
+    基础题
+  ##   1. 点击事件
+
+    <button v-on:click="handleClick">点击我</button>
+    要求：点击按钮后 count 加1，并显示"点击次数：X"。
+
+  ##   2. 事件处理方法
+
+    <button @click="greet">打招呼</button>
+    <p>{{ message }}</p>
+    要求：greet 方法设置 message 为"Hello Vue!"。
+
+  ##   3. 传递事件参数
+
+    <button @click="say('欢迎')">说欢迎</button>
+    <button @click="say('再见')">说再见</button>
+    要求：点击不同按钮显示对应文本。
+
+  ##   4. 修饰符 .prevent
+
+    <form @submit.prevent="handleSubmit">
+    <input v-model="formData" />
+    <button type="submit">提交</button>
+    </form>
+    要求：阻止表单默认提交行为，控制台打印表单数据。
+
+  ##   5. 修饰符 .stop 和 .enter
+
+    <div @click="outerClick">
+    <button @click.stop="innerClick">点击我</button>
+    </div>
+    <input @keyup.enter="submitInput" />
+    要求：点击内部按钮只触发 innerClick（阻止冒泡），按Enter键触发 submitInput。
+
+  ##   6. 鼠标事件
+
+    <div @mouseover="isHovered = true" @mouseout="isHovered = false">
+    {{ isHovered ? '鼠标悬停' : '鼠标离开' }}
+    </div>
+    要求：鼠标进入和离开时显示不同文本。
+
+    综合实践题
+  ##  7. 待办事项管理器（Todo List）
+
+    <div class="todo-app">
+    <h2>待办事项</h2>
+
+    <div class="input-row">
+        <input
+        v-model="newTodo"
+        @keyup.enter="addTodo"
+        placeholder="添加新任务..."
+        />
+        <button @click="addTodo">添加</button>
+    </div>
+
+    <ul class="todo-list">
+        <li
+        v-for="(todo, index) in todos"
+        :key="todo.id"
+        @mouseover="hoveredIndex = index"
+        @mouseout="hoveredIndex = -1"
+        :class="{ completed: todo.done, hovering: hoveredIndex === index }"
+        >
+        <input
+            type="checkbox"
+            :checked="todo.done"
+            @change="toggleTodo(index)"
+        />
+        <span>{{ todo.text }}</span>
+        <button
+            v-show="hoveredIndex === index"
+            @click.stop="removeTodo(index)"
+            class="delete-btn"
+        >删除</button>
+        </li>
+    </ul>
+
+    <div class="stats">
+        <span>已完成：{{ completedCount }} / {{ totalCount }}</span>
+        <button @click="clearCompleted" v-if="hasCompleted">清除已完成</button>
+    </div>
+    </div>
+    要求：实现添加任务、标记完成、删除任务、清空已完成功能，鼠标悬停时显示删除按钮，显示完成统计。
+
+ #   六、表单处理（v-model）
+    基础题
+  ##  1. 文本输入框
+
+    <input v-model="username" placeholder="请输入用户名" />
+    <p>您好，{{ username }}</p>
+    要求：输入框内容实时同步显示在下方段落。
+
+  ##  2. 复选框
+
+    <input type="checkbox" v-model="agree" /> 同意协议
+    <button :disabled="!agree">注册</button>
+    要求：未勾选时按钮禁用，勾选后按钮可用。
+
+  ##  3. 单选按钮
+
+    <input type="radio" v-model="gender" value="男" /> 男
+    <input type="radio" v-model="gender" value="女" /> 女
+    <p>选择结果：{{ gender }}</p>
+    要求：选中不同选项显示对应值。
+
+ ##   4. 下拉选择框
+
+    <select v-model="city">
+    <option value="">请选择城市</option>
+    <option value="bj">北京</option>
+    <option value="sh">上海</option>
+    <option value="gz">广州</option>
+    </select>
+    要求：选择城市后显示对应的城市名（不是value值）。
+
+  ##  5. 修饰符 .lazy
+
+    <input v-model.lazy="searchQuery" />
+    <p>搜索内容：{{ searchQuery }}</p>
+    要求：使用 .lazy 修饰符，观察内容是在输入时还是失焦时更新。
+
+  ##  6. 修饰符 .number 和 .trim
+
+    <input v-model.number="age" placeholder="年龄" />
+    <input v-model.trim="nickname" placeholder="昵称" />
+    <p>年龄类型：{{ typeof age }}，昵称：[{{ nickname }}]</p>
+    要求：验证 number 修饰符的类型转换和 trim 修饰符的空格去除。
+
+    综合实践题
+  ##  7. 用户注册表单
+
+    <div class="register-form">
+    <h2>用户注册</h2>
+
+    <div class="form-group">
+        <label>用户名</label>
+        <input
+        v-model="form.username"
+        @blur="validateField('username')"
+        :class="{ error: errors.username }"
+        placeholder="3-10位字母数字"
+        />
+        <span v-if="errors.username" class="error-msg">{{ errors.username }}</span>
+    </div>
+
+    <div class="form-group">
+        <label>邮箱</label>
+        <input
+        v-model="form.email"
+        @blur="validateField('email')"
+        :class="{ error: errors.email }"
+        placeholder="请输入邮箱"
+        />
+        <span v-if="errors.email" class="error-msg">{{ errors.email }}</span>
+    </div>
+
+    <div class="form-group">
+        <label>密码</label>
+        <input
+        v-model="form.password"
+        @blur="validateField('password')"
+        :class="{ error: errors.password }"
+        type="password"
+        placeholder="6位以上"
+        />
+        <span v-if="errors.password" class="error-msg">{{ errors.password }}</span>
+    </div>
+
+    <div class="form-group">
+        <label>性别</label>
+        <div class="radio-group">
+        <label><input type="radio" v-model="form.gender" value="male" /> 男</label>
+        <label><input type="radio" v-model="form.gender" value="female" /> 女</label>
+        <label><input type="radio" v-model="form.gender" value="secret" /> 保密</label>
+        </div>
+    </div>
+
+    <div class="form-group">
+        <label>兴趣爱好</label>
+        <div class="checkbox-group">
+        <label><input type="checkbox" v-model="form.hobbies" value="reading" /> 阅读</label>
+        <label><input type="checkbox" v-model="form.hobbies" value="sports" /> 运动</label>
+        <label><input type="checkbox" v-model="form.hobbies" value="music" /> 音乐</label>
+        <label><input type="checkbox" v-model="form.hobbies" value="travel" /> 旅行</label>
+        </div>
+    </div>
+
+    <div class="form-group">
+        <label>所在城市</label>
+        <select v-model="form.city">
+        <option value="">请选择</option>
+        <option v-for="c in cities" :key="c.value" :value="c.value">{{ c.name }}</option>
+        </select>
+    </div>
+
+    <div class="form-group">
+        <label>个人简介</label>
+        <textarea v-model.trim="form.bio" placeholder="介绍一下自己..."></textarea>
+    </div>
+
+    <div class="form-group">
+        <label>
+        <input type="checkbox" v-model="form.agree" />
+        我已阅读并同意用户协议
+        </label>
+    </div>
+
+    <button
+        @click="handleRegister"
+        :disabled="!isFormValid"
+        class="submit-btn"
+    >注册</button>
+
+    <div v-if="submitSuccess" class="success-msg">注册成功！</div>
+    </div>
+    要求：实现完整的表单验证（用户名3-10位、邮箱格式、密码6位以上），单选/多选框、select下拉框、textarea使用.trim修饰符，表单提交前验证所有字段，通过计算属性isFormValid控制提交按钮状态。
+
+    提交要求
+    每道基础题创建独立组件文件（如 ContentRendering1.vue）
+    综合实践题创建完整功能组件（如 UserInfoCard.vue、PermissionPanel.vue、ShoppingCart.vue、NewsCard.vue、TodoManager.vue、RegisterForm.vue）
+    在 App.vue 中引入并展示所有练习成果
+    完成所有练习后提交到 Git
\ No newline at end of file
diff --git "a/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/1.\345\206\205\345\256\271\346\270\262\346\237\223/image1.png" "b/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/1.\345\206\205\345\256\271\346\270\262\346\237\223/image1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..cb5fef8f6cfb4a0dc0dd8f4711f53703e012722d
Binary files /dev/null and "b/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/1.\345\206\205\345\256\271\346\270\262\346\237\223/image1.png" differ
diff --git "a/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/1.\345\206\205\345\256\271\346\270\262\346\237\223/image2.png" "b/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/1.\345\206\205\345\256\271\346\270\262\346\237\223/image2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..65faa1f3f21697ecc43aa9b93a6ba3ec14e83e51
Binary files /dev/null and "b/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/1.\345\206\205\345\256\271\346\270\262\346\237\223/image2.png" differ
diff --git "a/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/1.\345\206\205\345\256\271\346\270\262\346\237\223/image3.png" "b/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/1.\345\206\205\345\256\271\346\270\262\346\237\223/image3.png"
new file mode 100644
index 0000000000000000000000000000000000000000..aeac1139ff3e81d128ddbd4903f4ed7a145a0766
Binary files /dev/null and "b/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/1.\345\206\205\345\256\271\346\270\262\346\237\223/image3.png" differ
diff --git "a/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/1.\345\206\205\345\256\271\346\270\262\346\237\223/image4.png" "b/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/1.\345\206\205\345\256\271\346\270\262\346\237\223/image4.png"
new file mode 100644
index 0000000000000000000000000000000000000000..2c868090c84345e596f7d43b829574ef911970c5
Binary files /dev/null and "b/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/1.\345\206\205\345\256\271\346\270\262\346\237\223/image4.png" differ
diff --git "a/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/1.\345\206\205\345\256\271\346\270\262\346\237\223/image5.png" "b/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/1.\345\206\205\345\256\271\346\270\262\346\237\223/image5.png"
new file mode 100644
index 0000000000000000000000000000000000000000..a9520a5d46e84acd19ad1431728c58c193a2b23f
Binary files /dev/null and "b/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/1.\345\206\205\345\256\271\346\270\262\346\237\223/image5.png" differ
diff --git "a/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/1.\345\206\205\345\256\271\346\270\262\346\237\223/image6.png" "b/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/1.\345\206\205\345\256\271\346\270\262\346\237\223/image6.png"
new file mode 100644
index 0000000000000000000000000000000000000000..6ea34db8387ad7aabf3bc5931692bff042e24397
Binary files /dev/null and "b/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/1.\345\206\205\345\256\271\346\270\262\346\237\223/image6.png" differ
diff --git "a/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/2.\346\235\241\344\273\266\346\270\262\346\237\223/image1.png" "b/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/2.\346\235\241\344\273\266\346\270\262\346\237\223/image1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..220c09b0170f336dc4283346012c512cd3fbc648
Binary files /dev/null and "b/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/2.\346\235\241\344\273\266\346\270\262\346\237\223/image1.png" differ
diff --git "a/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/2.\346\235\241\344\273\266\346\270\262\346\237\223/image2.1.png" "b/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/2.\346\235\241\344\273\266\346\270\262\346\237\223/image2.1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..9551e68d385b3f44ed2e25b9d1b738bd055c2f44
Binary files /dev/null and "b/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/2.\346\235\241\344\273\266\346\270\262\346\237\223/image2.1.png" differ
diff --git "a/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/2.\346\235\241\344\273\266\346\270\262\346\237\223/image2.2.png" "b/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/2.\346\235\241\344\273\266\346\270\262\346\237\223/image2.2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..4f3aa7e716a446d9263e0b8222dba6440b1a86dc
Binary files /dev/null and "b/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/2.\346\235\241\344\273\266\346\270\262\346\237\223/image2.2.png" differ
diff --git "a/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/2.\346\235\241\344\273\266\346\270\262\346\237\223/image3.1.png" "b/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/2.\346\235\241\344\273\266\346\270\262\346\237\223/image3.1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..4caa333831bb2d47da6792f52b61cc0fc3b49df6
Binary files /dev/null and "b/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/2.\346\235\241\344\273\266\346\270\262\346\237\223/image3.1.png" differ
diff --git "a/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/2.\346\235\241\344\273\266\346\270\262\346\237\223/image3.2.png" "b/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/2.\346\235\241\344\273\266\346\270\262\346\237\223/image3.2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..07de2badbb0db1ba21ed5174e767df3f3d662a25
Binary files /dev/null and "b/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/2.\346\235\241\344\273\266\346\270\262\346\237\223/image3.2.png" differ
diff --git "a/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/2.\346\235\241\344\273\266\346\270\262\346\237\223/image4.png" "b/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/2.\346\235\241\344\273\266\346\270\262\346\237\223/image4.png"
new file mode 100644
index 0000000000000000000000000000000000000000..1fbde778dd5645662c3ce4c5a355d68690981086
Binary files /dev/null and "b/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/2.\346\235\241\344\273\266\346\270\262\346\237\223/image4.png" differ
diff --git "a/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/2.\346\235\241\344\273\266\346\270\262\346\237\223/image5.png" "b/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/2.\346\235\241\344\273\266\346\270\262\346\237\223/image5.png"
new file mode 100644
index 0000000000000000000000000000000000000000..08066a6be59f4e0582de9314b8da299eae364fce
Binary files /dev/null and "b/\350\203\241\346\231\250\350\276\211/src/24\347\272\247\347\273\203\344\271\240\351\242\230\345\272\223/2.\346\235\241\344\273\266\346\270\262\346\237\223/image5.png" differ