帮我用vue.js写一个博客页面
时间: 2023-11-23 12:29:07 浏览: 48
好的,以下是一个简单的博客页面示例,使用了 Vue.js 和 Bootstrap:
index.html:
```
<!DOCTYPE html>
<html>
<head>
<title>My Blog</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">My Blog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#" v-on:click.prevent="showPage('home')">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" v-on:click.prevent="showPage('about')">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" v-on:click.prevent="showPage('blog')">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" v-on:click.prevent="showPage('contact')">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-4">
<div v-if="currentPage === 'home'">
<h1>Home Page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p>
</div>
<div v-if="currentPage === 'about'">
<h1>About Page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p>
</div>
<div v-if="currentPage === 'blog'">
<h1>Blog Page</h1>
<div v-for="post in posts" :key="post.id">
<h3>{{ post.title }}</h3>
<p>{{ post.content }}</p>
<a href="#" v-on:click.prevent="showPost(post.id)">Read More</a>
</div>
</div>
<div v-if="currentPage === 'contact'">
<h1>Contact Page</h1>
<form>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" v-model="contactForm.name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" v-model="contactForm.email">
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea class="form-control" id="message" v-model="contactForm.message"></textarea>
</div>
<button type="submit" class="btn btn-primary" v-on:click.prevent="submitForm">Send</button>
</form>
</div>
<div v-if="currentPage === 'post'">
<h1>{{ currentPost.title }}</h1>
<p>{{ currentPost.content }}</p>
<a href="#" v-on:click.prevent="showPage('blog')">Back to Blog</a>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="script.js"></script>
</body>
</html>
```
script.js:
```
var app = new Vue({
el: '#app',
data: {
currentPage: 'home',
posts: [
{ id: 1, title: 'Post 1', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.' },
{ id: 2, title: 'Post 2', content: 'Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.' },
{ id: 3, title: 'Post 3', content: 'Praesent vestibulum dapibus nibh. Etiam iaculis nunc ac metus.' },
],
currentPost: {},
contactForm: {
name: '',
email: '',
message: '',
},
},
methods: {
showPage: function(page) {
this.currentPage = page;
},
showPost: function(id) {
this.currentPost = this.posts.find(post => post.id === id);
this.showPage('post');
},
submitForm: function() {
console.log(this.contactForm);
// send form data to server
// reset form data
this.contactForm.name = '';
this.contactForm.email = '';
this.contactForm.message = '';
alert('Form submitted!');
},
},
});
```
以上代码中的 `currentPage` 变量表示当前显示的页面,可以通过点击导航栏中的链接来切换页面。在 `Blog` 页面中,使用了 `v-for` 指令来循环显示博客文章,并且通过点击文章标题的链接来显示完整的文章内容。在 `Contact` 页面中,使用了 `v-model` 指令来绑定表单输入框的值,并且通过点击 `Send` 按钮来提交表单。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)