Vue+Bootstrap实现购物车程序（3）
效果展示：（说明：使用webpack重构购物车程序，使用vue-cli生成项目脚手架）
文件结构：
代码：
（1）将原来编写的btn-grp组件单独编写到BtnGrp.vue文件中
-
可以看到现在代码清晰了很多，template标签部分编写模板，script标签部分编写组件的交互代码，编写方式和原先写在HTML的代码一致
-
现在整个前端应用都是基于组件化的，代码变得更加清晰了
<!--vue组件-->
<template>
<div style="float:right;">
<input class="form-control"
v-model="searchProduct"
@keyup.enter="filterProduct"
type="text"
placeholder="请输入商品名称"/>
</div>
</template>
<script type="application/javascript">
// import App from '../App';
export default{
name:"BtnGroup",
props:['products'],
data:function(){
return {
searchProduct:''
}
},
methods:{
/* 商品筛选 */
filterProduct:function(){
// console.log(this.$parent.products)
var searchArr = [];
for(let i=0;i<this.$parent.products.length;i++){
searchArr.push(this.$parent.products[i].name)
}
var searchIndex = searchArr.indexOf(this.searchProduct);
if(searchIndex !== -1){
this.$parent.products = this.$parent.products.filter(function(element, index, self){
/* element数组元素、index元素索引、self数组本身 */
return index == searchIndex;
})
}else{
alert('暂无符合商品');
}
}
}
}
// module.exports = BtnGroup;
// export default BtnGroup;
// export default {
// props: ['buttons']
// }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--翻译：添加“scoped”属性以仅将CSS限制为此组件-->
<style type="text/css" scoped>
</style>
（2）将原来写在HTML中的代码重构到App.vue中
-
此处因为需要用到BtnGrp组件，所以需要先import 组件，然后在components中引用该组件
<!--主页组件--> <template> <div id="app" class="container"> <h1>购物车</h1> <hr> <!--<BtnGroup v-bind:buttons="buttons"></BtnGroup>--> <div style="overflow: hidden"> <div style="float: left"> <button type="button" v-on:click="addHandler" class="btn btn-primary">添加</button> <button type="button" v-on:click="changeHandler" class="btn btn-default">修改</button> <button type="button" v-on:click="delateHandler" class="btn btn-default">删除</button> </div> <BtnGroup :products="products"></BtnGroup> </div> <br> <br> <table class="table table-bordered table-striped table-hover"> <tr> <td><input type="checkbox" v-on:click="selectAll" name="selectAllBtn" v-model="selectAllState"/></td> <th>ID</th> <th>商品名称</th> <th>商品价格</th> <th>商品数量</th> <th>商品总价</th> </tr> <tr v-for="(product,index) in products"> <td> <input type="checkbox" v-on:click="checkItem(product)" v-model="product.state" name="checkbox" /> </td> <td>{{index+1}}</td> <td>{{product.name}}</td> <td>{{product.price}}</td> <td> <!--可以将两个按钮的方法合成一个，通过传参--> <!--<button @click="changeCount(prod, -1)">-</button>--> <button @click="cutCount(product)" class="btn btn-default btn-sm">-</button> <input type="number" v-model="product.count"/> <!--<button @click="changeCount(prod, 1)">-</button>--> <button @click="addCount(product)" class="btn btn-default btn-sm">+</button> </td> <td>{{product.price * product.count}}</td> </tr> <tr> <!--text-right排版文本右对齐--> <td colspan="5" class="text-right">总价:</td> <!--text-primary辅助类文本--> <td class="text-primary">{{totalMoney}}</td> </tr> </table> </div> </template> <script> /* eslint-disable no-new */ import 'bootstrap/dist/css/bootstrap.min.css' import BtnGroup from './components/BtnGroup' export default{ name: 'App', components: {BtnGroup}, data:function(){ return{ products: [ { name: '小米6S', price: 3999, count: 1, state:false }, { name: '锤子2', price: 4999, count: 1, state:false }, { name: '华为P20', price: 3599, count: 1, state:false }, { name: 'OPPO R15', price: 2999, count: 1, state:false }, { name: 'OPPO R11', price: 1999, count: 1, state:false }, ], selectAllState:false /* 注意：这里修正下，页面里的死数据，操作类的直接写好即可，不用遍历数据获取。 只有页面中的展示信息即动态设置 */ /* buttons:[ {title:'添加',class:'btn-primary',handler:function(){alert('点击添加按钮')}}, {title:'修改',class:'btn-default',handler:function(){alert('点击修改按钮')}}, {title:'删除',class:'btn-default',handler:function(){ for(let i =0;i<app.data().products.length;i++){ // console.log(app.data().products[i].state) if(app.data().products[i].state){ app.data().products.splice(i,1); i--; } }; 全选按钮状态清空 document.querySelectorAll('input[name="selectAllBtn"]')[0].checked = false; }} ] */ } }, methods:{ // 用户点击加减数量时调用 cutCount:function(product){ if(product.count>0){ product.count-- }else{ alert('商品数量不能小于0') } }, addCount:function(product){ product.count++ }, checkItem:function(product){ product.state = !product.state; }, selectAll:function() { var checkObj = document.querySelectorAll('input[name="checkbox"]'); // 获取所有checkbox项 if (event.target.checked) { // 点击全选事件 for (var i = 0; i < checkObj.length; i++) { checkObj[i].checked = true;//选中样式 this.products[i].state = true;//动态改变值，供删除用 } } else { for (var i = 0; i < checkObj.length; i++) { checkObj[i].checked = false; this.products[i].state = false; } } }, /*添加 */ addHandler:function(){ alert("点击添加按钮") }, /* 修改 */ changeHandler:function(){ alert("点击修改按钮") }, /* 删除 */ delateHandler:function(){ for(let i=0;i<this.products.length;i++){ if(this.products[i].state){ this.products.splice(i,1); i--; } } /* 注意：vue里尽量避免DOM操作。所有的操作都是数据驱动 */ this.selectAllState = false;//还原全选按钮状态 } }, computed:{ totalMoney:function(){ var price = 0; for(var i = 0; i < this.products.length; ++i) { price += parseFloat(this.products[i].price * this.products[i].count); } return price; } } } // module.exports = App; // export default app; </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
