实训事件综合运用

购物车

掌握事件绑定和使用的基本过程

掌握常用的事件和事件修饰符的基本使用

掌握计算属性的基本使用

熟悉生命周期函数的不同阶段和使用

进一步熟悉组件的基本作用和使用

进一步熟悉响应式数据的基本使用

视图端

.根据请求的数据渲染页面

.数据变化时，更新页面

逻辑端

.使用普通事件处理业务

.商品数量的增加/减少；直至删除

.商品的全选/部分选择

.商品结算

静态结构

.基本结构，无数据绑定、无事件事件

<div class="wrap">
<div class="item">
  <input type="checkbox">
  <div>商品</div>
  <div>单价</div>
  <div>库存</div>
  <div>操作</div>
</div>
<div class="item">
  <input type="checkbox">
  <div>name</div>
  <div>price</div>
  <div>stock</div>
  <div class="btns">
    <button class="btn">-</button>
    <div >1</div>
    <button class="btn">+</button>
  </div>
</div>
<div class="total">总价100</div>
</div>

加载数据

.在挂载生命周期函数中从资源服务器拉取并赋值；可以自己准备数据

const cartData = reactive({
  selectedAll: false,
  selectedLists: [],
  lists: [{
    "id": 77,
    "name": "红烧牛肉面",
    "price": 15,
    "number": 1,
    "stock": 6
  }]
})

单个商品的增加和减少

.分别为增、减按钮绑定事件：增加数量 inc(item) 和减少数量 dec(item)，并使用当前商品为形参，修改其数量 number

.注意越界检测

<button class="btn" @click="dec(item)">-</button>
<button class="btn" @click="inc(item)">+</button>

const inc = (item) => {
  if (item.number < item.stock) {
    item.number++
  }
}

const dec = (item) => {
  if (item.number > 1) {
    item.number--
  }
}

全选

.为全选按钮双向绑定选中数据 selectedAll，并增加改变 change 事件 selAll

.状态改变后，为真，则为全选，选中商品列表和商品列表一致；为假，则取消全选，选中商品列表为空

<input type="checkbox" v-model="cartData.selectedAll" @change="selAll"gt;

const selAll = () => {
  if (cartData.selectedAll) {
    cartData.selectedLists = cartData.lists
  } else {
    cartData.selectedLists = []
  }
}

单个商品选择与取消

.为单个商品对应的 checkbox 绑定每一项数据，并增加改变 change 事件 selItem，处理全选的真与假

.单个商品取消选择时，全选为假

.商品列表和选中商品列表数量相等，为全选；否则取消全选；额外判断条件，如果商品列表为空，则也应该取消全选

<input type="checkbox" :value="item" v-model="cartData.selectedLists" @change="selItem">

const selItem = () => {
  if (cartData.selectedLists.length == cartData.lists.length && cartData.lists.length) {
    cartData.selectedAll = true
  } else {
    cartData.selectedAll = false
  }
}

结算

.为总价绑定计算属性 getTotal

.遍历选中列表，依次将商品单价和商品数量相乘，并累加，得到总价

<div class="total">总价{{ getTotal }}</div>

const getTotal = computed(() => {
let sum = 0

//for - 传统循环
for(let i=0; i <cartData.selectedLists.length; i++){
  sum += cartData.selectedLists[i].number * cartData.selectedLists[i].price
}

return sum
})

更多效果

.其它设计自行完成

调整产品列表页项目，增加添加到购物车的功能

使用数组 Array - 迭代函数优化结算逻辑

现场验收、课后提交实验报告

在开发环境中获取数据并渲染

事件综合运用

Event