Vue.js之购物系统总结

学习笔记 何锋
文章标签: Vue.js

先看效果图:

图像.bmp

该综合练习整合前期学习到的知识,包括:监听、渲染、数据变化的检测与跟踪、事件处理、表单输入绑定及类、样式绑定。

现总结一下遇到的各种问题:

//商品列表信息
list:[
{books:'.JavaScript DOM编程艺术',oldPrice:39.00,disPrice:29.30,num:1},
{books:'.深入浅出MySQL数据库开发、优...',oldPrice:34.80,disPrice:20.60,num:1},
{books:'.解禁(当当网独家首发)',oldPrice:28.00,disPrice:19.40,num:1},
{books:'.大玩家(马未都、王刚推荐!央...',oldPrice:39.00,disPrice:29.30,num:1},			
{books:'.地王之王(金融危机下房地产行...',oldPrice:32.80,disPrice:25.10,num:1},
{books:'.都市风水师--官场风水小说:一...',oldPrice:39.80,disPrice:30.50,num:1},
{books:'.逃庄',oldPrice:36.00,disPrice:27.70,num:1},
{books:'.国戏(以麻将术解读宦海沉浮...',oldPrice:39.00,disPrice:29.30,num:1},
//{books:'.Java编程艺术',oldPrice:'¥50.00',disPrice:'¥24.30'},
//{books:'.C#编程艺术',oldPrice:'¥49.00',disPrice:'¥23.30'},
//购物车清单
shop:[
{books:'.私募(首部披露资本博弈秘密的金融...',jifen:189,oldPrice:32.00,disPrice:18.90,num:1},
{books:'.小团圆(张爱玲最神秘小说遗稿)',jifen:173,oldPrice:28.00,disPrice:17.30,num:1},
{books:'.不抱怨的世界(畅销全球80国的世界...',jifen:154,oldPrice:24.80,disPrice:15.40,num:1},
{books:'.福玛特双桶洗衣机XPB20-07S',jifen:358,oldPrice:458.00,disPrice:358.00,num:1},
{books:'.PHP和MySQL Web开发(原书第4版)',jifen:712,oldPrice:95.00,disPrice:71.20,num:1},
{books:'.法布尔昆虫记(再买¥68.30即可参加“满199元减10元现金活动”)',jifen:10,oldPrice:198.00,disPrice:130.70,num:1},
				],				],

1、开始写数组对象的时候,因为效果图表格上只有书名、市场价、当当价,所以数组对象里开始也只写了这三条,等到后面数据加载的时候又需要单独写一个积分和数量的数组对象,然后到后面写购买方法的时候就发现不好获取添加积分和数量。于是又重新修改购物车数组对象,把该加上的数据都加上。

image.png

2、因为数组对象中写的价格数字类型是有两位小数的,但到了实际加载时就把整数后面的.00忽略掉,成了一位小数或者是整数,所以需要用toFixed()方法。


image.png

3、购买方法开始写的时候也有Bug,点击一次成功添加没问题,但是同一商品点击多次后就会在购物车中出现重复列表,然后想到需要进行判断该商品是否已经添加进来,如未添加就添加进来,已经添加的作次数累计。这里还有一个坑就是注定需要两个if判断,循环内用一个布尔变量判断接收,循环外再根据布尔值判断是添加新的行还是统计数量,统计数量可以在循环内判断操作,如果已存在,数量增加,并以break立即结束循环。


image.png

4.原效果图没有加减两个小按钮,这是参考了同桌的效果之后加上去的,增加这两个小按钮其实很简单,但是为用户体验增加了很多,以后工作和实际开发中,应该多像他们这样在开发者的身份上再加一个体验者的身份,这样利于开发,因为最终目的就是给用户体验的。


image.png

5、这个不是一般的监听,因为它多加了一个属性deep,英文是深的意思。这是请教两位同桌后才知道的,称之为深度监听。然后自己上网查了一下何为深度监听。综合了很多大神的观点发现深度监听的特点在于能深入观察,监听器会一层一层往下遍历,综合对象的所有属性都会加上这个监听器,任何修改obj里的任何属性都会触发监听器里的handler。

以上便是此次综合练习遇到的问题,针对上次自学中的不足,此次我主动多请教,大大节省了很多时间。同时也发现自己的基础还是不牢固,需要多加练习加深印象。

还能输出{{restrictNumber}}个字符  
  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :