实验目的

（1）熟练掌握 v-on 指令的用法，学会使用 v-on 指令监听 DOM 元素的事件，并通过该事件触发调用事件处理程序。

（2）掌握v-on 指令修饰符的基本用法。

实验内容

实现购物车功能的拓展（商品数量的变化、总价变化）。要求：点击+、-按钮实现商品数量的变化，同时其总价和合计金额同步改变。实验效果如图1所示。

图1

参考基础代码如下：

在此基础上完成代码编写及调试。

提示：（1）可以利用计算属性实现商品总价的合计；

（2）利用v-for指令实现表格行（<tr>...</tr>）的重复渲染；

（3）利用v-on指令监听按钮点击事件，处理商品数量的增、减操作。

实验原理或流程图

事件监听：通过 v-on 指令绑定 DOM 事件，当事件触发时调用指定的方法。

事件修饰符：使用 .stop、.prevent、.capture 等修饰符对事件进行更精细的控制。

按键修饰符：用于监听键盘事件，支持按键别名（如 .enter）。

计算属性：利用 Vue 的计算属性动态计算商品总价和合计金额。

循环渲染：使用 v-for 指令动态渲染表格行。

相关知识点

（1）事件监听：使用v-on 指令、事件处理方法、使用内联 JS 语句

使用 v-on 指令监听 DOM 事件的基本格式示例如下：

其中，v-on指令后面为原生事件名称，如：click表示单击事件；通过v-on指令将click单击事件绑定到 show() 方法；当单击“显示”按钮时就会执行 show() 方法。

通常使用v-on指令的简写形式，即：

与事件绑定的方法支持参数 event，即代表传入的原生 DOM 事件对象。

v-on 指令支持内联 js 语句，但只能使用一个js语句。

可以将一个特殊的变量 $event 传入方法之中，用于获取原生的 DOM 事件对象。

（2）v-on指令的修饰符：事件修饰符，按键修饰符

常用的事件修饰符有：.stop,.prevent,.capture,.self,.once,.passive。例如，.prevent用于阻止超链接的默认跳转行为，等于调用event.preventDefaut()。.stop修饰符的作用是阻止事件冒泡，等同于调用event.stopPropagation()。

按键修饰符用于监听键盘上的按键事件。当触发键盘事件时，需要检测按键的keyCode值。示例：

常用按键的keyCode值及其别名：见教材p79中的表6-2。

实验过程或源代码

代码说明

数据结构：

cart 数组存储购物车中的商品信息，每个商品包含 name（名称）、price（单价）和 quantity（数量）。

计算属性：

totalPrice：动态计算每件商品的总价（price * quantity）。

totalAmount：动态计算购物车的合计金额（所有商品总价之和）。

事件处理：

increaseQuantity：增加商品数量。

decreaseQuantity：减少商品数量（数量不能小于1）。

removeItem：删除商品。

循环渲染：

使用 v-for 指令动态渲染购物车中的每一行数据。

事件绑定：

使用 v-on 或 @ 绑定按钮的点击事件。

实验过程

初始化项目：

创建 HTML 文件 shopping-cart.html，引入 Vue.js。

定义购物车数据结构，包括商品名称、单价和数量。

实现功能：

使用 v-for 指令动态渲染购物车表格。

使用 v-on 指令绑定按钮的点击事件，实现商品数量的增减和删除操作。

使用计算属性动态计算商品总价和合计金额。

调试与优化：

测试功能是否正常，确保商品数量和总价能够正确更新。

添加样式优化表格显示效果。

shopping-cart.html

<!DOCTYPE html>

<head>

<title>购物车功能拓展</title>

<style>

table {

width: 100%;

border-collapse: collapse;

}

th, td {

border: 1px solid #ddd;

padding: 8px;

text-align: center;

}

th {

background-color: #f2f2f2;

}

</style>

</head>

<body>

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<td>{{ item.price }}</td>

<td>

</td>

<td>{{ item.totalPrice }}</td>

<td>

</td>

</tr>

</tbody>

<tfoot>

<tr>

<td>{{ totalAmount }}</td>

</tr>

</tfoot>

</table>

</div>

new Vue({

el: '#app',

data: {

cart: [

{ name: '双合成礼盒', price: 100, quantity: 2 },

{ name: '脑白金', price: 200, quantity: 3 },

{ name: '三只松鼠干果礼盒', price: 150, quantity: 5 }

]

computed: {

// 计算属性：动态计算每件商品的总价

totalPrice() {

return this.cart.map(item => item.price * item.quantity);

// 计算属性：动态计算购物车的合计金额

totalAmount() {

return this.totalPrice.reduce((sum, price) => sum + price, 0);

}

methods: {

// 增加商品数量

increaseQuantity(index) {

this.cart[index].quantity += 1;

// 减少商品数量

decreaseQuantity(index) {

if (this.cart[index].quantity > 1) {

this.cart[index].quantity -= 1;

}

// 删除商品

removeItem(index) {

this.cart.splice(index, 1);

}

});

</script>

</body>

</html>

实验心得

通过本次实验，我深入学习了 Vue.js 中事件处理的实现方式，包括 v-on 指令的使用、事件修饰符的作用以及计算属性的动态计算。在实现购物车功能的过程中，我掌握了如何通过事件绑定实现用户交互，并利用计算属性简化代码逻辑。实验中遇到的问题主要是数据更新时的同步问题，通过计算属性和 Vue 的响应式系统，我成功解决了这些问题。这次实验不仅巩固了我的理论知识，还提升了我的实际开发能力，让我对前端开发有了更深刻的理解。