Asp.net+Vue2構建簡單記賬WebApp之四（vue.js構建記賬主頁面）
小編:管理員 74閱讀 2022.08.19
一、安裝我們所需要的一些庫
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 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都可以寫在一個頁面里。不同頁面分開寫。
相關推薦
- Vue3（二）工程化開發方式做項目 工程化的開發方式這是開發中、大型項目的必備技能，網上資料也很多，這里只是一個簡單的綜合性的介紹。包括vue的全家桶、建立項目的幾種方式、UI庫的簡單使用等?？梢院蜕弦黄腸nd方式做項目做一下對比。node.js，npm、cnpm、yarnnode.js執行 npm run serve ，…
- Hibernate Criterion 在查詢方法設計上能夠靈活的依據Criteria的特點來方便地進行查詢條件的組裝.Hibernate設計了CriteriaSpecification作為Criteria的父接口,以下提供了Criteria和DetachedCriteria.Criteria和DetachedCriteria的主要差別在于創建的形式不一樣,Criteria是在線的,所…
粵公網安備 44010402000066號