前言
关于Vue.js的项目总结心得我就用一句话概括，Vue的基础操作很重要，向v-bind:的种种指令，
v-for的循环数据绑定，v-on:click事件处理等等，基础真的很重要!。
这俩天做了个关于购物车的小项目，里面的功能，动态数据加载，都是用Vue来实现的,下面我会把我做项目分享上来。
（1）动态数据加载
实例图：
JS实例代码如下：
data: {
leftarr: [ //推荐左边商品数据动态加载
{
name: "JavaScript DOM编程艺术",
original: 39.00,
current: 29.30,
purchase: "购买"
},
{
name: "解禁（当当网独家首发）",
original: 28.00,
current: 19.40,
purchase: "购买"
},
{
name: "地王之王（金融危机下房地产行...",
original: 32.80,
current: 25.10,
purchase: "购买"
},
{
name: "逃庄",
original: 36.00,
current: 27.70,
purchase: "购买"
},
],
rightarr: [ //推荐左边商品数据动态加载
{
name: "深入浅出MySQL数据库开发、优...",
original: 39.00,
current: 29.30,
purchase: "购买"
},
{
name: "大玩家（马未都、王刚推荐!央...",
original: 28.00,
current: 19.40,
purchase: "购买"
},
{
name: "都市风水师--官场风水小说：一...",
original: 32.80,
current: 25.10,
purchase: "购买"
},
{
name: "国戏（以麻将术语解读宦海沉浮...",
original: 36.00,
current: 27.70,
purchase: "购买"
},
],
HTML代码：
<ul id="productuls1" v-for="(iten,index) in leftarr">
<li class="productuls1_list_1">
<a href="#">{{iten.name}}</a>
</li>
<li class="productuls1_list_2">￥{{iten.original.toFixed(2)}}</li>
<li class="productuls1_list_3">￥{{iten.current}}</li>
<li class="productuls1_list_4">
<a href="#" @click="addARRbotton(iten)">{{iten.purchase}}</a>
</li>
</ul>
v-for="(iten,index) in leftarr：循环数组里的对象
{{iten.name}}：对象点出属性名获取值（商品名）
{{iten.original.toFixed(2)}}：对象点出属性保留小数点后两位数字
{{iten.current}}：对象点出属性名获取值
{{iten.purchase}}：对象点出属性名获取值
（2）点击购买添加到购物车计算价格：
添加前：
添加后：
HTML代码：
<tr class="shopping_product_list" id="shoppingProduct_01" v-for="(iten,index) in newarr">
<td class="shopping_product_list_1">
<a href="#" class="blue">{{iten.name}}</a>
</td>
<td class="shopping_product_list_2">{{iten.integral}}</td>
<td class="shopping_product_list_3">￥<span>{{iten.original}}</span></td>
<td class="shopping_product_list_4">￥<span>{{iten.current}}</span> ({{iten.zhe.toFixed(0)}}折)</td>
<td class="shopping_product_list_5"><input class="int" type="text" v-model.number="iten.num" @blur="intjudge(iten)"></td>
<td class="shopping_product_list_6">
<a href="#" @click="removegoods(index)">删除</a>
</td>
</tr>
JS代码：
methods: { //事件
addARRbotton(iten) { //购买事件
iten = Object.assign({}, iten, {
num: 1,
integral: iten.current * 10,
zhe: iten.current / iten.original
}) //将一个新属性合并到数组里
let bool = true;
for(var i of this.newarr) {
if(i.name == iten.name) {
i.num++;
bool = false;
}
}
if(bool) {
this.newarr.push(iten); //添加到最末尾一行
}
},
removegoods(index) { //按下标删除
this.newarr.splice(index, 1);
},
intjudge(inte){//输入框失焦事件
var int =/^[1-9][0-9]*$/;
if (!int.test(inte.num)) {
alert("输入错误，请输入0-9的数字！")
inte.num=1;
}
}
},
computed: { //计算属性
totalPricefun: function() { //总金额监视器
var totalPrice = 0; //申明一个总金额
for(var i of this.newarr) { //循环新数组里的数据
totalPrice += i.current * i.num; //总金额=当当价*数量
}
return totalPrice; //返回计算后的总金额
},
totalScorefun: function() { //总积分监视器
var totalscore = 0; //申明一个总积分
for(var i of this.newarr) { //循环新数组里的数据
totalscore += i.integral * i.num; //总积分=当当价*数量
}
return totalscore; //返回计算后的总积分
},
totalDisPricefun: function() { //节省总金额监视器
var discount = 0; //申明一个节省总金额
for(var i of this.newarr) { //循环新数组里的数据
discount += i.original * i.num - i.current * i.num; ////节省总金额+等于单品价格*数量-当当价*数量
}
return discount; //返回计算后的节省总金额
},
},
（3）对象节点点击隐藏/显示
点击隐藏前：
点击隐藏后：
HTML代码：
<div class="head_middle_right"><img @click="switchbox = !switchbox" :src="foldbox" /></div>
<div class="head_main" v-bind:class="{head_mainclose:switchbox}">
<div class="head_main_left">
<ul id="productuls1" v-for="(iten,index) in leftarr">
<li class="productuls1_list_1">
<a href="#">{{iten.name}}</a>
</li>
<li class="productuls1_list_2">￥{{iten.original.toFixed(2)}}</li>
<li class="productuls1_list_3">￥{{iten.current}}</li>
<li class="productuls1_list_4">
<a href="#" @click="addARRbotton(iten)">{{iten.purchase}}</a>
</li>
</ul>
</div>
JS代码：
data: {
switchbox: false,
},
foldbox() {//监视事件
if(this.switchbox == false) {//判断条件为对象赋值
return "img/shopping_arrow_up.gif";//返回一个路径
} else {
return "img/shopping_arrow_down.gif";//返回一个路径
}
}
v-bind:class="{head_mainclose:switchbox}：switchbox是个布尔对象当它是true是将执行head_mainclose样式（隐藏）；
@click="switchbox = !switchbox" :src="foldbox"：点击时触发事件，返回一个路径。
——来自胡小哥Vue.js分享文章（持续更新中...）