vue选项式写法项目案例(购物车)

一、初始化项目结构

1.初始化vite项目

npm create vite
cd vite-project
npm install

2.清理项目结构

清空App.vue

删除components目录下的HelloWorld.vue组件

3.为组件的样式启用sacc或less组件

npm i sass

4.初始化index.css全局样式

:root{font-size:12px
}

二、封装es-header组件

1.允许用户自定义title标题内容

2.允许用户自定义color文字颜色

3.允许用户自定义bgcolor背景颜色

4.允许用户自定义fsize字体大小

5.组件必须固定到页面顶部位置，高度45px,文字居中，z-index为999

<template><div class="head-container" :style="{backgroundColor:bgcolor,color:color,fontSize:fsize+'px'}">{{ title }}</div>
</template>
<script>
import bus from '../../ulits/eventBus'
export default {props:{title:{type:String,default:'es-header'},bgcolor:{type:String,default:'#007bff'},color:{type:String,default:'#fff'},fsize:{type:Number,default:'12'},}
}
</script>
<style scoped lang="scss">
.head-container{position: fixed;top:0;left: 0;width: 100%;height: 45px;text-align: center;line-height: 45px;z-index:999;
}
</style>

三、基于axios请求商品列表数据

1.安装axios

npm i axios -S

2.在main.js入口文件中导入并配置axios

import axios from 'axios'
//配置请求的根路径
axios.defaults.baseURL='http://localhost:3000'
//将axios挂载为全局的$http自定义属性
app.config.globalProperties.$http=axios

// 从vue中按需导入createApp函数，用于创建vue的实例对象
import { createApp } from 'vue'
// 导入待渲染的App组件
import App from './App.vue'
import './style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from "./routers/index.js";
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import axios from 'axios'
// 创建vue的实例对象
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)}
axios.defaults.baseURL='http://localhost:3000'
app.config.globalProperties.$http=axios
app.use(ElementPlus)
app.use(router)
// 指定vue控制的Dom区域，把App组件的模板结构渲染到指定的el区域中
app.mount('#app')

3.请求商品列表数据

四、封装es-footer组件

1.组件必须固定到页面底部位置，高度50px,内容两端贴边对其，z-index为999

2.允许用户自定义amount总价格，渲染时保留两位小数

3.允许用户自定义totalt总数量，并渲染到结算按钮中，如果要结算的商品数量为0，则禁用结算按钮

4.允许用户自定义isfull全选按钮的选中状态

5.允许用户通过自定义事件的形式，监听全选按钮选中状态的变化，并获取到最新的选中状态

<template><div class="footer-container"><div><input type="checkbox" id="custom-control-label" :checked="isfull" @change="onCheckboxChange" /><label for="custom-control-label">全选</label></div><div><span>合计：</span><span class="amount">￥{{ amount.toFixed(2)}}</span></div><el-button class="btn-settle" :disabled="total===0">结算({{total}})</el-button></div>
</template>
<script>
export default {props:{amount:{type:Number,dafault:0},total:{type:Number,dafault:0},isfull:{type:Boolean,default: false}},emits:['fullChange'],methods:{onCheckboxChange(e){this.$emit('fullChange',e.target.checked)}}
}
</script><style scoped lang="scss">
.footer-container{width: 100%;height: 50px;border-top:1px solid #ededed;background-color: #fff;position: fixed;bottom:0;left:0;padding:0 10px;display: flex;justify-content: space-between;align-items: center;input{vertical-align: middle; }.amount{color:red;}.btn-settle{min-width: 100px;height: 38px;border-radius: 19px;}
}
</style>

五、封装es-goods组件

1.实现edgoods组件的基本布局

2.封装组建的6的自定义属性id，thumb,title,price,count,checked

3.封装组件的自定义事件stateChange，允许外界 监听组件选中状态的变化

