[Vue.js] 深入 -- 案例 - 购物车

最新推荐文章于 2022-07-23 18:15:48 发布
最新推荐文章于 2022-07-23 18:15:48 发布
阅读量400 收藏 1
点赞数
分类专栏： Vue.js 文章标签： vue 购物车案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DeathDomain/article/details/109471355
版权

案例 - 购物车

按照组件化方式实现业务需求
  • 根据业务功能进行组件化划分
    • 标题组件(展示文本)
    • 列表组件(列表展示、商品数量变更、商品删除)
    • 结算组件(计算商品总额)
功能实现步骤
  • 实现整体布局和样式效果
  • 划分独立的功能组件
  • 组合所有的子组件形成整体结构
  • 逐个实现各个组件功能
    • 标题组件
    • 列表组件
    • 结算组件
效果图展示

 

实现组件化布局
  • 先创建一个局部组件my-cart,在里面引入属性components,定义三个组件cart-title,cart-list,cart-total
var CartTitle = {
	template: `

	`
}
var CartList = {
	template: `

	`
}
var CartTotal = {
	template: `

	`
}

Vue.component('my-cart',{
	template: `
        
	`,
	components: {
		'cart-title': CartTitle,
		'cart-list': CartList,
		'cart-total': CartTotal
	}
});
  • 把页面的静态结构转化为组件化的方式
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
	}
});
  • 在容器中利用<my-cart></my-cart>展示出效果
<div id="app">
	<div class="container">
		<my-cart></my-cart>
	</div>
</div>

 

实现标题和结算组件功能
  • 用父组件传递标题的数据
var CartTitle = {
	props: ['uname'],
	template: `
		<div class="title">{{uname}}的动物园拍卖会</div>
      `
}

Vue.component('my-cart',{
	data: function() {
		return {
			uname: 'DG',
		}
    },
	template: `
		<div class='cart'>
			<cart-title :uname='uname'></cart-title>
			<cart-list></cart-list>
			<cart-total></cart-total>
		</div>
	`,
}
  • 接下来需要有数据提供
Vue.component('my-cart',{
        data: function() {
            return {
                uname: 'DG',
                list: [{
                    id: 1,
                    name: '熊猫',
                    price: 1000,
                    num: 1,
                    img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3726570454,3633557931&fm=26&gp=0.jpg'
                },{
                    id: 2,
                    name: '猴子',
                    price: 1000,
                    num: 1,
                    img: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3524667055,2282983046&fm=26&gp=0.jpg'
                },{
                    id: 3,
                    name: '兔子',
                    price: 1000,
                    num: 1,
                    img: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1173496453,597070384&fm=26&gp=0.jpg'
                },{
                    id: 4,
                    name: '老鼠',
                    price: 1000,
                    num: 1,
                    img: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3570432866,2699104227&fm=26&gp=0.jpg'
                },{
                    id: 5,
                    name: '海豚',
                    price: 1000,
                    num: 2,
                    img: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1113954919,3492262937&fm=26&gp=0.jpg'
                }]
            }
        }
  • 之后把数据传递给cart-total
template: `
    <div class='cart'>
        <cart-title :uname='uname'></cart-title>
        <cart-list></cart-list>
        <cart-total :list='list'></cart-total>
    </div>
`
  • 在传递完需要接受数据
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.price * item.num;
		});
		return t;
	}
}

 

实现列表组件删除功能

  • 传递和接受list

    • 传递
    template: `
	<div class='cart'>
		<cart-title :uname='uname'></cart-title>
		<cart-list :list='list'></cart-list>
		<cart-total :list='list'></cart-total>
	</div>
`
    • 接受
    var CartList = {
	props: ['list'],
	template: `
		<div>
			<div :key='item.id' v-for='item in list' class="item">
				<img :src="item.img"/>
				<div class="name">{{item.name}}</div>
				<div class="change">
					<a href="">－</a>
					<input type="text" class="num" />
					<a href="">＋</a>
				</div>
				<div class="del" @click='del(item.id)'>×</div>
			</div>
		</div>
	`
}

  • 实现删除

methods: {
    del: function(id){
        // 把id传递给父组件
        this.$emit('cart-del', id);
    }
}
  • 找到对应的父组件
template: `
    <div class='cart'>
        <cart-title :uname='uname'></cart-title>
        <cart-list :list='list' @cart-del='delCart($event)'></cart-list>
        <cart-total :list='list'></cart-total>
    </div>
`
  • 根据id删除list中对应的数据
methods: {
    delCart: function(id) {
        // 1、找到id所对应数据的索引
        var index = this.list.findIndex(item=>{
        return item.id == id;
        });
        // 2、根据索引删除对应数据
        this.list.splice(index, 1);
    }
}

 

实现组件更新数据功能
  • 利用属性绑定的方式实现num呈现在前端页面中
var CartList = {
	props: ['list'],
	template: `
		<div>
			<div :key='item.id' v-for='item in list' class="item">
				<img :src="item.img"/>
				<div class="name">{{item.name}}</div>
				<div class="change">
					<a href="">－</a>
					<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: {
	changeNum: function(id, event){
		this.$emit('change-num', {
			id: id,
			num: event.target.value
			});
		},
		del: function(id){
            // 把id传递给父组件
            this.$emit('cart-del', id);
		}
	}
}
  • 在父组件中进行监听
template: `
    <div class='cart'>
        <cart-title :uname='uname'></cart-title>
        <cart-list :list='list' @change-num='changeNum($event)' @cart-del='delCart($event)'></cart-list>
        <cart-total :list='list'></cart-total>
    </div>
`
  • 定义函数
methods: {
    changeNum: function(val) {
        // 根据子组件传递过来的数据，跟新list中对应的数据
    	this.list.some(item=>{
    		if(item.id == val.id) {
    			item.num = val.num;
    			// 终止遍历
    			return true;
    		}
    	});
	},
}
  • 实现加或减更改数值
template: `
	<div>
		<div :key='item.id' v-for='item in list' class="item">
			<img :src="item.img"/>
			<div class="name">{{item.name}}</div>
			<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>
	</div>
`

sub: function(id){
    this.$emit('change-num', {
    	id: id,
    	type: 'sub'
    });
},
add: function(id){
    this.$emit('change-num', {
    	id: id,
    	type: 'add'
	});
},
  • 对输入域变更、加号变更、减号变更进行判断
methods: {
	changeNum: function(val) {
		// 分为三种情况：输入域变更、加号变更、减号变更
		if(val.type=='change') {
			// 根据子组件传递过来的数据，跟新list中对应的数据
			this.list.some(item=>{
				if(item.id == val.id) {
					item.num = val.num;
					// 终止遍历
					return true;
				}
			});
		}else if(val.type=='sub'){
			// 减一操作
			this.list.some(item=>{
				if(item.id == val.id) {
					item.num -= 1;
					// 终止遍历
					return true;
				}
			});
		}else if(val.type=='add'){
			// 加一操作
			this.list.some(item=>{
				if(item.id == val.id) {
					item.num += 1;
					// 终止遍历
					return true;
				}
			});
		}
	}
}

 

整体代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <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>
</head>
<body>
<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">

    var CartTitle = {
        props: ['uname'],
        template: `
            <div class="title">{{uname}}的动物园拍卖会</div>
        `
    }
    var CartList = {
        props: ['list'],
        template: `
            <div>
                <div :key='item.id' v-for='item in list' class="item">
                    <img :src="item.img"/>
                    <div class="name">{{item.name}}</div>
                    <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>
            </div>
        `,
        methods: {
            changeNum: function(id, event){
                this.$emit('change-num', {
                    id: id,
                    type: 'change',
                    num: event.target.value
                });
            },
            sub: function(id){
                this.$emit('change-num', {
                    id: id,
                    type: 'sub'
                });
            },
            add: function(id){
                this.$emit('change-num', {
                    id: id,
                    type: 'add'
                });
            },
            del: function(id){
                // 把id传递给父组件
                this.$emit('cart-del', 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.price * item.num;
                });
                return t;
            }
        }
    }
    Vue.component('my-cart',{
        data: function() {
            return {
                uname: 'DG',
                list: [{
                    id: 1,
                    name: '熊猫',
                    price: 1000,
                    num: 1,
                    img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3726570454,3633557931&fm=26&gp=0.jpg'
                },{
                    id: 2,
                    name: '猴子',
                    price: 1000,
                    num: 1,
                    img: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3524667055,2282983046&fm=26&gp=0.jpg'
                },{
                    id: 3,
                    name: '兔子',
                    price: 1000,
                    num: 1,
                    img: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1173496453,597070384&fm=26&gp=0.jpg'
                },{
                    id: 4,
                    name: '老鼠',
                    price: 1000,
                    num: 1,
                    img: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3570432866,2699104227&fm=26&gp=0.jpg'
                },{
                    id: 5,
                    name: '海豚',
                    price: 1000,
                    num: 2,
                    img: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1113954919,3492262937&fm=26&gp=0.jpg'
                }]
            }
        },
        template: `
            <div class='cart'>
                <cart-title :uname='uname'></cart-title>
                <cart-list :list='list' @change-num='changeNum($event)' @cart-del='delCart($event)'></cart-list>
                <cart-total :list='list'></cart-total>
            </div>
        `,
        components: {
            'cart-title': CartTitle,
            'cart-list': CartList,
            'cart-total': CartTotal
        },
        methods: {
            changeNum: function(val) {
                // 分为三种情况：输入域变更、加号变更、减号变更
                if(val.type=='change') {
                    // 根据子组件传递过来的数据，跟新list中对应的数据
                    this.list.some(item=>{
                        if(item.id == val.id) {
                            item.num = val.num;
                            // 终止遍历
                            return true;
                        }
                    });
                }else if(val.type=='sub'){
                    // 减一操作
                    this.list.some(item=>{
                        if(item.id == val.id) {
                            item.num -= 1;
                            // 终止遍历
                            return true;
                        }
                    });
                }else if(val.type=='add'){
                    // 加一操作
                    this.list.some(item=>{
                        if(item.id == val.id) {
                            item.num += 1;
                            // 终止遍历
                            return true;
                        }
                    });
                }
            },
            delCart: function(id) {
                // 根据id删除list中对应的数据
                // 1、找到id所对应数据的索引
                var index = this.list.findIndex(item=>{
                    return item.id == id;
                });
                // 2、根据索引删除对应数据
                this.list.splice(index, 1);
            }
        }
    });
    var vm = new Vue({
        el: '#app',
        data: {

        }
    });

</script>
</body>
</html>
^ω^奋斗小青年
关注
专栏目录
Vue-购物车案例（非常详细）
qq_38666686的博客
12-21 1万+
学习目标 初始代码 提供了数据，页面内容和页面样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .fl{ float: left; } .fr{ float:
从零开始打造vue---购物车案例
m0_67390788的博客
03-06 469
目录 ?购物车案例 1. 案例效果 ?2. 实现步骤 1. 初始化项目结构 2. 封装 es-header 组件 3. 基于 axios 请求商品列表数据 4. 封装 es-footer 组件 5. 封装 es-goods 组件 实现合计、结算数量、全选功能 6.1 动态统计已勾选商品的总价格 6.2 动态统计已勾选商品的总数量 6.3 实现全选功能 7. 封装 es-counter 组件 购物车案例 1. 案例效果 2. 实现步骤 ① 初始化项目基本结构 ② 封装 EsHeader 组件 ③ 基于
vue.js购物车案例
09-27
这是一个Vue.js购物车的案例， 里面有增加、删除等功能，这是之前我写APP的购物车时用到的，希望对大家有帮助
Vue.js——购物车案例-界面搭建——2020.11.20
weixin_43402353的博客
11-20 444
一丶案例代码 （一）HTML代码 <!--作者：key--> <!--浏览工具：Chrome--> <!--开发工具：WebStorm--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.cs
Vue.js-购物车案例
hxy1625309592的博客
04-24 318
1.1 项目目录 ​ 1.2 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车案列</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="app"> &l
Vue.js购物车示例
飞蛾逐月
09-01 429
文章目录准备代码参考文献 准备 Vue.js 开发版本：https://cn.vuejs.org/js/vue.js 生产版本：https://cn.vuejs.org/js/vue.min.js 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &lt...
vue实现购物车小案例
12-13
Vue.js 是一个流行的轻量级前端框架，用于构建用户界面。...总的来说，这个购物车案例展示了 Vue.js 如何结合 HTML、CSS 和 JavaScript 来构建一个简单的交互式应用，通过数据驱动视图，简化了前端开发过程。
基于vue.js实现购物车
10-15
通过使用Vue.js实现购物车，可以深入学习Vue的响应式系统、指令、组件系统等核心特性。上述代码片段通过实例化Vue组件，并在模板中使用各种Vue指令来处理界面逻辑，通过方法来处理交互逻辑，最终实现一个完整的...
Vue.js购物车小案例
m0_67640165的博客
07-23 616
vue.js购物车小案例
VueJS购物车案例
11-13
基于VueJS购物车案例，就是简单的demo，比较适合新手参考
《Vue.js实战》购物车案例（包含全选、分类、删除）
Corlly的博客
08-09 3108
题目来源：《Vue.js实战》第五章 5.5 实战：利用计算属性、指令等知识开发购物车 参考链接：https://blog.csdn.net/XJ_18335388352/article/details/84777985 展示效果链接：https://loaln.github.io/vue_practice/html/shop.html 购物车案例实现效果​​​​​练习一： 在当前示例...
VUE JS小实例——购物车的实现
码小菜（SunShuo）的先生的博客
04-10 480
index.html代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>购物车示例</title> <link rel="stylesheet" type="text/css" href="../css/style.css" /&g...
基于vue.js框架,实现简单的购物车示例
Hamlet01的博客
07-31 374
今天用vue.js做了一个简易的购物车，跟大家分享一下 首先定义一个div，在定义一个table <div id="app"> <div v-if="boolist.length>0"> <table border="1" cellpadding="0" cellspacing="0"> <th colspan="7">购物车</th> <tr> <td>序号</td&g.
Vue.js之简单购物车的实现
weixin_44827643的博客
07-22 4623
该组件作为父组件，内部又划分为三个组件，分别为cart-title、cart-list、cart-total，对应购物车的标题、列表以及总价区域。为两个按钮绑定点击事件，为输入框绑定失去焦点事件。在父组件中定义list数据，通过props传给总价组件，在计算属性中利用reduce方法得出总价。在父组件中定义uname数据，通过props属性传给标题组件。商品列表组件功能的实现是购物车最重要的部分，相对来说功能较复杂。划分完成后，则将静态布局的代码放置到对应组件的模板中。在父组件中绑定自定义的监听事件。...
Vue.js学习第四天——购物车案例
beanBag
02-09 525
Vue.js学习第四天——购物车案例 实现的大致效果如下图： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale...
利用Vue.js制作简单购物车
weixin_45828554的博客
06-05 810
利用Vue.js制作简单购物车 效果如下： 参考源码：vue.rar 提取码：u6om
VUE实践：用vue实现简单的购物车
weixin_41350225的博客
04-03 949
先上效果图 购物车的页面，有点丑，大家将就看 勾选商品和修改商品的数量会显示相应的价格 全选和取消全选 删除商品 对商品的排序 对商品价格的过滤 好了，该上源码了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v...
用Vue.js实现一个简易的购物车
枫叶在飘呀的博客
05-06 3821
基于Vue.js实现一个简易的购物车 一、该案例主要实现功能功能 1.可以对商品进行更改数量，加减按钮。 （初始定义的数量为1，加操作正常进行，减操作当数量小于0时，减操作按钮不得使用）。 2.可以对每一项商品进行删除操作，当商品删除完后，会有一个显示购物车为空的提示字 下面就来展示一下代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>书籍购物车</tit
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值