vue的header怎么用
时间: 2024-05-10 20:18:02 浏览: 6
在 Vue 中,通常可以通过组件来构建页面的各个部分,包括头部(header)。
以下是一个简单的例子,演示如何使用 Vue 构建一个包含头部的页面:
1. 创建一个 Header.vue 组件
```html
<template>
<header>
<h1>{{ title }}</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</template>
<script>
export default {
name: 'Header',
props: {
title: {
type: String,
required: true
}
}
}
</script>
<style scoped>
header {
background-color: #333;
color: #fff;
}
h1 {
margin: 0;
padding: 1rem;
}
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
nav li {
margin: 0;
padding: 0;
}
nav a {
color: #fff;
padding: 1rem;
text-decoration: none;
}
nav a:hover {
background-color: #666;
}
</style>
```
2. 在需要使用头部的页面中引入 Header.vue 组件并传递标题
```html
<template>
<div>
<Header :title="'My Website'"/>
<main>
<!-- 页面主体内容 -->
</main>
</div>
</template>
<script>
import Header from '@/components/Header.vue'
export default {
name: 'MyPage',
components: {
Header
}
}
</script>
<style>
/* 页面样式 */
</style>
```
在这个例子中,我们创建了一个名为 Header 的组件,并包含一个标题和导航菜单。然后,在需要使用头部的页面中引入 Header 组件并传递标题。这样就可以在页面中显示一个具有标题和导航菜单的头部了。