首页 > 文章列表 > VUE3入门实例:构建一个简单的留言板

VUE3入门实例:构建一个简单的留言板

vue 留言板 构建
359 2023-06-15

Vue3是目前前端开发领域最受欢迎的JavaScript框架之一,它采用MVVM设计模式,能够更加快速、高效地构建交互性、动态化的页面。本文将介绍如何使用Vue3构建一个简单的留言板,让大家了解Vue3的基本使用方法。

1.创建Vue3项目

安装最新版本的Vue CLI后,在命令行工具中运行命令vue create message-board来创建名为message-board的Vue3项目。

2.构建组件

在src文件夹下创建MessageBoard.vue文件,该文件为一个Vue组件,负责展示留言板界面。

<template>
  <div class="container">
    <h1>留言板</h1>
    <form @submit.prevent="submitMessage">
      <label for="username">用户名:</label>
      <input type="text" id="username" v-model="message.username" required>
      <br>
      <label for="message">留言内容:</label>
      <textarea id="message" v-model="message.content" required></textarea>
      <br>
      <button type="submit">提交</button>
    </form>
    <ul>
      <li v-for="(message, index) in messages" :key="index">
        <b>{{ message.username }}:</b> {{ message.content }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: {
        username: '',
        content: ''
      },
      messages: []
    }
  },
  methods: {
    submitMessage() {
      this.messages.push(this.message)
      this.message = {
        username: '',
        content: ''
      }
    }
  }
}
</script>

<style>
.container {
  max-width: 600px;
  margin: 0 auto;
}
</style>

在模板中,使用v-model指令绑定<input><textarea>元素到组件内的状态中。<button>元素的@submit.prevent指令防止页面重载并使用submitMessage方法向组件内的messages数组中推入新留言。在submitMessage方法中,清空message状态以便添加下一个留言。

3.运行项目

在命令行中输入npm run serve,启动开发服务器,并在浏览器中打开http://localhost:8080/进行预览。

4.测试

使用留言板进行测试,可以发现每次提交都成功地向留言列表中添加了新消息。

本文介绍了使用Vue3构建一个简单的留言板的方法,让大家熟悉了Vue3的基本使用。如果您对Vue3的学习还不够了解,可以阅读Vue3的官方文档,或者尝试其他Vue3教程,掌握更为深入的使用方法。