Vue重构有赞商城

一、记录我踩到的坑

（1）、未绑定数据:(踩坑次数：2)

（2）、如何实现页面的跳转

例如：我点击水果

1. 首先绑定

   
   
   
   
   

   2.声明函数，传参数

   
   
   
   
   3.对象的解构赋值
   
   

二、课程的重点部分

第二课

（1）、左侧导航栏切换

• 采用到class和style的绑定问题
• 点击进行切换，就是绑定事件@click=""绑定原生事件，做一个识别和请求，对后台的数据做请求，做请求就是传id,请求二级分类。把一级分类id传到二级分类，根据id进行相应的请求。（点击一级获取二级）
  
  
  
  相对应的需要在JS中把方法getSublist()定义出来
  
  
  
  我们在浏览器中看下id是否传过来了
  
  
  
  我们可以看到点击4个选择分别传的id为：800、810、817、811

---

把数组的下标传进来，进行切换用v-show="topIndex ===0"

实现切换功能.gif

（2）、左侧导航栏焦点状态的处理，其实就是一个类加载的问题

我们在这就已经写死了状态为active，我们需要把这里删除，重新绑定

（3）、商品价格的处理，用过滤器

html代码：

        
￥{{list.price | numFilter}}

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组件的引入

一、基本内容配置

1. 新建好html，CSS文件,在JS文件中引入CSS

   
   
   

2.引进基本模版

3. 增加挂载点

二、增加goods组件

处理入口问题，商品详情页从哪里过来的？

1. 在主页面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))

3. 拿到数据后，到相应的页面进行数据渲染

• 一开始details是个null值，做渲染时候，相应的值还没拿回来，这时候去读相应的属性值，可能会报错，我们可以做出一个条件限制v-if="details"

4. 数据渲染

   
   
   

• 数据是一个数组，用v-for渲染出来

  
  
  
  
  
  

5. 具体的商品详情是html片段，想在某一个容器里面渲染html片段时候，用v-html
   
   

6. 商品详情与本店成交的切换

   
   
   

• 做tab的切换，就必须意识到有焦点状态，有焦点状态，我们都是采用下标做处理
• 通过数据的形式进行配值，我要把这个渲染到页面上，必须在相应的data里面初始化
  
  

• 绑定类名:class="{active:index === tabIndex}"，绑定事件@click="change(index)"

  
  
  

• 声明函数，并记得初始化tabIndex:0

  
  
  

• 页面的显示用v-show来控制

  
  
  

7. 成交数据渲染

• 根据数据接口写api

  
  
  

• 声明函数，不是主动在生命周期里面获取，是通过tab栏的切换去触发的，如果你永远不去看这个成交历史我就永远不给你触发，所以这个渲染是通过changeTab触发的

  
  
  

• 页面渲染

  
  
  

8. 刷新时候有源码显示，用[v-cloak]{display:none},不能通过JS进行加载
   
   

---

9. 商品轮播的处理

轮播的数据不一致

• 引入swipe，这个已经封装好的Swipe.vue组件，

  
  
  

• Swipe.vue组件，其中a标签是点击跳转图片信息，在商品详情页不需要，后续对数据需要进行处理，
  

  

• 对图片数据进行处理，声明一个bannerLists为null，在定一个空数组，用forEach函数对后台数据进行处理，并把处理好的数据push到刚定义的this.bannerLists。

  
  
  
  
  
  
  
  
  

• 不管是PC端还是移动端，凡是有图片的地方，都要给定固定的宽高，例如Swipe组件中

  
  
  

• 不管你给图片固定宽高还是给图片的容器固定宽高，让图片去继承，主要是为了防抖

• 因为图片还没加载进来的时候，若没有固定宽高，就会有个从无到有的过程，可给组件的外容器固定高度即可

---

10. 加入购物车及立即购买的弹窗

• 设计规范

  
  
  

• 定义状态初始值skuType:1

• 相应的绑定事件@click="chooseSku()"

  
  
  
  
  
  

• 声明函数，每次调用函数时候，首先要把值赋给this.skuType = type

  
  
  

• 状态判断

  
  
  

• 弹出阴影层，先给个初始值showSku:false

• 添加v-show=“showSku”
  

  

出现弹窗滑动问题

• 解决办法：监听showSku

点击红色框，遮罩层关闭

• 遮罩层

  
  
  

• 取消按钮

  
  
  

  image.png

优化地方：动画过渡太生硬

• 用把弹窗包裹起来，再写CSS
  
  

  image.png

• 购买数量的制作，定义skuNum:1初始值,在页面上进行值的绑定

• 黄框代表当值为1时候，减1按钮不显示
• 红框代表点击相应的按钮进行加减

• 声明函数，并对当值等于1时候，这时候点击减一，不执行函数

  
  
  

---

10. 加入购物车的相关代码

• 两处需要绑定事件@click="addCart"

  
  
  

• 声明函数，进行post异步请求，必须传商品的id和商品的数量,并且弹出已经加入购物车的信息
  

  

• 另外对悬浮按钮进行设置

  
  
  

• 显示已经加入购物车的信息一点击加入购物车就变true，然后设置定时器0.8s后，值变为false，关闭提示信息