如何制作一个简单的留言板用vue.js

创建一个简单的Vue.js留言板可以分为几个步骤：

1. **设置环境**：首先确保已经安装了Node.js和Vue CLI（Vue脚手架）。你可以通过命令行运行`npm install -g @vue/cli`来全局安装。

2. **创建项目**：打开终端，然后运行`vue create my-message-board`创建一个新的Vue项目，选择"默认"模板即可。

3. **导航组件**：在`src/components`目录下创建一个名为`MessageList.vue`的文件，这将作为展示留言的地方。在这个文件里，你会需要一个数组来存储消息，并使用`v-for`指令遍历它们。例如：

<template>
  <div>
    <ul>
      <li v-for="message in messages" :key="message.id">{{ message.text }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        { id: 1, text: '第一条留言' },
        // 添加更多留言...
      ]
    };
  }
};
</script>

4. **添加表单组件**：创建一个名为`AddMessage.vue`的组件，用于用户输入新留言。这个组件应该有一个表单和按钮，提交表单时向数据数组中添加新的留言。

<template>
  <form @submit.prevent="addMessage">
    <input type="text" v-model="newMessage" placeholder="请输入留言...">
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      newMessage: ''
    };
  },
  methods: {
    addMessage() {
      this.messages.push({ id: Math.random(), text: this.newMessage });
      this.newMessage = '';
    }
  }
};
</script>

5. **主组件（App.vue）集成**：在`App.vue`文件中引入并显示这两个组件，并监听路由变化（如果使用Vue Router的话）。

6. **路由配置**：如果你使用Vue Router，确保设置了一个路由规则，如`/messages`，指向`MessageList.vue`。

7. **样式调整**：为了美观，你可以添加一些基本的CSS来美化布局和样式。