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构建记账统计页面）
源码下载

一、编辑记账页面hello.vue

二、发布查看效果

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

using System.Web.Mvc;
using Abp.Web.Mvc.Authorization;

namespace MyBill.Web.Controllers
{
   // [AbpMvcAuthorize]
    public class HomeController : MyBillControllerBase
    {
        public ActionResult Index()
        {
            Response.Redirect("/mybill/dist/index.html");
            return View();
        }
    }
}

这里写图片描述

三、总结

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

这里写图片描述