From 35ac6d177c04a4f344cf3696612954e6e5bb6cb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=83=A1=E6=99=A8=E8=BE=89?= <2630523459@qq.com> Date: Tue, 28 Apr 2026 19:00:29 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E4=BD=9C=E4=B8=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...21\345\256\232\346\214\207\344\273\244.md" | 75 +++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 "\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" 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 0000000..9fb05f4 --- /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 }">..... + + + + + + + 将class属性值绑定为数组 + + <标签名 v-bind:class="['aa' ]">..... + + + + +## style属性绑定 + + 将style属性值绑定为对象 + + <标签名 v-bind:style="{属性名:'属性值',}">..... + + + + + + + 将style属性值绑定为数组 + + <标签名 v-bind:style="{样式名,}">..... + + + + \ No newline at end of file -- Gitee From 2ff5363f1260651b691a46e8e4ee1252e1671e00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=83=A1=E6=99=A8=E8=BE=89?= <2630523459@qq.com> Date: Fri, 1 May 2026 16:16:50 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E4=BD=9C=E4=B8=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...04\347\220\206\346\214\207\344\273\244.md" | 18 + ...21\345\256\232\346\214\207\344\273\244.md" | 16 + ...4\271\240\351\242\230\345\272\223-vue3.md" | 589 ++++++++++++++++++ .../image1.png" | Bin 0 -> 5045 bytes .../image2.png" | Bin 0 -> 6811 bytes .../image3.png" | Bin 0 -> 3340 bytes .../image4.png" | Bin 0 -> 5867 bytes .../image5.png" | Bin 0 -> 3411 bytes .../image6.png" | Bin 0 -> 4539 bytes 9 files changed, 623 insertions(+) create mode 100644 "\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" create mode 100644 "\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" create mode 100644 "\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" create mode 100644 "\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" create mode 100644 "\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" create mode 100644 "\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" create mode 100644 "\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" create mode 100644 "\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" create mode 100644 "\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" 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 0000000..1b29dab --- /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 0000000..2a2e4de --- /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建立双向数据绑定 + + +## 表单修饰符 + + .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 0000000..0dc332e --- /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,589 @@ +# 一、内容渲染(v-text / v-html) + 基础题 + ## 1. v-text 绑定文本 + +
+

+
+ 要求:声明 message 变量,内容为"欢迎学习Vue3",页面加载后显示该文本。 + +效果图 +![alt text](src/24级练习题库/1.内容渲染/image1.png) + +关键代码 + + + + + + ## 2. v-html 渲染HTML + +
+
+
+ 要求:htmlContent 的值为 '

重要提示

请认真完成练习

',渲染出红色标题和段落。 + +效果图 +![alt text](src/24级练习题库/1.内容渲染/image2.png) + +关键代码 + + + + + + + ## 3. 双大括号插值 + + {{ username }},您好! + 要求:声明 username 为"张三",渲染后显示"张三,您好!"。 + +效果图 + +![alt text](src/24级练习题库/1.内容渲染/image3.png) + +关键代码 + + + + + + + ## 4. 表达式计算 + +

商品总价:{{ price * quantity }} 元

+ 要求:price 为 29.9,quantity 为 3,计算并显示总价。 + +效果图 +![alt text](src/24级练习题库/1.内容渲染/image4.png) + +关键代码 + + + + + + + ## 5. 方法调用 + + {{ formatDate(createTime) }} + 要求:声明 createTime 为 Date.now(),实现 formatDate 方法返回格式如"2026-04-27"的日期字符串。 + +效果图 +![alt text](src/24级练习题库/1.内容渲染/image5.png) + +关键代码 + + + + + + + ## 6. 文本拼接与转换 + +
{{ fullName.toUpperCase() }}
+ 要求:fullName 为"vue3 framework",渲染为大写"VUE3 FRAMEWORK"。 + + 效果图 +![alt text](src/24级练习题库/1.内容渲染/image6.png) + +关键代码 + + + + + + + 综合实践题 + ## 7. 用户信息卡片 + +
+

{{ user.name }}

+

职位:{{ user.title }}

+

公司:{{ user.company }}

+

注册时间:{{ formatDate(user.registerTime) }}

+
+ 要求:定义包含 name、title、company、registerTime 的用户对象,formatDate 格式化为"YYYY年MM月DD日",用CSS美化卡片样式。 + +# 二、条件渲染(v-if / v-show) + 基础题 + ## 1. v-if 简单条件 + +

您已登录

+ 要求:声明 isLoggedIn 为 true,当为 true 时显示文本。 + + ## 2. v-else 条件分支 + +

及格

+

不及格

+ 要求:score 为 75,显示"及格";score 改为 45,显示"不及格"。 + + ## 3. v-show 切换显示 + + + 要求:isSubscribed 为 false 时按钮可见,为 true 时隐藏。 + + ## 4. v-else-if 多条件 + +
优秀
+
良好
+
及格
+
需努力
+ 要求:分别测试 level 为 'A'、'B'、'C'、'D' 的显示结果。 + + ## 5. 条件组合渲染 + +
管理面板
+ 要求:isAdmin 为 true,hasPermission 为 true 时显示;任一为 false 时不显示。 + + 综合实践题 + ## 6. 权限管理系统界面 + +
+
+

当前用户:{{ username }}

+

角色:{{ role }}

+
+ +
+

管理员面板

+ + + +
+ +
+

编辑面板

+ + +
+ +
+

用户面板

+

欢迎阅读文章

+
+ +
+

请登录后查看更多内容

+ +
+
+ 要求:实现三种角色(admin/editor/user)的不同界面展示,模拟切换角色查看权限差异。 + +# 三、循环渲染(v-for) + 基础题 + ## 1. 数组遍历 + + + 要求:fruits 数组为 ['苹果','香蕉','橙子'],渲染三个列表项。 + + ## 2. 带索引遍历 + +
{{ index + 1 }}. {{ city }}
+ 要求:cities 为 ['北京','上海','广州','深圳'],显示带序号的列表。 + + ## 3. 对象属性遍历 + +
{{ key }}: {{ value }}
+ 要求:user 对象为 {name: '李四', age: 20, major: '计算机'}。 + + ## 4. 遍历对象数组 + + + {{ student.name }} + {{ student.score }} + + 要求:students 数组包含5个学生对象,渲染成表格行。 + + ## 5. 嵌套循环 + +
+

{{ category.name }}

+ +
+ 要求:定义分类数据结构,每个分类包含2-3个items,渲染成嵌套列表。 + + 综合实践题 + ## 6. 商品购物车 + +
+

购物车

+ + + + + + + + + + + + + + + + + +
商品单价数量小计
{{ item.name }}¥{{ item.price }}{{ item.quantity }}¥{{ item.price * item.quantity }}
+
总计:¥{{ totalPrice }}
+
+ 要求:购物车包含5种商品,每种有id、name、price、quantity,计算所有商品总价,显示空购物车提示(当cartItems为空数组时)。 + +# 四、属性绑定(v-bind) + 基础题 + ## 1. 动态href + + 访问链接 + 要求:url 为 'https://vuejs.org'。 + + ## 2. 动态class + +

这是一段文本

+ 要求:textClass 为 'highlight',在