vue單文件組件實例2:簡單單文件組件
阿新 • • 發佈:2019-02-12
san spa classes back element tle 定義 comm sca
Introduce.vue:
<template>
<div class="intro">
單位介紹
</div>
</template>
<script>
</script>
<style scoped>
.intro{
font-size:20px;
color:#000;
margin:20px auto;
}
</style>
Employment.vue:
<template> <div class="employment"> 人才引進 </div> </template> <script> </script> <style scoped> .employment{ font-size:20px; color:#000; margin:20px auto; } </style>
Consult.vue:
<template>
<div class="consult">
咨詢
</div>
</template>
<script>
</script>
<style scoped>
.consult{
font-size:20px;
color:#000;
margin:20px auto;
}
</style>
Header.vue:
<template> <div class="header"> <div class="header-wrapper"> <ul class="nav"> <li><router-link to="/home">首頁</router-link></li> <li><router-link to="/introduce">單位介紹</router-link></li> <li><router-link to="/employment">人才引進</router-link></li> <li><router-link to="/consult">咨詢</router-link></li> </ul> </div> </div> </template> <style> .header{ height:60px; color:#fff; background: #42b983; } .header-wrapper{ height:60px; } .nav{ width:700px; height:60px; font-size:15px; } .nav li{ float:left; margin-right:60px; height:60px; line-height:60px; overflow:hidden; } .nav li:last-child{ margin-right:0; } .nav a{ display:inline-block; padding:0 13px; color:#fff; border-radius:15px; } .nav a.router-link-active{ background:#c10514; } </style>
Home.vue:
<template>
<div class="home">
首頁
</div>
</template>
<script>
</script>
<style scoped>
.home{
font-size:20px;
color:#000;
margin:20px auto;
}
</style>
App.vue:
<template>
<div id="vue">
<div class="nav-top">
<!-- 引入公用的頭部 header組件 -->
<v-header></v-header>
</div>
<div class="contianer">
<!-- 路由中的幾個組件在這裏被渲染,默認被渲染的為第一個組件,也就是home組件 -->
<router-view></router-view>
</div>
</div>
</template>
<style>
#vue {
font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
<script>
//引入header組件
import header from ‘./components/Header.vue‘
//輸出header組件
export default{
components: {
‘v-header‘: header
}
}
</script>
main.js:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue‘
import App from ‘./App‘
// 引入router路由
import Router from ‘vue-router‘
// 引入項目的四個模塊組件
import introduce from ‘./components/introduce‘
import home from ‘./components/home‘
import employment from ‘./components/employment‘
import consult from ‘./components/consult‘
// 使用router
Vue.use(Router)
// 定義路由
var routes = [{
path: ‘/home‘,
component: home
}, {
path: ‘/introduce‘,
component: introduce
}, {
path: ‘/employment‘,
component: employment
}, {
path: ‘/consult‘,
component: consult
}]
// 實例化路由
var vueRouter = new Router({
routes
})
// 創建和掛載根實例
new Vue({
el: ‘#app‘,
router: vueRouter,
template: ‘<App></App>‘,
components: { App }
})
vue單文件組件實例2:簡單單文件組件