Vue-购物车案例

1.案例效果

2.实现步骤

①初始化项目基本结构

②封装EsHeader组件

2.1创建并注册EsHeader组件

2.2封装es-header组件

③基于axios请求商品列表数据（GET请求，地址为https://www.escook.cn/api/cart）

 

④封装EsFooter组件

4.1创建并注册EsFooter组件

 

4.2封装es-footer组件

4.2.0封装需求

4.2.1渲染组件的基础布局

 

 4.2.2封装自定义属性 amount

4.2.3封装自定义属性 total

4.2.4封装自定义属性 isfull

4.2.5封装自定义事件 fullChange

⑤封装EsGoods组件

5.1创建并注册EsGoods组件

 

5.2封装es-goods组件

5.2.0封装需求

5.2.1渲染组件的基础布局

 

5.2.2封装自定义属性 id

 

5.2.3封装其他属性

5.2.4封装自定义事件 stateChange

⑥封装EsCounter组件 

6.1动态统计已勾选商品的总价格

 

6.2动态统计已勾选商品的总数量

6.3实现全选功能

⑦封装es-counter组件

 

 

 

main.js

import { createApp } from 'vue'
import App from './App.vue'
import './assets/bootstrap-3.4.1-dist/css/bootstrap.css'
import './index.css'
//导入axios
import axios from 'axios'
const app = createApp(App);
//配置请求的根路径
axios.defaults.baseURL = 'https://applet-base-api-t.itheima.net';
//将axios挂栽为全局的$http自定义属性
app.config.globalProperties.$http = axios
app.mount('#app')

App.vue 

 EsHeader.vue

 EsFooter.vue

 EsGoods.vue

 EsCounter.vue