目录
一、项目展示
一个简单的购物车项目，可以创建课程和对应的价格（图2），可以将需要的课程加入购物车，并增减数量，如果减为零，会有弹窗显示是否删除的窗口购物车执行流程图，最后会计算选择课程的数量和对应的金额（图3和图4），添加到购物车的数据会保存在本地，所以页面打开时数据仍然存在刷新（图1）
图1
图二
图三
图四
一开始我预估：会用到（算钱），（求复杂数据类型的值），双向数据绑定v-model（将新课程名称和价格从页面传到内存），和通信有了非亲子组件（在课程总结中传递课程名称和价格），我发现我很幼稚==。 后者基于： 1. 在课程概要中增加课程； 2.加入购物车 3.其他总结。 （不会有完整的源代码，只有代码块！）
2. 在课程摘要中添加课程 2.1 如何显示现有课程的名称和价格
我最初的想法很简单，不是吗：
-
课程名称：SpringCloud--价格：20
但是看了老师的写法（数组+v-for），简单又避免了重复代码和向无序列表添加大量数据的麻烦。
cript type="text/javascript">
var list=[
{courseName:'matlab',price:36},
{courseName:'Python',price:40}
]
cript>
- 'course in list'>
课程名：course.courseName--价格：course.price
2.2 双向绑定，将新课程名称+价格传给已有列表，通过按钮显示
使用 push 将新课程名称+价格添加到数组中。
一个优化操作：当输入的数据传过来的时候，需要清零，一行代码（这个我没讲，没想到这么简单）
this.courseName=''
this.price=''后续操作：需要判断每次输入是否不为空合法。 如果没有，可以使用弹窗提醒。
3. 加入购物车 3.1 记忆
使边框有线
3.2 购物车规则
因为这里需要商品的数量，所以需要判断：该商品是否已经存在于购物车中（通过索引区分），如果存在则对数量加1； 如果不是，则创建一个新行来存储变量。
其中，JS小萌新发现使用箭头函数和find（1行）比使用for + if（至少5行）判断课程名是否在新数组中要简单很多，找到的就是这个合格的通过找到第一个值
const result=this.list.find(v=>v.text==goods.text)注意：需要系统地理解箭头函数
3.3 如何将对象添加到现有数组
这里主要使用ES6的扩展功能
this.list.push({...goods,count:1,active:true})此时商品中有课程名称和价格。 我们通过扩展函数将它们作为参数依次传递，这样添加属性也很方便。
3.4 三段记忆
复选框的类型是！
带有指定消息的对话框 + 确认/取消
if(window.confirm(`确认是否要删除$(this.list[index].text)吗？`)){
//...
}4. 用法
//1.删除一个对象
splice(index,1)
//2.于数组index位置新增一个字符串
splice(index,0,'banana')4.其他 4.1 如何判断复选框是否被选中&计算选中的个数
在 HTML 中，使用 check 属性选中复选框
而这里，使用：true/false来判断复选框是否被选中，当然是利用数据的双向绑定，将选中状态传递给数组。
在计算选中数时，通过ES6函数判断每个对象的属性是否为真，最终得到选中数。
this.list.filter(v=>v.active).length4.2 总价计算方法
仍在进行中
let totalPrice=0
this.list.forEach(v=>{
totalPrice+= v.price * v.count
})
4.3 保存本地数据刷新后不会丢失
个人觉得这个应用的亮点在于购物车执行流程图，用户误关闭后重新打开，仍然可以从之前的地方重新开始。 使用是。 我当时出错的一点是，刷新网页后，我打开''，数据还在，但是页面没有对应的数据。 后来发现，本地页面刚出来，用来显示数据的()函数在我写的时候就放进去了。
这是 HTML5 的新特性。 它将我们购物车的内容直接存储到数据库中，相当于前端页面的数据库。
写法：
//JSON.stringify()将JS值转为JSON字符串
window.localStorage.setItem('key',JSON.stringify(this.list))数据在：
读取数据：
//判断非空，防止清空缓存后报错
if(window.localStorage.getItem('key') != null){
var json = window.localStorage.getItem('key')
//将JSON对象转为JS对象
var jsonObj = JSON.parse(json)
this.list = jsonObj
}
最后在watch中进行保存，watch观察，没有缓存，一旦发现监控数据发生变化（这里是购物车的list），就会回调相应的操作，因为text属性的值无法监控，因此需要深度监控
watch:{
list: {
handler(){
//
},
deep: true
}
}继续学习TAT，这个月起码Vue项目，现代JS教程，极网三大块和模板应该都熟悉了，然后海头