Vue 购物车案例黑马学院

最新推荐文章于 2024-06-11 12:41:07 发布

原创

最新推荐文章于 2024-06-11 12:41:07 发布 · 3k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文详细介绍了如何使用Vue.js创建一个购物车应用，包括项目初始化、组件划分、数据获取、商品展示、选中状态控制、数量增减、全选功能、总数量与总价计算等关键步骤，提供完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目初始化：

需求1：从0新建项目

需求2：分拆组件，创建组件文件

分析：

①：vue命令创建项目(在根目录下运行)

vue create shopcar-deom

②：下载需要得配置：

yarn add less less-loader bootstrap

③：main.js - 引入bootst 样式

// 直接引入 bootstrap 的css文件样式
import 'bootstrap/dist/css/bootstrap.css'

补充：下载时候可能会因为网络出问题

//查看当前源
yarn config get registry
//设置淘宝源或内网源
yarn config set registry https://registry.npm.taobao.org --global
//恢复源
yarn config set registry https://registry.yarnpkg.com --global

准备代码：

MyHeader:

<template>
  <div class="my-header">购物车案例</div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.my-header {
     
     
  height: 45px;
  line-height: 45px;
  text-align: center;
  background-color: #1d7bff;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}
</style>

MyGoods:

<template>
  <div class="my-goods-item">
    <div class="left">
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="input">
        <label class="custom-control-label" for="input">
          <img src="http://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="">
        </label>
      </div>
    </div>
    <div class="right">
      <div class="top">商品名字</div>
      <div class="bottom">
        <span class="price">¥ 100</span>
        <span>
          <MyCount></MyCount>
        </span>
      </div>

    </div