用Vue.js制作一个网页首页
时间: 2023-07-15 11:15:15 浏览: 74
好的,以下是一个简单的 Vue.js 网页首页示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js 网页首页</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<nav>
<ul>
<li v-for="navItem in navItems" :key="navItem.id"><a :href="navItem.link">{{ navItem.name }}</a></li>
</ul>
</nav>
<div class="jumbotron">
<h1>{{ jumbotronTitle }}</h1>
<p>{{ jumbotronText }}</p>
<button>{{ jumbotronButton }}</button>
</div>
<div class="container">
<h2>{{ sectionTitle }}</h2>
<p>{{ sectionText }}</p>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
navItems: [
{id: 1, name: 'Home', link: '#'},
{id: 2, name: 'About', link: '#about'},
{id: 3, name: 'Contact', link: '#contact'}
],
jumbotronTitle: 'Welcome to my website!',
jumbotronText: 'This is a sample website built using Vue.js',
jumbotronButton: 'Learn more',
sectionTitle: 'About us',
sectionText: 'We are a company that specializes in building websites using Vue.js.'
}
});
</script>
</body>
</html>
```
这个示例使用了 Vue.js 的核心概念:数据绑定和循环渲染。在 `data` 对象中定义了页面中需要用到的数据,然后在 HTML 中使用插值语法 `{{ }}` 来显示这些数据。同时,使用了 `v-for` 指令来循环渲染导航栏中的项目。在 `new Vue()` 构造函数中传入了一个选项对象,其中包括了 `el`、`data` 等属性,用来描述 Vue 实例的行为。