vue3用javascript 实现留言板功能全

Vue 3是一个强大的前端框架，我们可以使用JavaScript来构建一个简单的留言板功能。以下是步骤：

1. **创建项目**: 首先，你需要安装Vue CLI，然后创建一个新的Vue项目。

npm install -g @vue/cli
vue create message-board
cd message-board

2. **组件化设计**: 分别创建`MessageList.vue`、`MessageForm.vue`和可能的`Comment.vue`等组件，分别用于展示留言列表、添加新留言表单以及评论。

3. **数据管理**: 使用Vuex（状态管理模式）来管理全局的数据，比如留言数组。

// store/index.js
import { createStore } from 'vuex'
export default createStore({
  state: {
    messages: [],
  },
  mutations: {
    addMessage(state, message) {
      state.messages.push(message);
    },
  },
  actions: {},
  getters: {}
})

4. **视图绑定**: 在`MessageList.vue`中，通过计算属性获取并渲染留言。在`MessageForm.vue`中，监听用户输入并调用 Vuex 中的动作添加新的留言。

5. **事件驱动**: 使用Vue的`v-on`指令处理提交表单的事件，如`@submit.prevent="addMessage"`。

6. **路由设置**: 如果需要，可以配置路由以便在不同的URL显示留言列表和新建留言页面。

7. **样式美化**: 利用CSS或预处理器（如Sass或Less）添加样式，使界面更美观。

完整的示例代码因篇幅原因无法全部列出，但以上概述了基本架构。下面是简化版的部分关键部分：

**MessageList.vue**

<template>
  <div>
    <ul v-for="(message, index) in messages" :key="index">
      <!-- 显示每个留言 -->
    </ul>
  </div>
</template>

<script setup>
import { mapState } from "vue/composition-api";
const { messages } = useStore();
...
</script>

**MessageForm.vue**

<form @submit.prevent="addMessage($event)">
  <!-- 表单元素和事件处理 -->
</form>

**添加到store.js**

actions: {
  async addMessage({ commit }, data) {
    await axios.post('/api/messages', data); // 异步保存到服务器
    commit('addMessage', data); // 提交给store
  }
}