WEBAPP开发之Asp.net+Vue2构建简单记账WebApp之六（vue.js构建记账统计页面）-职坐标

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

白羽 2018-07-19 来源：网络阅读 1306 评论 0

摘要：本文将带你了解WEBAPP开发之Asp.net+Vue2构建简单记账WebApp之六（vue.js构建记账统计页面），希望本文对大家学WebApp有所帮助。

源码下载

一、添加两个新页面

/components/MonthCount.vue

#Chart{
height:300px;
width:100%;
}
ul{
list-style:none;
padding-left:0;
}
ulli{
text-align:left;
margin-bottom:5px;
}
.bottom{
position:fixed;
height:1px;
width:100%;
bottom:65px;
}

components/YearCount.vue

.chart{
width:100%;
height:300px;
}

二、添加新页面的路由

这里用到了路由的嵌套

importVuefrom'vue'
importRouterfrom'vue-router'
importHellofrom'@/components/Hello'//记账页面
importCountfrom"@/components/Count"//统计页面
importMonthCountfrom"@/components/MonthCount"
importYearCountfrom"@/components/YearCount"
Vue.use(Router)

exportdefaultnewRouter({
routes:[
{path:'/',component:Hello},
{path:'/Count',component:Count,children:[
{path:'',component:MonthCount},
{path:'year',component:YearCount}
]}
]
})

三、编写统计页面

Count.vue

#Count.Count_Top{
padding:16px;
color:#26a2ff;
}
#Count.Count_Toplabel{
font-size:12px;
}
#Count.Count_Top.Money{
font-size:30px;
}
#Count{
margin-top:0;
position:relative;
height:auto;
background-color:#eee;}
.mint-tab-item{
padding:12px;
}

四、发布查看

这里写图片描述

五、总结

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

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！

移动端web开发 webapp教程 webappui框架

本文由 @白羽发布于职坐标。未经许可，禁止转载。