Asp.net+Vue2构建简单记账WebApp之六（vue.js构建记账统计页面）

Asp.net+Vue2构建简单记账WebApp之一（设计）
Asp.net+Vue2构建简单记账WebApp之二（使用ABP迅速搭建.Net后台）
Asp.net+Vue2构建简单记账WebApp之三（使用Vue-cli构建vue.js应用）
Asp.net+Vue2构建简单记账WebApp之四（vue.js构建记账主页面）
Asp.net+Vue2构建简单记账WebApp之五（vue.js构建记账页面）
Asp.net+Vue2构建简单记账WebApp之六（vue.js构建记账统计页面）
源码下载

一、添加两个新页面

/components/ MonthCount.vue

components/YearCount.vue

二、添加新页面的路由

这里用到了路由的嵌套

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello' // 记账页面
import Count from "@/components/Count" // 统计页面
import MonthCount from "@/components/MonthCount"
import YearCount from "@/components/YearCount"
Vue.use(Router)

export default new Router({
  routes: [
    {path: '/', component: Hello},
    {path: '/Count', component: Count,children:[
      {path: '', component: MonthCount},
      {path: 'year', component: YearCount}
    ]}
  ]
})

三、编写统计页面

Count.vue

四、发布查看

这里写图片描述

五、总结

1、没有用到vuex，菜单选择样式可以通过这个来解决现有问题，我觉得vuex主要是data数据管理，解决了组件之间数据传递的麻烦。
2、watch监测数据变化。
3、echarts 更多图表绘制参看官网
4、本想使用mint-ui的无限加载或者上拉加载，但是在这个页面里没弄成功，就自己写了个点击加载的。
5、vue.js 的是mvvm框架，页面绑定数据，我们一切操作只需要修改数据，页面自动改变。不需要直接操作页面元素。