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

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

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

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

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

一、编辑记账页面hello.vue

#TopTitle{
position:fixed;
top:0;
width:100%;
background-color:#eee;
z-index:1;
}
#TopTitlediv*{
border-style:none;
}
#BillTypes{
margin-top:88px;
position:relative;
height:auto;
background-color:#eee;
}
#BillTypes.item{
height:100px;
padding:11px15px;
vertical-align:top;
border-right:1pxsolid#fff;
border-bottom:1pxsolid#fff;
position:relative;
float:left;
width:33.33333%;
box-sizing:border-box;
}
#BillTypes.item.item_img{
clear:both;
padding-bottom:8px;
}

二、发布查看效果

因为用到了后台数据，所以要在asp.net端配合后台才能查看效果。
我调试时，直接在本地部署了一个网站，网站地址指向的就是项目的web文件夹。然后浏览器输入地址即可。为了方便，我将asp.net中homeControler进行了修改。

usingSystem.Web.Mvc;
usingAbp.Web.Mvc.Authorization;

namespaceMyBill.Web.Controllers
{
//[AbpMvcAuthorize]
publicclassHomeController:MyBillControllerBase
{
publicActionResultIndex()
{
Response.Redirect("/mybill/dist/index.html");
returnView();
}
}
}

这里写图片描述

三、总结

1、使用vue-resource来获取/传输数据，更多方法参看官网
2、created()不同vue2中新添的内容实现构建完成执行。更多参看下图。

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

app排行软件手机应用开发公司 app软件编辑

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