vue组件化购物车

最新推荐文章于 2023-05-31 20:52:24 发布
最新推荐文章于 2023-05-31 20:52:24 发布
阅读量601 收藏 8
点赞数
分类专栏： #Vue.js基础学习 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41309350/article/details/114238313
版权

第一步建立一个组件的布局

在这里插入图片描述

上面部分划为3部分的组件块，第一部分标题，第二部分内容，第三部分结算

实现步骤

  • 实现整体布局和样式效果
  • 划分独立的功能组件
  • 组合所有的子组件形成整体结构
  • 逐个实现各个组件功能

具体代码如下

<body>
<div id="app">
    <div class="container">
        <my-cart></my-cart>
    </div>
</div>
<script src="../../js/vue.js"></script>
<script type="text/javascript">

    var CartTitle = {
        template: `
        <div class="title">我的商品</div>
      `
    };
    var CartList = {
        template: `
        <div>
          <div class="item">
            <img src="../img/a.jpg"/>
            <div class="name"></div>
            <div class="change">
              <a href="">－</a>
              <input type="text" class="num" />
              <a href="">＋</a>
            </div>
            <div class="del">×</div>
          </div>
          <div class="item">
            <img src="../img/b.jpg"/>
            <div class="name"></div>
            <div class="change">
              <a href="">－</a>
              <input type="text" class="num" />
              <a href="">＋</a>
            </div>
            <div class="del">×</div>
          </div>
          <div class="item">
            <img src="../img/c.jpg"/>
            <div class="name"></div>
            <div class="change">
              <a href="">－</a>
              <input type="text" class="num" />
              <a href="">＋</a>
            </div>
            <div class="del">×</div>
          </div>
          <div class="item">
            <img src="../img/d.jpg"/>
            <div class="name"></div>
            <div class="change">
              <a href="">－</a>
              <input type="text" class="num" />
              <a href="">＋</a>
            </div>
            <div class="del">×</div>
          </div>
          <div class="item">
            <img src="img/e.jpg"/>
            <div class="name"></div>
            <div class="change">
              <a href="">－</a>
              <input type="text" class="num" />
              <a href="">＋</a>
            </div>
            <div class="del">×</div>
          </div>
        </div>
      `
    }
    var CartTotal = {
        template: `
        <div class="total">
          <span>总价：123</span>
          <button>结算</button>
        </div>
      `
    }
    Vue.component('my-cart',{
        template: `
        <div class='cart'>
          <cart-title></cart-title>
          <cart-list></cart-list>
          <cart-total></cart-total>
        </div>
      `,
        components: {
            'cart-title': CartTitle,
            'cart-list': CartList,
            'cart-total': CartTotal
        }
    });
    var vm = new Vue({
        el: '#app',
        data: {

        }
    });

</script>
</body>

css样式

<style type="text/css">
        .container {
        }
        .container .cart {
            width: 300px;
            margin: auto;
        }
        .container .title {
            background-color: lightblue;
            height: 40px;
            line-height: 40px;
            text-align: center;
            /*color: #fff;*/
        }
        .container .total {
            background-color: #FFCE46;
            height: 50px;
            line-height: 50px;
            text-align: right;
        }
        .container .total button {
            margin: 0 10px;
            background-color: #DC4C40;
            height: 35px;
            width: 80px;
            border: 0;
        }
        .container .total span {
            color: red;
            font-weight: bold;
        }
        .container .item {
            height: 55px;
            line-height: 55px;
            position: relative;
            border-top: 1px solid #ADD8E6;
        }
        .container .item img {
            width: 45px;
            height: 45px;
            margin: 5px;
        }
        .container .item .name {
            position: absolute;
            width: 90px;
            top: 0;left: 55px;
            font-size: 16px;
        }

        .container .item .change {
            width: 100px;
            position: absolute;
            top: 0;
            right: 50px;
        }
        .container .item .change a {
            font-size: 20px;
            width: 30px;
            text-decoration:none;
            background-color: lightgray;
            vertical-align: middle;
        }
        .container .item .change .num {
            width: 40px;
            height: 25px;
        }
        .container .item .del {
            position: absolute;
            top: 0;
            right: 0px;
            width: 40px;
            text-align: center;
            font-size: 40px;
            cursor: pointer;
            color: red;
        }
        .container .item .del:hover {
            background-color: orange;
        }
    </style>

