Asp.net+Vue2构建简单记账WebApp之四（vue.js构建记账主页面）

来源：互联网发布：淘宝大学好不好编辑：程序博客网时间：2024/05/17 03:36

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

一、安装我们所需要的一些库

cnpm install mint-ui -S // 安装mint-ui库，ui库，cnmp是按照淘宝镜像后的用法，用法和npm一样。-s是将库添加到项目的package.json文件中。
cnpm install echarts -S // 安装echarts库。用于绘制图表
cnpm install vue-resource -S // 相当于ajax取数据用的

这里写图片描述

package.json 文件中可以看见我们当前项目中安装的控件

这里写图片描述

二、全局引入模块

在main.js 中引入

import Vue from 'vue'import App from './App'import router from './router'import VueResouse from 'vue-resource' // 引入vue-resourceimport MintUI from 'mint-ui'     // 引入mint-uiimport 'mint-ui/lib/style.css'  // 引入mint-ui的样式Vue.use(MintUI);Vue.use(VueResouse);Vue.config.productionTip = false/* eslint-disable no-new */new Vue({  el: '#app',  router,  template: '<App/>',  components: { App }})

三、开始构建页面框架

1、将components（组件）文件夹下面的hello.vue 清空作为记账页面，并添加Count.vue作为统计页面如下：

<template> <h1>记账页面</h1></template>

<template>  <h1>统计页面</h1></template>

2、修改路由文件( router文件夹下面的index.js),加入我们刚才添加页面的路由。

import Vue from 'vue'import Router from 'vue-router'import Hello from '@/components/Hello' // 记账页面import Count from "@/components/Count" // 统计页面Vue.use(Router)export default new Router({  routes: [    {path: '/',component: Hello},    {path: '/Count', component: Count}  ]})

3、修改App.vue

<template>  <div id="app">    <router-view class="Content"></router-view>    <mt-tabbar :fixed="true">      <router-link to="/" v-bind:class="ClassMenuHello" v-on:click.native="select(0)" > <i class="fa fa-edit"></i> 记账 </router-link>      <router-link to="/Count"  v-bind:class="ClassMenuCount" v-on:click.native="select(1)"> <i class="fa fa-bar-chart"></i> 统计 </router-link>    </mt-tabbar>  </div></template><script>  export default {     name: 'app',    data(){      return{        selected:-1,      }    },    computed:{ // 使用计算属性给菜单动态添加样式      ClassMenuHello(){        return{          'mint-tab-item':true,          'is-selected':this.selected==0,        }      },      ClassMenuCount(){        return{          'mint-tab-item':true,          'is-selected':this.selected==1,        }      }    },    methods:{      select(m){ // 给组件绑定事件时需要使用.native 例如绑定点击事件使用 v-on:click.native="f"        this.selected=m;      },    }  }</script><style scoped>  #app {    font-family: 'Avenir', Helvetica, Arial, sans-serif;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;    text-align: center;    color: #2c3e50;  }  #app .mint-tab-item{    font-size: 20px;    padding: 15px;  }  #app .Content{    padding-bottom: 56px;  }</style>

4、设置页面禁止缩放，用于手机页面。引入我们的图标库。将index.html文件修改如下：

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport" /> <!-- 禁止缩放，用于手机页面-->  <title>易兒善-记账</title>  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <!-- 图标的样式--></head><body><div id="app"></div><!-- built files will be auto injected --></body></html><style>  body,html {    margin: 0;    padding: 0;  }</style>

四、查看效果

这里写图片描述

五、总结

1、使用 vue-router 中的 router-view 和 router-link 标签实现页面间切换
2、使用computed 计算属性动态绑定样式，实现选中样式。
3、给组件标签绑定事件时需要使用.native 例如绑定点击事件使用 v-on:click.native=”f”
4、关于vue-router 和 mint-ui的更多用法参见官网
5、这样编写将页面模块化，而且一个页面相关的js，style ，html都可以写在一个页面里。不同页面分开写。

阅读全文

0 0