Vue实战之商品购物车案例

最新推荐文章于 2024-07-19 10:30:06 发布

CamphorBloom

最新推荐文章于 2024-07-19 10:30:06 发布

阅读量2k

点赞数 1

分类专栏： vuejs 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_45719444/article/details/122273595

版权

vuejs 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

学习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）。

CamphorBloom

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
Vue实战之商品购物车案例

学习Vue框架有一段时间了，所以找了个案例练练手，借此来巩固所学知识以及如何将其运用在实际生活场景，学以致用不就是这个意思嘛<_<。好了，废话不多说，切入正题。该案例是利用Vue的计算属性、内置指令、方法等内容，完成一个具有代表性的小功能：购物车。在写代码之前，先对需求进行分析，这样有助于我们理清业务逻辑，尽可能还原设计与产品交互。干程序很忌讳冲上来一股脑霹雳哗啦写代码。购物车需要展示一个已加入购物车的商品列表，包含商品名称、商品单价、购买数量和操作等信息，还需要实时显示购买的总
复制链接

扫一扫