Vue基础案例三：购物车（组件化思想练习）

最新推荐文章于 2024-02-22 10:01:20 发布
最新推荐文章于 2024-02-22 10:01:20 发布
阅读量927 收藏 3
点赞数 1
分类专栏： # Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pilgrim_121/article/details/114628392
版权

实现效果：
在这里插入图片描述
1.原始布局：

<div id="app">
   <div class="container">
       <div class='cart'>
           <!--1 头部标题 -->
           <div class="title">我的商品</div>
           <!--2 中间列表 -->
           <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>
           <!--3 尾部结算 -->
           <div class="total">
               <span>总价：123</span>
               <button>结算</button>
           </div>
       </div>
   </div>
</div>

2.运用组件化思想划分独立的功能组件
js:

<script type="text/javascript">
    //以下三个子组件都是局部组件
    //子组件1：标题
    var CartTitle = {
            template: `
		    <div class="title">我的商品</div>
		  `
        }
        //子组件2：列表
    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>
		  `
        }
        //子组件3：计算总价
    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>

html:

<div id="app">
   <div class="container">
        <my-cart></my-cart>
    </div>
</div>

3.完成标题、列表、结算组件的数据展示（父组件向子组件传值）

//父组件
Vue.component('my-cart', {
     //步骤一：在父组件中添加数据
	 data: function() {
	         return {
	             puname: '张三',
	             plist: [{
	                 id: 1,
	                 name: 'TCL彩电',
	                 price: 1000,
	                 num: 1,
	                 img: 'img/a.jpg'
	             }, {
	                 id: 2,
	                 name: '机顶盒',
	                 price: 1000,
	                 num: 1,
	                 img: 'img/b.jpg'
	             }, {
	                 id: 3,
	                 name: '海尔冰箱',
	                 price: 1000,
	                 num: 1,
	                 img: 'img/c.jpg'
	             }, {
	                 id: 4,
	                 name: '小米手机',
	                 price: 1000,
	                 num: 1,
	                 img: 'img/d.jpg'
	             }, {
	                 id: 5,
	                 name: 'PPTV电视',
	                 price: 1000,
	                 num: 2,
	                 img: 'img/e.jpg'
	             }]
	         }
	     },
	     //模板串
	     template: `
		 <div class='cart'>
		   <!-- 步骤二： 子组件绑定父组件的属性值-->
		   <cart-title :uname='puname'></cart-title>
		   <cart-list :list='plist'></cart-list>
		   <cart-total :list='plist'></cart-total>
		 </div>
		`,
	     //它的三个子组件
	     components: {
	         'cart-title': CartTitle,
	         'cart-list': CartList,
	         'cart-total': CartTotal
	     }
	 });

    //子组件1：标题
    var CartTitle = {
            //步骤三：子组件用props接收数据
            props: ['uname'],
            template: `
            <!-- 步骤四： 使用接收的数据-->
             <div class="title" >{{uname}}的商品</div>
            `
            }
            
       //子组件2：列表
        var CartList = {
            props: ['list'],
                template: `
		        <div>
		          <!--循环遍历list-->
		          <div class="item" :key='item.id' v-for='item in list'>
		            <img :src="item.img"/>
		            <div class="name">{{item.name}}</div>
		            <div class="change">
		              <a href="">－</a>
		              <input type="text" class="num" :value='item.num'/>
		              <a href="">＋</a>
		            </div>
		            <div class="del">×</div>
		          </div>           
		        </div>
		      `
       }
       
    //子组件3：尾部结算
	var CartTotal = {
	      props: ['list'],
	      template: `
	        <div class="total">
	          <span>总价：{{sum}}</span>
	          <button>结算</button>
	        </div>
	      `,
	      //计算属性
	      computed: {
	        sum: function() {
	          // 计算商品的总价
	          var t = 0;
	          this.list.forEach(item => {
	            t += item.price * item.num;
	          });
	          return t;
	        }
	      }
	    }

4.删除（子组件向父组件传值）
需求：点击删除按钮，根据item.id找到item在list中的index，再进行删除

注意：数据的定义和操作都要求在父组件中进行，子组件只负责展示。这里的删除操作页面上处于子组件中，所以要向父组件传值，在父组件中进行操作数据。

//子组件2：列表
  var CartList = {
      props: ['list'],
          template: `
    <div>
      <!--循环遍历list-->
      <div class="item" :key='item.id' v-for='item in list'>
        <img :src="item.img"/>
        <div class="name">{{item.name}}</div>
        <div class="change">
          <a href="">－</a>
          <input type="text" class="num" :value='item.num'/>
          <a href="">＋</a>
        </div>
        <!--步骤一：子组件的点击事件（传递item.id）-->
        <div class="del" @click='del(item.id)'>×</div>
      </div>           
    </div>
  `,
    methods: {
         del: function(id) {
             //步骤二：通过$emit(arg1,arg2)触发事件
             // 把id传递给父组件
             //参数1：事件名称，参数二：要传递的数据
             this.$emit('cart-del', id);
         }
     }
 }

//父组件
Vue.component('my-cart', {
    data:{...省略..},
       //模板串
       template: `
		   <div class='cart'>
		     <cart-title :uname='puname'></cart-title>
		     <!--步骤三：父组件用 v-on:arg1或者@arg1 监听子组件的事件cart-del-->
		     <cart-list :list='plist' @cart-del='delCart($event)'></cart-list>
		     <cart-total :list='plist'></cart-total>
		   </div>
		 `,
       //它的三个子组件
       components: {...省略..},
       methods: {
           delCart: function(id) {
               // 根据id删除plist中对应的数据
               // 1、找到id所对应数据的索引
               var index = this.plist.findIndex(item => {
                   return item.id == id;
               });
               // 2、根据索引删除对应数据
               this.plist.splice(index, 1);
           }
       }
   });

5.列表组件中数量 (item.num) 更新后，总价格相应发生变化（子组件向父组件传值）

//子组件2：列表
  var CartList = {
      props: ['list'],
          template: `
    <div>
      <div class="item" :key='item.id' v-for='item in list'>
        <img :src="item.img"/>
        <div class="name">{{item.name}}</div>
        <div class="change">
          <a href="">－</a>
          <!--步骤一：为子组件中的input输入框添加失去焦点事件（传递item.id和事件event，这里通过event拿到input的值value）-->
          <input type="text" class="num" :value='item.num' @blur='changeNum(item.id, $event)'/>
          <a href="">＋</a>
        </div>
        <div class="del" @click='del(item.id)'>×</div>
      </div>           
    </div>
  `,
    methods: {
        //步骤二：子组件中通过$emit(arg1,arg2)触发事件，向父组件传递信息
	    changeNum: function(id, event){
			    //event.target得到input标签
		        // console.log(id, event.target.value);
	          this.$emit('change-num', {
	            id: id,
	            num: event.target.value
	          });
	        }
     }
 }

//父组件
Vue.component('my-cart', {
    data: {...省略..},
       //模板串
       template: `
		   <div class='cart'>
		     <cart-title :uname='puname'></cart-title>
		     <!--步骤三：父组件中用 v-on:arg1或者@arg1 监听子组件的事件change-num，参数$event接收值-->
		     <cart-list :list='plist' @change-num='changeNum($event)'  @cart-del='delCart($event)'></cart-list>
		     <cart-total :list='plist'></cart-total>
		   </div>
		 `,
       //它的三个子组件
       components: {...省略..},
       methods: {
           //步骤四：父组件处理
	       changeNum: function(val) {
	          // 根据子组件传递过来的数据，更新plist中对应的数据
	          this.plist.some(item=>{
	          //如果plist中某一项的id（item.id）等于 输入这一项的id（val.id）
	            if(item.id == val.id) {
	              item.num = val.num;//修改数量值item.num
	              // 终止遍历
	              return true;
	            }
	          });
	        }
       }
   });

6.列表组件中加减数量相关操作（子组件向父组件传值）

//子组件2：列表
  var CartList = {
      props: ['list'],
          template: `
    <div>
      <div class="item" :key='item.id' v-for='item in list'>
        <img :src="item.img"/>
        <div class="name">{{item.name}}</div>
        <div class="change">
          <!--步骤一：为子组件中的加减a标签添加点击事件（传递item.id），并用事件修饰符.prevent阻止默认行为-->
          <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>           
    </div>
  `,
    methods: {
        //步骤二：子组件中通过$emit(事件名称,参数)触发事件，向父组件传递信息
	   sub: function(id) {
             console.log(id);
             this.$emit('cart-one', {
                 //传递的两个参数（对象形式）
                 id: id,
                 step: -1
             });
         },
         add: function(id) {
             console.log(id);
             this.$emit('cart-one', {
                 id: id,
                 step: 1
             });
         }
     }
 }

//父组件
Vue.component('my-cart', {
    data: {...省略..},
       //模板串
       template: `
		   <div class='cart'>
		     <cart-title :uname='puname'></cart-title>
		     <!--步骤三：父组件中用 v-on:arg1或者@arg1 监听子组件的事件cart-one，参数$event接收值-->
		     <cart-list :list='plist' @cart-one='cartOne($event)'  @change-num='changeNum($event)'  @cart-del='delCart($event)'></cart-list>
		     <cart-total :list='plist'></cart-total>
		   </div>
		 `,
       //它的三个子组件
       components: {...省略..},
       methods: {
           //步骤四：父组件处理
	       cartOne: function(val) {
                    console.log('---------');
                    console.log(val);
                    this.plist.some(item => {
                        if (item.id == val.id) {
                            item.num += val.step;
                            // 终止遍历
                            return true;
                        }
                    });
                }
       }
   });
元气满满的大咸鱼
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
32--Vue-前端开发-Vue语法之组件化开发
摘 月
03-10 1154
购物车的例子 eg1：计算商品价格（掌握对象的迭代方法） eg2：全选全不选实现（掌握v-model的使用） eg3：自由选择商品计算价格（掌握v-for用法和自增自减） 二、v-model进阶 lazy：等待input框的数据绑定时区焦点之后再变化 number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留 trim：去除首位的空格 三、生命周期钩子 方法 含义 beforeCreate 创建Vue实例之前调用 created 创建Vue实例成功后调用（可以在此处发送异步请
vue组件化实例-购物车
xufang461010923的专栏
05-02 4907
前言 最近，报了开课吧的web全栈课程，课程上的干货挺多的，现将课上的例子的实现步骤写下来，当做一个课后总结，也方便以后自己查阅，也给大家一个参考。 本案例主要是完成一个简单的购物车功能（添加商品，显示商品列表，加入购物车）；先是将所有功能在一个组件中完成；然后再进行组件化，再将购物车的功能摘出来，放置另一个组件中。 以下是最终完成的效果图： ​​ 本来没有相关样式的，我为了好看点，添加了一些样式...
vue组件化购物车
qq_41309350的博客
02-28 633
第一步建立一个组件的布局 上面部分划为3部分的组件块，第一部分标题，第二部分内容，第三部分结算 实现步骤 实现整体布局和样式效果 划分独立的功能组件 组合所有的子组件形成整体结构 逐个实现各个组件功能 具体代码如下 <body> <div id="app"> <div class="container"> <my-cart></my-cart> </div> </div> <scr
Vue购物车——组件化
weixin_42985170的博客
05-01 707
Vue购物车——组件化需求分析项目图片展示实现步骤购物车案例1. 实现组件化布局2、实现 标题和结算功能组件3. 实现列表组件删除功能4. 实现组件更新数据功能 上5. 实现组件更新数据功能 下 需求分析 按照组件化方式实现业务需求 标题组件（展示文本） 列表组件（列表展示、商品数量变更、商品删除） 结算组件（计算商品总额） 项目图片展示 实现步骤 功能实现步骤 实现整...
Vue购物车——组件化.rar
05-01
Vue购物车——组件化 涉及 Vue组件的全局注册 和 Vue组件的局部注册，父组件向子组件传值，子组件向父组件传值，数据的单向绑定
自己手敲的VUE组件化购物车案例 纪念一下
qq_39349116的博客
08-20 219
<div id="app"> <div class="container"> <my-cart></my-cart> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript">
vue 练习案例（X马）
03-21
Vue.js 是一款流行的前端JavaScript框架，它以组件化开发、易用性和高性能著称。"Vue 练习案例（X马）"很可能是某个开发者在学习Vue.js时创建的一个实践项目，通过模仿或构建类似X马（可能是一个知名的网站或应用）...
demoVue:vue的实用案例
04-30
Vue.js 的核心是组件化思想，允许开发者将UI拆分成可复用的组件。它的主要特性包括： - **模板语法**：Vue 提供了基于HTML的模板语法，使得数据绑定和DOM操作变得简单。 - **虚拟DOM**：Vue 使用虚拟DOM来提高性能...
vue小项目（二）—— 购物车的完整实现
热门推荐
以沫wh的博客
10-18 1万+
购物车的完整实现1需要提前了解的基础知识2目录部署3效果 1需要提前了解的基础知识 本项目完全使用的是前端开发，没有使用到服务器，（前端开发的小伙伴可以放心看），前端使用到： vue, vue-cli, vuex, vue-router, axios，ES6，ES Module等技术 2目录部署 最终实现目录 2 public目录 因为本项目没有使用到服务器，我们这里将数据放在本地，方便获取，list.json是待会页面需要获取的json文件，static/img/list下的是图片资源（也可以放在
vue开发教程&案例&相关项目
最新发布
06-22
#### 三、案例和项目源码 实际项目经验对于掌握 Vue.js 至关重要。GitHub 上有许多开源项目和示例代码可供参考。 1. **GitHub 搜索**：通过搜索“vuejs”关键字，可以找到很多有趣的项目，从中学习到不同的编程...
vue购物车组件
09-02
vue购物车组件
vue实现购物车功能（商品分类）
10-15
主要为大家详细介绍了vue实现购物车功能，商品分类，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue3.x案例 购物车
qq_41358574的博客
02-20 2716
购物车： <template> <div> <table> <caption><h1>购物车</h1></caption> <tr> <th></th> <th>编号</th> <th>商品名称</th> <th>商品价格&lt
Vue:购物车案例-实现标题和结算功能组件
qq_41421033的博客
11-19 222
Vue:购物车案例-实现 标题和结算功能组件 标题组件实现动态渲染 从父组件把标题数据传递过来 即 父向子组件传值 把传递过来的数据渲染到页面上 结算功能组件 从父组件把商品列表list 数据传递过来 即 父向子组件传值 把传递过来的数据计算最终价格渲染到页面上 <div id="app"> <div class="container"> <my-cart></my-cart> </div> &lt
Vue3购物车综合案例
热爱WebGIS的博客
02-22 1363
Vue3购物车综合案例
购物车案例【版本为vue3】
老余的博客
02-13 1462
首先我们要明白整个购物车的组成。它是由一个主页面加两个组件组合成的。等待几秒之后 输入你要创建的文件名进入下一步。打开app.vue 也就是。如果需要发布生产环境。
vue 基础 案例 ：书籍购物车
qq_45494569的博客
03-13 417
vue 案例 ：书籍购物车 一、HTML <div id="app"> <div v-if="books.length>0"> <table> <thead> <tr> <th></th> &lt
Vue实现购物车之组件化和本地持久化
weixin_44415461的博客
08-09 390
怎么存储到本地的，一脸懵逼… <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车实例</title> <script type="text/javascript" src="js/vue.min.js"></...
初学Vue实现一个组件化的购物车
topreventalife的博客
11-07 897
第二天学Vue尝试着用Vue实现的购物车案例过程中解决了几个问题 尝试着用Vue实现的购物车案例 实现：静态页面组件化: 尝试用Vue把静态页面转换成组件化模式 一些业务功能还在写。 父组件渲染到页面上 分三大块： 1.标题组件 2.商品列表组件 3.商品结算组件 过程中解决了几个问题 组件模板没有设置成单个根元素 页面中原样出现了标签属性等内容 控制台没找到错，然后...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值