要在 Vue 中实现一个基础的留言板发布功能,你需要一个表单来输入留言,一个按钮来提交留言,以及一个列表来显示所有留言。我将提供一个简单的示例,包含基础的 Vue 组件结构和相应的功能。
HTML 部分
首先,需要一个HTML文件来设置基本的结构。如果还没有添加Vue.js库,可以像之前一样通过CDN添加。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>留言板</title>
</head>
<body>
<div id="app">
<h1>留言板</h1>
<form @submit.prevent="addMessage">
<input type="text" v-model="newMessage" placeholder="写下你的留言">
<button type="submit">发布</button>
</form>
<ul>
<li v-for="message in messages" :key="message.id">
{{ message.text }}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
newMessage: '',
messages: [],
nextMessageId: 1
},
methods: {
addMessage() {
if (this.newMessage.trim() !== '') {
this.messages.push({
id: this.nextMessageId++,
text: this.newMessage
});
this.newMessage = ''; // 清空输入框
}
}
}
});
</script>
</body>
</html>
代码解释
-
HTML结构:
- 包含一个表单,用于输入留言。这个表单有一个输入框和一个提交按钮。
- 使用
v-model
指令绑定输入框的值到newMessage
数据属性。 - 表单的
@submit.prevent
是一个事件修饰符,用于阻止表单的默认提交行为,并调用addMessage
方法。 - 使用
v-for
指令在一个列表中展示所有留言。
-
JavaScript 部分:
- Vue 实例的
data
包含三个属性:newMessage
(当前输入的留言文本),messages
(留言列表数组),nextMessageId
(为每条留言生成唯一ID)。 addMessage
方法检查输入的留言是否为空(去除前后空格),如果不为空,就将留言添加到messages
数组中,并重置newMessage
为空,准备下一次输入。
- Vue 实例的
扩展功能
- 持久化存储:可以使用浏览器的 localStorage 或者服务器端数据库来存储留言,确保刷新页面后留言不会消失。
- 时间戳:在留言数据中添加时间戳,显示每条留言的具体时间。
- 删除或编辑功能:为每条留言添加删除和编辑按钮,允许用户管理他们的留言。
- 样式美化:使用 CSS 提高用户界面的美观性。
这个简单的留言板发布功能已经可以在不涉及后端的情况下运行,为进一步的扩展和学习提供了基础。