<template><div class="goods-container"><div class="left"><input type="checkbox" :id="id" :checked="checked" @change="onCheckboxChange" /><label :for="id"><img :src="thumb" alt=""></label></div><div class="right"><div class="top">{{ title }}</div><div class="bottom"><div class="price">￥{{ price.toFixed(2) }}</div><EsCounter :count="count" :min="1" @numberChange="numberChange"></EsCounter></div></div></div>
</template>
<script>
import EsCounter from './esCounter.vue'
export default {components:{EsCounter},props:{id:{type:String,default:'',require:true},thumb:{type:String,default:'',require:true},title:{type:String,default:'',require:true},price:{type:Number,default:0,require:true},count:{type:Number,default:0,require:true},checked:{type:Boolean,default:false,require:true}},emits:['stateChange','countChange'],methods:{onCheckboxChange(e){this.$emit('stateChange',e.target.id,e.target.checked)},numberChange(num){this.$emit('countChange',this.id,num)}}
}
</script><style scoped lang="scss">
.goods-container{width: 100%;padding:10px;display: flex;border:1px solid #ededed;.left{width: 110px;height: 100px;display: flex;justify-content: space-between;align-items: center;img{width: 100px;height: 100px;}input{vertical-align: middle; }}.right{padding: 10px;flex:1;display: flex;flex-direction: column;justify-content: space-around;.bottom{display: flex;justify-content: space-between;align-items: center;.price{color:red;}}}
}
</style>

六、实现合计、结算数量、全选功能

<template><div class="son"><EsHeader title="案例"></EsHeader>  <EsGoods v-for="goods in goodsList" :key="goods.id" :id="goods.id" :thumb="goods.thumb" :title="goods.title" :price="goods.price" :count="goods.count" :checked="goods.state" @stateChange="stateChange" @countChange='countChange'></EsGoods><EsFooter :isfull="isfull" :amount="amount" :total="total" @fullChange="fullChange"></EsFooter></div>
</template>
<script>
import EsHeader from './EsHeader.vue'
import EsFooter from './esFooter.vue'
import EsGoods from './EsGoods.vue'
export default {components:{EsHeader,EsGoods,EsFooter},data(){return{goodsList:[],amount:0,total:0}},methods:{async getGoodsList(){const {data:res}= await this.$http.get('/goodsList')this.goodsList = res},fullChange(flag){this.goodsList.forEach(item=>item.state =flag)},stateChange(id,checked){const findRes = this.goodsList.find((item)=>{return item.id==id;})if(findRes){findRes.state =checked;}this.isfull = this.goodsList.every(item=>item.state);},countChange(id,count){const findRes = this.goodsList.find((item)=>{return item.id==id;})if(findRes){findRes.count =count;}}},created(){this.getGoodsList()},computed:{total(){let a=0;this.goodsList.filter(item=>item.state).forEach(item=>a+=item.count)return a},amount(){let sum=0;this.goodsList.filter(item=>item.state).forEach(item=>sum+=item.count*item.price)return sum},}
}
</script><style scoped lang="scss">
.son{padding: 45px 0 50px 0;
}
</style>

七、封装es-counter组件能

1.渲染组件的基础布局

2.实现数量值得加减操作

3.处理min值

4.使用watc处理文本框输入的结果

5.封装numChange自定义事件

<template><div class="counter-contain"><button class="btn" :disabled="num===1" @click="onSubClick"> -</button><input type="number" class="counter-input" v-model.number.lazy="num" ><button class="btn"  @click="onAddClick">+</button></div>
</template>
<script>
export default {props:{count:{type:Number,default:0,require:true},min:{type:Number,default:0,require:NaN}},emits:['numberChange'],data(){return{num: this.count}},methods:{onSubClick(){if(isNaN(this.min)&& this.num-1<this.min)return;this.num--},onAddClick(){this.num++},},watch:{num:{handler(newVal,oldVal){const parseRes = parseInt(newVal);//不是数字或者小于1，强制等于1if(isNaN(parseRes) ||parseRes<1){this.num=1return}// //如果新值是小数，把转换的结果赋给numif(String(parseRes).includes('.')==-1){this.num=parseResreturn}this.$emit('numberChange',this.num)}}}
}
</script>
<style scoped lang="scss">
.counter-contain{.btn{width: 34px;
}
.counter-input{width: 36px;
}   
}</style>