Vue是一套用于构建用户界面的渐进式框架，只关注视图层。
其最为强大的特点就是响应的数据绑定和组件化，极大的减少了工作量。
使用MVVM开发模式，实现了视图与数据的分离。
轻量级的框架对计算机工作更加友好。
其作者尤雨溪在开发时保留了angular的优点，极大的解放了DOM操作。
提供中文文档，不存在语言障碍，十分易于学习。
相较于其他框架而言，优势更加明显。
（以下代码为个人练习时记录）
新建文件夹css+js+img以放置需要用到的文件
采用bootstrap布局
文末附css代码
（图片自行配制）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="box">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">首页</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#" style="color: red;">全部商品</a></li>
<li><a href="#">优惠</a></li>
<li><a href="#">库存紧张</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<p style="padding-left: 30px; margin-top: -10px;"><input type="checkbox" v-model="checkAll" @click="check"/>彭好大的店<img src="img/03.jpg" alt="" /></p>
<table class="table table-striped table-bordered" id="table">
<thead>
<tr>
<th><input type="checkbox" v-model="checkAll" @click="check"/>全选</th>
<th>商品信息</th>
<th>颜色尺码</th>
<th>单价(元)</th>
<th>数量</th>
<th>小计(元)</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list">
<td><input type="checkbox" v-model="checkFir" :value="item.id" @click="checkOne"/></td>
<td style="text-align: left;"><img :src="item.imgs">{{item.name}}</td>
<td>尺码:{{item.cm}}
<br />
颜色:{{item.color}}
</td>
<td><s>70</s><br />
{{item.price}}
<br />
<span style="color: red;">7折</span>
</td>
<td style="width: 80px;">
<div class="input-group">
<span class="input-group-addon" @click="down(index)">-</span>
<input type="text" class="form-control cou" :value="item.count" style="width: 50px;text-align: center;" disabled="disabled">
<span class="input-group-addon" @click="up(index)">+</span>
</div>
</td>
<td>{{item.count*item.price}}</td>
<td><button class="btn btn-danger btn-sm" @click="del(index)">删除</button></td>
</tr>
<tr>
<td colspan="3" id="use"><input type="checkbox" v-model="checkAll" @click="check"/><b>全选</b> 删除 清空失效商品 移入收藏夹</td>
<td colspan="3" id="user">共有<span style="color: red;">{{ad}}</span>件商品,总计￥<span style="color: red;">{{ap}}</span>元</td>
<td><button class="btn btn-default btn-sm">去付款</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
list:[
{"name":"2019夏季新款韩版时尚背后小心机露背蝴蝶结修身针织衫上衣女","color":"黑色","cm":"均码","price":20,"id":1,"imgs":"img/1.jpg","count":1},
{"name":"高腰短裤牛仔夏季女韩款阔腿裤显瘦a字短裤白色裤子","color":"蓝色","cm":"M","price":30,"id":2,"imgs":"img/2.jpg","count":2},
{"name":"春夏短裙新款高腰显瘦牛仔半裙a字裙夏天短裙包裙a型牛仔群半身女","color":"浅色","cm":"L","price":40,"id":3,"imgs":"img/3.jpg","count":3}
],
checkFir:[],
checkAll:false
},
methods:{
//减
down(index){
//判断条件
if(this.list[index].count>1){
this.list[index].count--
}
},
//加
up(index){
this.list[index].count++
},
//全选
check(){
//判断选中状态
if(this.checkAll){
//console.log(this.checkAll)
//如果未选中则列表为空
this.checkFir.length=0;
//添加选中状态的复选框
for(let i=0;i<this.list.length;i++){
this.checkFir.push(this.list[i].id)
//console.log(this.checkFir)
}
//反之为空
}else{
this.checkFir=[]
}
},
//反选
checkOne(){
//判断如果选中的复选框长度等于自定义json的长度的时候
if(this.checkFir.length==this.list.length){
this.checkAll=true
}else{
this.checkAll=false
}
},
//删除
del(index){
//bug清除
if(this.checkFir.indexOf(this.list[index].id)!=-1){
this.checkFir.splice(this.checkFir.indexOf(this.list[index].id),1)
}
this.list.splice(index,1)
this.checkOne()
}
},
//计算总数及总价格
computed:{
//总数
ad(){
let sum=0;
for(let i=0;i<this.list.length;i++){
if(this.checkFir.indexOf(this.list[i].id)!=-1){
sum+=this.list[i].count
}
}
return sum
},
//总价
ap(){
let sum=0;
for(let i=0;i<this.list.length;i++){
if(this.checkFir.indexOf(this.list[i].id)!=-1){
sum+=this.list[i].count*this.list[i].price
}
}
return sum;
}
}
})
/*
* 页面分步骤布局---vue绑定元素
* 渲染数据---自定义json格式数据并使用v-for渲染
* 加减实现---判断数量大小并进行加减
* 删除实现---根据ID删除当前数据
* 全选反选实现---使用v-model绑定表单元素判断状态
* 总数量与总价格实现---检测当前页面中是否有选中的ID并进行计算
*
* */
</script>
css代码如下
th,
td {
text-align: center;
}
td {
line-height: 96px;
}
#use {
text-align: left;
padding-left: 28px;
}