vue3基础-实战1: 添加账本数据

准备工作

经过前面的课文学习，我们已经掌握了一些vue3的基础知识，接下来让我们试着完成一个简单的账本App。
因为样式部分比较简单，所以将直接从逻辑代码部分开始讲解。
课文中会提供静态资源以及布局代码，也可以直接从课堂作业(付费)中下载项目压缩包(逻辑部分未实现)。

1. 创建项目

2. 下载静态资源

3. 将下载的静态资源放到创建的项目src目录下

4. 将App.vue的代码替换

5. 在components目录下创建addBillPopup.vue，并复制代码进去

目录结构如下，只有src目录下的文件有改动

项目介绍

🎞️项目介绍视频

任务目标👀

1. 点击切换tab状态(支出/收入)，并且根据当前选中的tab，渲染 出/src/utils/billingData.js下的标签，以及点击标签进行选中。
2. 日期输入框默认值为"今天"。
3. 点击右上角的"x"时关闭新增账单popup。
4. 完成记一笔功能：在选择完类型、标签、日期、输入好金额后点击"记一笔"按钮时，将数据存到缓存(localStorage)中，"记一笔"之后关闭新增账单popup。

以上就是本节课中需要达成的目标，动手能力强的同学也可以尝试自己实现，实现方式可以不同，能达成目标就行。

视频

🎞️学习视频：实战1

静态样式文件

App.vue

<script setup>
import billList from "/src/components/billList.vue";

</script>

<template>
  <!-- 顶部区域 -->
  <div class="header-box">
    <div class="header">
      <!-- bar -->
      <div class="header-top-bar">
        <!-- 左占位 -->
        <div></div>

        <!-- 当前日期 -->
        <div class="date">08-01</div>

        <!-- 添加账单入口 -->
        <div class="add-ledger">
          <img src="/src/assets/svg/add.svg" alt="" width="55" height="55" />
        </div>
      </div>

      <div class="statistical-container">
        <div>
          <div>月结余</div>
          <div class="balance">1</div>
        </div>

        <div>
          <span>月支出：0</span>
          <span>月收入：1</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 预算卡片 -->
  <div class="progress-card">