Vue实战之商品购物车案例_《vue.js前端开发实战》购物车案例

作者：笔触狂放9 | 2024-07-09 03:49:39

踩

《vue.js前端开发实战》购物车案例

学习Vue框架有一段时间了，所以找了个案例练练手，借此来巩固所学知识以及如何将其运用在实际生活场景，学以致用不就是这个意思嘛<_<。好了，废话不多说，切入正题。

该案例是利用Vue的计算属性、内置指令、方法等内容，完成一个具有代表性的小功能：购物车。

在写代码之前，先对需求进行分析，这样有助于我们理清业务逻辑，尽可能还原设计与产品交互。干程序很忌讳冲上来一股脑霹雳哗啦写代码。

购物车需要展示一个已加入购物车的商品列表，包含商品名称、商品单价、购买数量和操作等信息，还需要实时显示购买的总价。其中购买数量可以增加或减少，每类商品还可以从购物车中移除。最终实现的效果图：

========================================================================

因为业务代码较多，为方便阅读和管理，我创建了HTML、CSS、JavaScript三种类别文件：

index.html （引入资源及模板）
index.js （vue实例及业务代码）
style.css （样式）

先在index.html中引入Vue.js和相关资源，创建一个根元素来挂载Vue实例：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品购物车案例</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="app" v-cloak>
 
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js"></script>
    <script src="./index.js"></script>
</body>
</html>

注意，这里将vue.min.js和index.js文件写在＜body＞的最底部，如果写在＜head＞里，Vue实例将无法创建，因为此时DOM还没有被解析完成。

本例需要用到Vue.js的computed、methods等选项，在index.js中先初始化实例：


var app = new Vue({
    el: '#app',
    data: {
        list: [
            {
                id: 1,
                name: 'iPhone 13',
                price: 6188,
                count: 1
            },
            {
                id: 2,
                name: 'iPad Pro',
                price: 5888,
                count: 1
            },
            {
                id: 3,
                name: 'MacBook Pro',
                price: 21488,
                count: 1
            }
               ]
            },
    computed: {
    
    }
    methods: {
    
    }  
});

data里的数据比较简单，只有一个列表，里面包含了商品名称、单价、购买数量。在实际业务中，这个列表应该是通过Ajax从服务端动态获取的，这里只做示例，所以直接写入在data选项内，另外每个商品还应该有一个全局唯一的id。

style.css样式：


[v-cloak] {
    display: none;
}
 
table {
    border: 1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
}
 
th, td {
    padding: 8px 16px;
    border: 1px solid #e9e9e9;
    text-align: left;
}
 
th {
    background: #f7f7f7;
    color: #5c6b77;
    font-weight: 600; 
    white-space: nowrap;
}

完整项目代码在github仓库：GitHub -vuejs-exercise: vue综合实战项目练习，有需要或感兴趣的小伙伴可以下载，自己本地调试一下。有一说一，能独立做成一个小案例成就感满满的（8^_^8）。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/801331