一、记录我踩到的坑
（1）、未绑定数据:(踩坑次数：2)
（2）、如何实现页面的跳转
例如：我点击水果
-
首先绑定
2.声明函数，传参数
3.对象的解构赋值
二、课程的重点部分
第二课
（1）、左侧导航栏切换
- 采用到
class和style的绑定问题 - 点击进行切换，就是绑定事件
@click=""绑定原生事件，做一个识别和请求，对后台的数据做请求，做请求就是传id,请求二级分类。把一级分类id传到二级分类，根据id进行相应的请求。（点击一级获取二级）
相对应的需要在JS中把方法getSublist()定义出来
我们在浏览器中看下id是否传过来了
我们可以看到点击4个选择分别传的id为：800、810、817、811
把数组的下标传进来，进行切换用v-show="topIndex ===0"
（2）、左侧导航栏焦点状态的处理，其实就是一个类加载的问题
我们在这就已经写死了状态为active，我们需要把这里删除，重新绑定
（3）、商品价格的处理，用过滤器
html代码：
<div class="price">￥{{list.price | numFilter}}</div>
js代码：
filters:{
numFilter(price){
return price.toFixed(2)
}
}
注意：必须是Number类型数据才能使用toFixed() 方法，但是vue中获取的数据通常为String格式，所以这里用Number处理一下数据。
第三课
（1）、现在处于分类页面，下面图标激活状态不对应
（2）、拓展知识
（2.1）单Vue文件
- 对于单Vue文件，关于
data的配置必须是一个方法，在方法内部返回一个对象 - 你一个单Vue文件可能会在页面上，可能在多处使用同一个单Vue文件,这种情况下，那么多个地方的单Vue文件会共享同一处数据，为了保证每一个组件的数据源的唯一性，就这么处理
（2.2）引入qs模块
加载进来
接下去的内容看开头页面如何跳转
（3）、如何实现toTOP的小功能，当滑动页面一定距离出现，点击回滚到顶部
- 绑定最外面的容器标签，绑定的时间是
@touchmove="move"
- 声明函数作用
这里不要写document.body.scrollTop - 绑定内容，用
v-show，添加事件@click="toTop"
- 回滚动画加载加载插件
yarn add velocity-animate
- 页面引入
import Velocity from 'velocity-animate'
-
如何使用
第四课 goods组件的引入
一、基本内容配置
-
新建好html，CSS文件,在JS文件中引入CSS
2.引进基本模版
- 增加挂载点
二、增加goods组件
处理入口问题，商品详情页从哪里过来的？
-
在主页面index.html，分类页面category.html,搜索页面search.html修改入口
- 绑定
href记得用绑定: - 讲首页的对应的id传进来，后面才能进行相对应的数据处理
"'XXX.html?id=' + list.id",这里是首页商品的id，也就是你点击商品对应的id，这个要传到商品详情的数据库
2.获取数据
-
拿到数据接口，第一步先去api.js写api
-
到goods.js创建实例
需要注意都是这里取到的
{id}不符合我们要的类型，如?id=077，前面多了个?,所以引用第三方插件qs使用对象的解构赋值
let {id} = qs.parse(location.search.substr(1))
- 拿到数据后，到相应的页面进行数据渲染
- 一开始details是个null值，做渲染时候，相应的值还没拿回来，这时候去读相应的属性值，可能会报错，我们可以做出一个条件限制
v-if="details"
-
数据渲染
-
数据是一个数组，用v-for渲染出来
- 具体的商品详情是html片段，想在某一个容器里面渲染html片段时候，用
v-html
-
商品详情与本店成交的切换
- 做tab的切换，就必须意识到有焦点状态，有焦点状态，我们都是采用下标做处理
- 通过数据的形式进行配值，我要把这个渲染到页面上，必须在相应的data里面初始化
-
绑定类名:class="{active:index === tabIndex}"，绑定事件@click="change(index)"
-
声明函数，并记得初始化tabIndex:0
-
页面的显示用v-show来控制
- 成交数据渲染
-
根据数据接口写api
-
声明函数，不是主动在生命周期里面获取，是通过tab栏的切换去触发的，如果你永远不去看这个成交历史我就永远不给你触发，所以这个渲染是通过changeTab触发的
-
页面渲染
- 刷新时候有源码显示，用
[v-cloak]{display:none},不能通过JS进行加载
- 商品轮播的处理
轮播的数据不一致
-
引入swipe，这个已经封装好的Swipe.vue组件，
-
Swipe.vue组件，其中
a标签是点击跳转图片信息，在商品详情页不需要，后续对数据需要进行处理，
-
对图片数据进行处理，声明一个bannerLists为null，在定一个空数组，用forEach函数对后台数据进行处理，并把处理好的数据push到刚定义的this.bannerLists。
-
不管是PC端还是移动端，凡是有图片的地方，都要给定固定的宽高，例如Swipe组件中
不管你给图片固定宽高还是给图片的容器固定宽高，让图片去继承，主要是为了防抖
因为图片还没加载进来的时候，若没有固定宽高，就会有个从无到有的过程，可给组件的外容器固定高度即可
- 加入购物车及立即购买的弹窗
-
设计规范
定义状态初始值
skuType:1-
相应的绑定事件@click="chooseSku()"
-
声明函数，每次调用函数时候，首先要把值赋给this.skuType = type
-
状态判断
弹出阴影层，先给个初始值
showSku:false-
添加
v-show=“showSku”
出现弹窗滑动问题
- 解决办法：监听
showSku
点击红色框，遮罩层关闭
-
遮罩层
-
取消按钮
image.png
优化地方：动画过渡太生硬
- 用
<transition>把弹窗包裹起来，再写CSS
image.png
- 购买数量的制作，定义
skuNum:1初始值,在页面上进行值的绑定
- 黄框代表当值为1时候，减1按钮不显示
- 红框代表点击相应的按钮进行加减
-
声明函数，并对当值等于1时候，这时候点击减一，不执行函数
- 加入购物车的相关代码
-
两处需要绑定事件@click="addCart"
-
声明函数，进行post异步请求，必须传商品的id和商品的数量,并且弹出已经加入购物车的信息
-
另外对悬浮按钮进行设置
-
显示已经加入购物车的信息一点击加入购物车就变true，然后设置定时器0.8s后，值变为false，关闭提示信息
