专栏首页挖坑填坑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-resource
import MintUI from 'mint-ui'     // 引入mint-ui
import '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 条评论
登录 后参与评论

相关文章

  • 使用mpvue小程序开发问题之路由与多页面问题

    易兒善
  • 关于库存预警功能的思考

    需要分析的数据量很大,但是实际上分析出的结果却很少,分析数十万个库存数据,可能输出的就不到十条,甚至没有。

    易兒善
  • airtest小试牛刀-听雪江湖

    爱奇艺的广告也不少,翻视频的时候翻到一个游戏。无聊就试着玩玩。airtest就不多介绍了。说的是通过图像识别技术来实现自动化脚本的,编写脚本也基本不需要基础。下...

    易兒善
  • 这些有趣的Python库一定会亮到你

    1480
  • 玩这么久 Python ,这些好玩又实用的库一定不能错过!

    图片处理 pip install pillow from PIL import Image import numpy as np a = np.array...

    小小科
  • ormlite介绍一

    概述 ORMlite是类似hibernate的对象映射框架,主要面向java语言,同时,是时下最流行的android面向数据库的的编程工具。 官方网站:http...

    xiangzhihong
  • ABAP的Package interface, 安卓的manifest.xml和Kubernetes的Capabilities

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.blog....

    Jerry Wang
  • Android RTMP推流之MediaCodec硬编码二(RTMPDump推流)

    在前面的两篇文章中:Android RTMP推流之MediaCodec硬编码一(H.264进行flv封装)介绍了如何MediaCodec进行H264硬编码,然后...

    用户2929716
  • Linux中的alias命令

    开始写内容之前,简单聊下这个周末吧,这个周末没怎么学习,周六去了趟玉渊潭公园,感觉就是人比樱花多,简直挤爆了。这引发我思考了一个问题:北京的很多...

    AsiaYe
  • Django 2.1.7 查询数据返回json格式

    在日常工作中,对于前端发送过来的请求,后端django大部分都是采用json格式返回,也有采用模板返回视图的方式。 在模板返回视图的方式的确很方便,但是如果涉...

    Devops海洋的渔夫

扫码关注云+社区

领取腾讯云代金券