vue学习日记13：记账清单，渲染&添加&删除

已于 2024-03-20 14:25:53 修改
阅读量254 收藏 2
点赞数 4
分类专栏： vue入门学习 文章标签： 学习 vue.js 前端 vue
于 2024-03-20 11:31:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yinfanfff/article/details/136864808
版权

一.需求说明

二、实践

1.基本渲染

 

（1）代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- CSS only -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    />
    <style>
      .red {
        color: red!important;
      }
      .search {
        width: 300px;
        margin: 20px 0;
      }
      .my-form {
        display: flex;
        margin: 20px 0;
      }
      .my-form input {
        flex: 1;
        margin-right: 20px;
      }
      .table > :not(:first-child) {
        border-top: none;
      }
      .contain {
        display: flex;
        padding: 10px;
      }
      .list-box {
        flex: 1;
        padding: 0 30px;
      }
      .list-box  a {
        text-decoration: none;
      }
      .echarts-box {
        width: 600px;
        height: 400px;
        padding: 30px;
        margin: 0 auto;
        border: 1px solid #ccc;
      }
      tfoot {
        font-weight: bold;
      }
      @media screen and (max-width: 1000px) {
        .contain {
          flex-wrap: wrap;
        }
        .list-box {
          width: 100%;
        }
        .echarts-box {
          margin-top: 30px;
        }
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="contain">
        <!-- 左侧列表 -->
        <div class="list-box">

          <!-- 添加资产 -->
          <form class="my-form">
            <input type="text" class="form-control" placeholder="消费名称" />
            <input type="text" class="form-control" placeholder="消费价格" />
            <button type="button" class="btn btn-primary">添加账单</button>
          </form>

          <table class="table table-hover">
            <thead>
              <tr>
                <th>编号</th>
                <th>消费名称</th>
                <th>消费价格</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in list" :key="item.id">
                <td>{{ index + 1 }}</td>
                <td>{{ item.name }}</td>
                <td :class="{ red: item.price > 500}">{{ item.price.toFixed(2) }}</td>
                <td><a href="javascript:;">删除</a></td>
              </tr>

            </tbody>
            <tfoot>
              <tr>
                <td colspan="4">消费总计： {{ totalPrice.toFixed(2) }}</td>
              </tr>
            </tfoot>
          </table>
        </div>
        
        <!-- 右侧图表 -->
        <div class="echarts-box" id="main"></div>
      </div>
    </div>
    <script src="../echarts.min.js"></script>
    <script src="../vue.js"></script>
    <script src="../axios.js"></script>
    <script>
      /**
       * 接口文档地址：
       * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
       * 
       * 功能需求：
       * 1. 基本渲染
       *    (1)立刻发送求情获取数据 created
       *    (2)拿到数据，存到data的响应式数据中
       *    (3)结合数据，进行渲染 v-for
       *    (4)消费统计 => 计算属性
       * 2. 添加功能
       * 3. 删除功能
       * 4. 饼图渲染
       */
      const app = new Vue({
        el: '#app',
        data: {
          list: []
        },
        computed:{
          totalPrice(){
            return this.list.reduce((sum,item) => sum + item.price,0)
          }
        },
        async created(){
          const res = await axios.get('https://applet-base-api-t.itheima.net/bill',{
            params:{
              creator: '尹凡'
            }
          })
          console.log(res)
          this.list = res.data.data
        },
      })
    </script>
  </body>
</html>

（2）展示

 

2.添加功能

（1）代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- CSS only -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    />
    <style>
      .red {
        color: red!important;
      }
      .search {
        width: 300px;
        margin: 20px 0;
      }
      .my-form {
        display: flex;
        margin: 20px 0;
      }
      .my-form input {
        flex: 1;
        margin-right: 20px;
      }
      .table > :not(:first-child) {
        border-top: none;
      }
      .contain {
        display: flex;
        padding: 10px;
      }
      .list-box {
        flex: 1;
        padding: 0 30px;
      }
      .list-box  a {
        text-decoration: none;
      }
      .echarts-box {
        width: 600px;
        height: 400px;
        padding: 30px;
        margin: 0 auto;
        border: 1px solid #ccc;
      }
      tfoot {
        font-weight: bold;
      }
      @media screen and (max-width: 1000px) {
        .contain {
          flex-wrap: wrap;
        }
        .list-box {
          width: 100%;
        }
        .echarts-box {
          margin-top: 30px;
        }
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="contain">
        <!-- 左侧列表 -->
        <div class="list-box">

          <!-- 添加资产 -->
          <form class="my-form">
            <input v-model.trim=" name " type="text" class="form-control" placeholder="消费名称" />
            <input v-model.number=" price " type="text" class="form-control" placeholder="消费价格" />
            <button @click="add" type="button" class="btn btn-primary">添加账单</button>
          </form>

          <table class="table table-hover">
            <thead>
              <tr>
                <th>编号</th>
                <th>消费名称</th>
                <th>消费价格</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in list" :key="item.id">
                <td>{{ index + 1 }}</td>
                <td>{{ item.name }}</td>
                <td :class="{ red: item.price > 500}">{{ item.price.toFixed(2) }}</td>
                <td><a href="javascript:;">删除</a></td>
              </tr>

            </tbody>
            <tfoot>
              <tr>
                <td colspan="4">消费总计： {{ totalPrice.toFixed(2) }}</td>
              </tr>
            </tfoot>
          </table>
        </div>
        
        <!-- 右侧图表 -->
        <div class="echarts-box" id="main"></div>
      </div>
    </div>
    <script src="../echarts.min.js"></script>
    <script src="../vue.js"></script>
    <script src="../axios.js"></script>
    <script>
      /**
       * 接口文档地址：
       * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
       * 
       * 功能需求：
       * 1. 基本渲染
       *    (1)立刻发送求情获取数据 created
       *    (2)拿到数据，存到data的响应式数据中
       *    (3)结合数据，进行渲染 v-for
       *    (4)消费统计 => 计算属性
       * 2. 添加功能
       *    (1)收集表单数据 v-model
       *    (2)给添加按钮注册点击事件，发送添加请求
       *    (3)需不需要重新渲染？？  --->需要重新渲染  发请求后后端数据会改变
       * 3. 删除功能
       * 4. 饼图渲染
       */
      const app = new Vue({
        el: '#app',
        data: {
          list: [],
          name: '',
          price:'',
        },
        computed:{
          totalPrice(){
            return this.list.reduce((sum,item) => sum + item.price,0)
          }
        },
        created(){
          //多次调用渲染封装成函数
          // const res = await axios.get('https://applet-base-api-t.itheima.net/bill',{
          //   params:{
          //     creator: '尹凡'
          //   }
          // })
          // console.log(res)
          // this.list = res.data.data

          this.getList()
        },
        methods:{
          async getList(){
            const res = await axios.get('https://applet-base-api-t.itheima.net/bill',{
              params:{
                creator: '尹凡'
              }
            })
            console.log(res)
            this.list = res.data.data
          },
          async add(){
            if (!this,name){
              alert('请输入消费名称')
              return
            }
            if (typeof this.price !== 'number'){
              alert('请输入正确的消费价格')
              return
            }

            // 发送添加请求
            const res = await axios.post('https://applet-base-api-t.itheima.net/bill',{
              creator:'尹凡',
              name: this.name,
              price: this.price,
            })
            console.log(res)
            // 重新渲染一次
            this.getList()
            
            this.name=''
            this.price=''
          }
        }
      })
    </script>
  </body>
</html>

（2）展示

 

3.删除功能

（1）代码

写的时候忘记放了 可以去饼图渲染的代码看 已经包含了

（2）展示

4.饼图渲染

（1）代码--也是该练习的完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- CSS only -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    />
    <style>
      .red {
        color: red!important;
      }
      .search {
        width: 300px;
        margin: 20px 0;
      }
      .my-form {
        display: flex;
        margin: 20px 0;
      }
      .my-form input {
        flex: 1;
        margin-right: 20px;
      }
      .table > :not(:first-child) {
        border-top: none;
      }
      .contain {
        display: flex;
        padding: 10px;
      }
      .list-box {
        flex: 1;
        padding: 0 30px;
      }
      .list-box  a {
        text-decoration: none;
      }
      .echarts-box {
        width: 600px;
        height: 400px;
        padding: 30px;
        margin: 0 auto;
        border: 1px solid #ccc;
      }
      tfoot {
        font-weight: bold;
      }
      @media screen and (max-width: 1000px) {
        .contain {
          flex-wrap: wrap;
        }
        .list-box {
          width: 100%;
        }
        .echarts-box {
          margin-top: 30px;
        }
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="contain">
        <!-- 左侧列表 -->
        <div class="list-box">

          <!-- 添加资产 -->
          <form class="my-form">
            <input v-model.trim=" name " type="text" class="form-control" placeholder="消费名称" />
            <input v-model.number=" price " type="text" class="form-control" placeholder="消费价格" />
            <button @click="add" type="button" class="btn btn-primary">添加账单</button>
          </form>

          <table class="table table-hover">
            <thead>
              <tr>
                <th>编号</th>
                <th>消费名称</th>
                <th>消费价格</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in list" :key="item.id">
                <td>{{ index + 1 }}</td>
                <td>{{ item.name }}</td>
                <td :class="{ red: item.price > 500}">{{ item.price.toFixed(2) }}</td>
                <td><a @click="del(item.id)" href="javascript:;">删除</a></td>
              </tr>

            </tbody>
            <tfoot>
              <tr>
                <td colspan="4">消费总计： {{ totalPrice.toFixed(2) }}</td>
              </tr>
            </tfoot>
          </table>
        </div>
        
        <!-- 右侧图表 -->
        <div class="echarts-box" id="main"></div>
      </div>
    </div>
    <script src="../echarts.min.js"></script>
    <script src="../vue.js"></script>
    <script src="../axios.js"></script>
    <script>
      /**
       * 接口文档地址：
       * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
       * 
       * 功能需求：
       * 1. 基本渲染
       *    (1)立刻发送求情获取数据 created
       *    (2)拿到数据，存到data的响应式数据中
       *    (3)结合数据，进行渲染 v-for
       *    (4)消费统计 => 计算属性
       * 2. 添加功能
       *    (1)收集表单数据 v-model
       *    (2)给添加按钮注册点击事件，发送添加请求
       *    (3)需不需要重新渲染？？  --->需要重新渲染  发请求后后端数据会改变
       * 3. 删除功能
       *    (1) 注册点击事件，传参数 id
       *    (2) 根据id 返送删除请求
       *    (3) 重新渲染
       * 4. 饼图渲染
       *    (1)初始化一个饼图  echarts.init(dom) -->  mounted钩子实现
       *    (2)根据数据实时更新  echarts.setOption({ ... })
       *
       */
      const app = new Vue({
        el: '#app',
        data: {
          list: [],
          name: '',
          price:'',
        },
        computed:{
          totalPrice(){
            return this.list.reduce((sum,item) => sum + item.price,0)
          }
        },
        created(){
          //多次调用渲染封装成函数
          // const res = await axios.get('https://applet-base-api-t.itheima.net/bill',{
          //   params:{
          //     creator: '尹凡'
          //   }
          // })
          // console.log(res)
          // this.list = res.data.data

          this.getList()
        },
        //操作dom
        mounted() {
          this.myChart = echarts.init(document.querySelector('#main'))
          this.myChart.setOption({
            title: {
              //大标题
              text: '消费账单列表',
              subtext: '子标题',
              left: 'center'
            },
            //提示框
            tooltip: {
              trigger: 'item'
            },
            //图例
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            //数据项
            series: [
              {
                name: '消费账单',
                type: 'pie',
                radius: '50%', //圆的半径
                data: [
                  // { value: 1048, name: 'Search Engine' },
                  // { value: 735, name: 'Direct' },
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          })

        },
        methods:{
          async getList(){
            const res = await axios.get('https://applet-base-api-t.itheima.net/bill',{
              params:{
                creator: '尹凡'
              }
            })
            console.log(res)
            this.list = res.data.data
            console.log(this.list)

            //更新图表
            this.myChart.setOption({
              //数据项 层级结构不能自己改最好复制  不变的内容可以直接删了 只保留需要更改的
              series: [
                {

                  // data: [
                  //   { value: 1048, name: 'Search Engine' },
                  //   { value: 735, name: 'Direct' },
                  // ],

                  //{ value: item.price, name: item.name } 用（）扩起来 当作一个对象
                  data: this.list.map(item => ({ value: item.price, name: item.name }))
                }
              ]
            })
          },
          async add(){
            if (!this,name){
              alert('请输入消费名称')
              return
            }
            if (typeof this.price !== 'number'){
              alert('请输入正确的消费价格')
              return
            }

            // 发送添加请求
            const res = await axios.post('https://applet-base-api-t.itheima.net/bill',{
              creator:'尹凡',
              name: this.name,
              price: this.price,
            })
            console.log(res)
            // 重新渲染一次
            this.getList()

            this.name=''
            this.price=''
          },
          async del (id){
            //根据id 发送删除请求 id不希望写死 用反引号``  而不是''
            const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`,)

            console.log(res)
            //重新渲染
            this.getList()
          }
        }
      })
    </script>
  </body>
</html>

（2）展示

 

 三、案例总结

-----------------------------------------------------------------------------------------------------------------------------

注：本人是根据黑马程序员的B站教程来学习的，
链接：https://www.bilibili.com/video/BV1HV4y1a7n4/?spm_id_from=333.999.0.0

本文章仅仅是个人学习笔记 无任何其他用途 特此说明 

yinfanfff
关注
专栏目录
[Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘getAttribute‘ of null“
郭宝的博客
06-24 11万+
错误场景一： 错误提示： 在运行Vue项目时出现了上述错误，出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的，代码如下： // 基于准备好的dom，初始化echarts实例 var bar_dv = document.getElementById('bar_dv'); let myChart = this.$echarts.init(bar_dv) 解...
vue仿支付宝年度账单_支付宝 2020 年度账单正式上线
weixin_42364780的博客
01-05 1304
今天凌晨，支付宝正式上线了2020年度账单，以配乐动画的形式展现你2020年在支付宝上的收入支出汇总。支付宝年度账单在「我的」页面，或者在支付宝里搜索「年度账单」，点击顶部横幅广告，即可进入年度账单页面。然后点击动画页面中「点击翻开」，验证身份后，进入账单数据页面，左右滑动，可以分月浏览每个月的消费汇总。浏览到12月后，点击「查看2020年支付宝总收支」，就可以查看支付宝全年的收支情况。...
【Vue】案例-小黑记账清单
qq_39921135的博客
06-05 458
文章目录一、分析二、echars用法 一、分析 需求图示 需求分析 基本渲染 添加功能 删除功能 饼图渲染 思路分析 1.基本渲染 立刻发送请求获取数据 created 拿到数据，存到data的响应式数据中 结合数据，进行渲染 v-for 消费统计 —> 计算属性 2.添加功能 收集表单数据 v-model，使用指令修饰符处理数据 给添加按钮注册点击事件，对输入的内容做非空判断，发送请求 请求成功后，对文本框内容进行清空 重新渲染列表 3.删除功能 注册点击事件，获取
vue 记账清单_vue 的账单样式
最新发布
2401_84435192的博客
07-12 317
alert(‘请输入正确的消费价格’)alert(‘请输入消费名称’)
Vue 记账凭证模块组件
卿本无忧的博客
05-25 5348
基于vue+element的记账凭证页面效果： 支持的快捷操作有： 页面代码如下： <template> <div class="charge-container" id="chargeContainer"> <div class="charge"> <!--<h1 class="charge-title">记账凭证</h1>--> <div class="charge-head
vue制作记账清单
qq_60536024的博客
08-09 552
使用vue制作记账清单
Asp.net+Vue2构建简单记账WebApp之五（vue.js构建记账页面）
易兒善
09-13 4352
一、编辑记账页面hello.vue<template> <div> <div id="TopTitle"> <mt-header v-bind:title="msg"> </mt-header> <mt-field label="￥" placeholder="在此输入记账金额" type="number" v-model="money"></mt-f
vue学习总结：响应式系统&vue实例
(づ｡◕‿‿◕｡)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭
03-14 5342
响应式系统vue是一个帮助用户构建界面的前端框架，它的核心是一个响应式的数据绑定系统，通过数据来驱动页面显示的更新，而不是像jquery那样通过操作DOM来改变页面的显示。vue通过ViewModal来实现数据和DOM的双向数据绑定。这是如何实现的呢？ 当我们把一个普通的js对象传给Vue实例的data选项后，Vue将遍历这个对象所有的属性，并使用Object.defineProperty 把这些
Vue实战篇六：表格渲染动态数据
我的博客
10-30 5160
系列文章目录 Vue基础篇一：编写第一个Vue程序 Vue基础篇二：Vue组件的核心概念 Vue基础篇三：Vue的计算属性与侦听器 Vue基础篇四：Vue的生命周期（秒杀案例实战） Vue基础篇五：Vue的指令 Vue基础篇六：Vue使用JSX进行动态渲染 Vue提高篇一：使用Vuex进行状态管理 Vue提高篇二：使用vue-router实现静态路由 Vue提高篇三：使用vue-router实现动态路由 Vue提高篇四：使用Element UI组件库 Vue提高篇五：使用Jest进行单元测试 Vue提高篇六
daily-cost:Vue 3.0 + Vant 3.0 + Vue-Router 4.0 高仿微信记账本 H5 项目
05-05
本项目为高仿微信记账本 H5 项目（微信记账本是小程序），项目页面不多，但是涵盖了很多数据操作知识。 技术栈 相关库名称 在线地址 :link: Vue 3.x Vue-Router 4.x Vant 3.x Echart 5.x dayjs axios lib-flexible ...
[Vue Router warn]: No match found for location with path “xxxxx“
热门推荐
weixin_39962208的博客
09-21 1万+
控制台警告[Vue Router warn]: No match found for location with path "xxxxx"的处理办法
vue+vuex+localstorage记账小程序应用.zip
05-23
基于vue写的pc的前端记账应用，有记账+账单+分析+查询功能应用，用于期末设计作业
会计凭证控件
11-30
可以在c++builder6 delphi6等开发工具上使用的会计凭证开发控件 可以做出完全仿真的会计凭证
vue实现的一个本地记账工具源码.zip
05-15
vue实现的一个本地记账工具源码 vue实现的一个本地记账工具源码 vue实现的一个本地记账工具源码 vue实现的一个本地记账工具源码 vue实现的一个本地记账工具源码 vue实现的一个本地记账工具源码 vue实现的一个本地记账工具源码 vue实现的一个本地记账工具源码 vue实现的一个本地记账工具源码 vue实现的一个本地记账工具源码 vue实现的一个本地记账工具源码 vue实现的一个本地记账工具源码 vue实现的一个本地记账工具源码 vue实现的一个本地记账工具源码 vue实现的一个本地记账工具源码 vue实现的一个本地记账工具源码 vue实现的一个本地记账工具源码 vue实现的一个本地记账工具源码
记账凭证
gooooooooal的专栏
07-07 1992
记账凭证 银行 IT
前端学习笔记202311学习笔记第一百叁拾天-小黑记账清单-饼图渲染1
qq_41632427的博客
01-15 348
前段
点击特定区域 input框不触发失去焦点事件
qq_40095973的博客
09-03 1万+
//给特定区域添加ID 绑定onmousedown 事件 document.getElementById('customModelItemMatch').onmousedown=function(e){ //现代浏览器阻止默认事件 if ( e &amp;&amp; e.preventDefault ) e.p...
vue 记账本
人生代码 ---- 公众号
07-20 1768
两个目的「第一个目的」：这一个移动端记账本的创作来源呢，其实是我在学习了理财的课程之后，突然想为自己写一个记账的东西来记录自己每天花费的钱，从而可以降低那些不必要的开销，从而达到理财的第...
2023年Vue面试深度解析：Vue vs React & Axios实战
Vue.js和React是两种流行的JavaScript库，用于构建用户界面。Vue的特点在于它的数据双向绑定机制，这使得数据和视图的同步变得更加简单。而React则采用单向数据流，更强调组件化和虚拟DOM，适合构建大型应用程序，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值