第二步利用组件化的思想实现以下功能

  • 实现标题的显示
  • 实现数据的显示
  • 删除数据功能
  • 实现加减
  • 更新数量num,失去焦点的时候改变数量（同时价格也改变）

1.实现标题的显示

在父组件设置一些数据

 Vue.component('my-cart',{
        data:function(){
            return{
                name:'张三',//这是标题名字

                list:[
                    {id:1,name:'手机',peice:1200,num:2,img:'../img/a.jpg'},
                    {id:2,name:'电脑',peice:11200,num:4,img:'../img/b.jpg'},
                    {id:3,name:'机顶盒',peice:200,num:5,img:'../img/c.jpg'},
                    {id:4,name:'1手机',peice:1200,num:1,img:'../img/d.jpg'},
                    {id:5,name:'海尔',peice:1800,num:3,img:'../img/e.jpg'},

                    ]
            }
        },

然后绑定

<div class='cart'>
          <cart-title :name="name"></cart-title>

子组件接受数据

 var CartTitle = {
        props:['name'],
        template: `
        <div class="title">{{name}}的商品</div>
      `
    };

2.实现标数据的显示

在CartList子组件中利用v-for遍历list的数据（切记要绑定数据）

var CartList = {
        props:['list'],
        template: `
        <div>
          <div  v-for="item in list" :key="item.id" class="item">
            <img :src="item.img"/>
            <div class="name">{{item.name}}</div>

3.实现删除数据

首先找到每一项的索引，根据索引删除

 delcart(id) {
                //找到id的索引
                var index=this.list.findIndex(item=>{
                    return item.id == id;
                })
                this.list.splice(index,1);
            },

4。更新数量num和实现加减

首先在子组件中定义，计算结果在父组件中运算

gen(val){
             this.list.some(item=>{
                 if (item.id == val.id) {
                    item.num=val.num ;
                     return true;
                 }
                 //终止遍历

             })
            },
            sub(val){
                this.list.some(item=>{
                    if (item.id == val.id) {
                        item.num -=1;
                        return true;
                    }
                    //终止遍历

                })
            },
            add(val){
                this.list.some(item=>{
                    if (item.id == val.id) {
                        item.num +=1;
                        return true;
                    }
                    //终止遍历

                })
            }

最终效果：
在这里插入图片描述
整合代码：

<div id="app">
    <div class="container">
        <my-cart></my-cart>
    </div>
</div>
<script src="../../js/vue.js"></script>
<script type="text/javascript">

    var CartTitle = {
        props:['name'],
        template: `
        <div class="title">{{name}}的商品</div>
      `
    };
    var CartList = {
        props:['list'],
        template: `
        <div>
          <div  v-for="item in list" :key="item.id" class="item">
            <img :src="item.img"/>
            <div class="name">{{item.name}}</div>
                <p>价格{{item.peice}}</p>
            <div class="change">
              <a href="" @click.prevent="sub(item.id)">－</a>
              <input type="text" class="num" :value="item.num" @blur="changenum(item.id,$event)"/>

              <a href="" @click.prevent="add(item.id)">＋</a>
            </div>
            <div class="del" @click="del(item.id)">×</div>
          </div>

      `,

        methods:{
            del(id){
                this.$emit('cart-del',id);//把id给父组件
           //应该把处理结果给父组件
            },
            changenum(id,event){
                this.$emit('cart-changenum',{
                    id:id,
                    num:event.target.value
                })

            },
            sub(id){
                this.$emit('cart-sub',{
                    id:id
                });//把id给父组件
            },
            add(id){
                this.$emit('cart-add',{
                    id:id
                });//把id给父组件
            }
        }

    }
    var CartTotal = {
        props:['list'],
        template: `
        <div class="total">
          <span>总价：{{ total}}</span>
          <button>结算</button>
        </div>
      `,
        computed:{
            total:function () {
               var t=0;//总价
               this.list.forEach(item =>{
                   t+=item.peice*item.num;
               });
               return t;
            }
        }
    }
    Vue.component('my-cart',{
        data:function(){
            return{
                name:'张三',

                list:[
                    {id:1,name:'手机',peice:1200,num:2,img:'../img/a.jpg'},
                    {id:2,name:'电脑',peice:11200,num:4,img:'../img/b.jpg'},
                    {id:3,name:'机顶盒',peice:200,num:5,img:'../img/c.jpg'},
                    {id:4,name:'1手机',peice:1200,num:1,img:'../img/d.jpg'},
                    {id:5,name:'海尔',peice:1800,num:3,img:'../img/e.jpg'},

                    ]
            }
        },
        template: `
        <div class='cart'>
          <cart-title :name="name"></cart-title>
          <cart-list :list="list" @cart-del="delcart($event)" @cart-changenum="gen($event)" @cart-sub="sub($event)"
          @cart-add="add($event)"
          ></cart-list>
          <cart-total :list="list"></cart-total>
        </div>
      `,
        components: {
            'cart-title': CartTitle,
            'cart-list': CartList,
            'cart-total': CartTotal
        },
        methods: {
            delcart(id) {
                //找到id的索引
                var index=this.list.findIndex(item=>{
                    return item.id == id;
                })
                this.list.splice(index,1);
            },
            gen(val){
             this.list.some(item=>{
                 if (item.id == val.id) {
                    item.num=val.num ;
                     return true;
                 }
                 //终止遍历

             })
            },
            sub(val){
                this.list.some(item=>{
                    if (item.id == val.id) {
                        item.num -=1;
                        return true;
                    }
                    //终止遍历

                })
            },
            add(val){
                this.list.some(item=>{
                    if (item.id == val.id) {
                        item.num +=1;
                        return true;
                    }
                    //终止遍历

                })
            }
        }
    });
    var vm = new Vue({
        el: '#app',
        data: {

        }
    });

</script>

感觉组件化这样写比较麻烦，但是遇到比较大的东西时可能比较复杂吧，
这个案例的知识点有

（1）父组件向子组件传值（props传递数据原则：单向数据流）

首先在父组件定义数据和绑定数据
然后子组件利用 props传递数据获取父组件的数据

（2）子组件向父组件传值

 子组件通过$emit把数据给父组件
 父组件通过$event数据

（3）event.target.value代表最新的值

过客尘烟
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现购物车功能（商品分类）
10-15
主要为大家详细介绍了vue实现购物车功能，商品分类，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现购物车小案例
12-13
8. **组件化**： - 虽然这个案例没有涉及 Vue 组件，但在实际项目中，每个商品项可能被封装为一个组件，以提高代码复用性和可维护性。 9. **数据响应性**： - Vue.js 的核心特性之一就是数据响应性，当数据发生...
（六）Vue项目——微商城：实现购物车结算信息、商品数量加减
m0_71824048的博客
05-31 2835
通过window+Apache+php+MySQL 服务器配置提升对项目开发认识。
Vue基础案例三：购物车（组件化思想练习）
wind的博客
03-10 906
实现效果： 1.原始布局： <div id="app"> <div class="container"> <div class='cart'> <!--1 头部标题 --> <div class="title">我的商品</div> <!--2 中间列表 --> <div>
vue组件创建购物车列表
桃桃雾的博客
09-05 538
vue组件创建购物车列表
初学Vue实现一个组件化的购物车
topreventalife的博客
11-07 887
第二天学Vue尝试着用Vue实现的购物车案例过程中解决了几个问题 尝试着用Vue实现的购物车案例 实现：静态页面组件化: 尝试用Vue把静态页面转换成组件化模式 一些业务功能还在写。 父组件渲染到页面上 分三大块： 1.标题组件 2.商品列表组件 3.商品结算组件 过程中解决了几个问题 组件模板没有设置成单个根元素 页面中原样出现了标签属性等内容 控制台没找到错，然后...
Vue购物车——组件化.rar
05-01
在"Vue购物车——组件化"这个示例中，我们将深入探讨Vue组件的全局注册与局部注册、父子组件之间的通信以及数据的单向绑定等关键概念。 首先，我们来看**Vue组件的全局注册**。全局注册组件意味着在整个Vue实例中，...
vue实现淘宝购物车功能
10-15
总的来说，通过Vue.js实现淘宝购物车功能，我们需要理解Vue的数据绑定、组件化、事件处理等核心特性，并结合实际业务需求进行开发。以上代码仅为示例，实际开发时需根据具体需求进行调整和完善。
vue2.0实现购物车小案例
07-11
Vue.js是一个轻量级的前端JavaScript库，它提供了数据绑定、组件化、指令系统等特性，使得构建用户界面变得更为简洁高效。下面将详细阐述实现购物车小案例的关键知识点。 1. **Vue实例**： - 在Vue中，每个Vue应用...
vue-购物车实例
05-02
这是一个Vue实例，其主要实现一个简单的...用于实践Vue的数据绑定，条件，循环，父子通信，组件化等功能。 这个实例详细的实现说明，可查看博客：https://blog.csdn.net/xufang461010923/article/details/89743564
vue实现商城购物车功能
08-28
主要为大家详细介绍了vue实现商城购物车功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
完整的vue开发的购物车组件
07-03
是一个完整的用vue开发的购物车组件，可以实现全选，取消全选，以及单选显示总价，未选中则不显示总价等功能。
Vue实现购物车功能
08-30
本篇文章主要分享了Vue实现购物车功能的实例代码。具有很好的参考价值。下面跟着小编一起来看下吧
Vue组件化开发 购物车小案例
weixin_44717047的博客
07-05 318
Vue组件化开发 购物车小案例
【VUE】vue入门之实现简易的购物车组件
吴纯玲的博客
07-05 3047
vue初学者 由于之前用惯了angular了，所以学起vue来还是比较得心应手的，昨天大概看了一遍vue的API文档，今天用vue实现一个简易的购物车组件 先上仓库地址https://gitee.com/wuchunling/shoppingCart.git 先看效果图 1.全局安装vue-cli命令行工具 npm install vue-cli --g 2.用vue命令行初始化项...
使用Vue实现简单的商品添加和购物车功能
qq_40137978的博客
09-28 4873
上边的动态图就是利用vue实现简单的添加商品和加入购物车 输入商品名称和价格后点击添加商品，商品加入列表，然后点击商品后边的加入购物车，商品添加进下方的购物车 购物车里点击加或者减，可以修改购物车中商品的数量，同时总金额也会随着变化，当商品数量为1的时候再点击减号，弹出是否确认删除的提示框，点击确认，则删除购物车中的商品。并且随着选中框的变化，下方选中的商品数量随着变化，需付总金额也随之变化。 使用vue的三部曲：引包、留坑、实例化 知识点包括：vue基本常用指令的使用、组件化、父子组件之间的通讯、数据监.
Vue2.0开发购物车实例
大灰狼的小绵羊哥哥的博客
03-04 1299
前言 虽然Vue最强大的是组件化开发，但是其实多页面开发也蛮适合的。看了慕课网的使用Vue2.0开发购物车的教程之后，自己也实现了一遍。http://www.imooc.com/article/16454 初始化package.json 使用npm init命令来自动生成package.json文件。 会依次让你输入: name: 你的项目名称(默认会使用你的文件夹名称，
vue组件化 购物车
最新发布
11-14
Vue组件化购物车可以分为三个组件：Cart、CartList和CartTitle。其中，Cart是父组件，CartList和CartTitle是子组件。Cart组件负责渲染整个购物车，CartList组件负责渲染购物车中的商品列表，CartTitle组件负责渲染购物车的标题。 具体实现步骤如下： 1.在HTML中引入Vue.js和购物车组件的JS文件。 2.在HTML中创建一个div元素，作为购物车组件的容器。 3.在JS文件中定义CartTitle组件，代码如下： ```javascript var CartTitle = { props: ['name'], template: ` <div class="title">{{name}}的商品</div> ` }; ``` 4.在JS文件中定义CartList组件，代码如下： ```javascript var CartList = { props: ['list'], template: ` <div> <div v-for="item in list" :key="item.id" class="item"> <img :src="item.img"/> <div class="name">{{item.name}}</div> <div class="price">{{item.price}}</div> </div> </div> ` }; ``` 5.在JS文件中定义Cart组件，代码如下： ```javascript var Cart = { data: function() { return { name: '我的购物车', list: [ { id: 1, name: '商品1', price: 100, img: 'img1.jpg' }, { id: 2, name: '商品2', price: 200, img: 'img2.jpg' }, { id: 3, name: '商品3', price: 300, img: 'img3.jpg' } ] }; }, components: { 'cart-title': CartTitle, 'cart-list': CartList }, template: ` <div class="cart"> <cart-title :name="name"></cart-title> <cart-list :list="list"></cart-list> </div> ` }; ``` 6.在JS文件中创建Vue实例，并将Cart组件挂载到购物车容器中，代码如下： ```javascript new Vue({ el: '#cart-container', components: { 'cart': Cart }, template: '<cart></cart>' }); ``` 相关问题：

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值