實驗3：事件處理（2學時）

實驗目的

（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>

<html?lang="en">

<head>

? ? <meta?charset="UTF-8">

? ? <meta?name="viewport"?content="width=device-width, initial-scale=1.0">

? ? <title>購物車功能拓展</title>

? ? <script?src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

? ? <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>

? ? <div?id="app">

? ? ? ? <h2>購物車</h2>

? ? ? ? <table>

? ? ? ? ? ? <thead>

? ? ? ? ? ? ? ? <tr>

? ? ? ? ? ? ? ? ? ? <th>商品名稱</th>

? ? ? ? ? ? ? ? ? ? <th>單價</th>

? ? ? ? ? ? ? ? ? ? <th>數量</th>

? ? ? ? ? ? ? ? ? ? <th>總價</th>

? ? ? ? ? ? ? ? ? ? <th>操作</th>

? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? </thead>

? ? ? ? ? ? <tbody>

? ? ? ? ? ? ? ? <tr?v-for="(item, index) in?cart" :key="index">

? ? ? ? ? ? ? ? ? ? <td>{{ item.name?}}</td>

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

? ? ? ? ? ? ? ? ? ? <td>

? ? ? ? ? ? ? ? ? ? ? ? <button?@click="decreaseQuantity(index)">-</button>

? ? ? ? ? ? ? ? ? ? ? ? {{ item.quantity?}}

? ? ? ? ? ? ? ? ? ? ? ? <button?@click="increaseQuantity(index)">+</button>

? ? ? ? ? ? ? ? ? ? </td>

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

? ? ? ? ? ? ? ? ? ? <td>

? ? ? ? ? ? ? ? ? ? ? ? <button?@click="removeItem(index)">刪除</button>

? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? </tbody>

? ? ? ? ? ? <tfoot>

? ? ? ? ? ? ? ? <tr>

? ? ? ? ? ? ? ? ? ? <td?colspan="3">合計金額</td>

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

? ? ? ? ? ? ? ? ? ? <td></td>

? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? </tfoot>

? ? ? ? </table>

? ? </div>

? ? <script>

? ? ? ? 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 的響應式系統，我成功解決了這些問題。這次實驗不僅鞏固了我的理論知識，還提升了我的實際開發能力，讓我對前端開發有了更深刻的理解。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/96667.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/96667.shtml
英文地址，請注明出處：http://en.pswp.cn/web/96667.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！