13 用Vue构建一个简单的“消息显示”应用

学前端的坤坤bond

于 2024-07-24 09:14:38 发布

阅读量195

点赞数 7

文章标签： vue.js 前端 javascript flutter ecmascript 前端框架 css3

本文链接：https://blog.csdn.net/m0_64904350/article/details/140653257

版权

让我们通过另一个基础的 Vue.js 应用案例来展示如何构建一个简单的“消息显示”应用。这个应用将允许用户输入消息，然后点击按钮将消息显示在页面上。

项目结构

message-app/
|-- public/
|   |-- index.html
|-- src/
|   |-- App.vue
|   |-- main.js
|-- package.json

1. `index.html`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Message App</title>
</head>
<body>
  <div id="app">
    <!-- Vue 应用将在这里渲染 -->
  </div>
  <!-- 引入 Vue -->
  <script src="https://unpkg.com/vue@next"></script>
  <!-- 应用的 main.js 将在这里被引入 -->
</body>
</html>

2. `main.js`

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

3. `App.vue`

<template>
  <div class="message-app">
    <h1>Type a message and press enter</h1>
    <!-- 使用 v-model 进行双向数据绑定 -->
    <input type="text" v-model="message" @keyup.enter="addMessage" placeholder="Type your message">
    <ul>
      <!-- 使用 v-for 渲染列表 -->
      <li v-for="(msg, index) in messages" :key="index">
        {{ msg }}
      </li>
    </ul>
    <button @click="clearMessages">Clear Messages</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '', // 用户输入的消息
      messages: [] // 存储所有消息的数组
    };
  },
  methods: {
    addMessage() {
      if (this.message.trim() !== '') {
        // 添加消息到数组
        this.messages.push(this.message.trim());
        // 清空输入框
        this.message = '';
      }
    },
    clearMessages() {
      // 清空所有消息
      this.messages = [];
    }
  }
};
</script>

<style>
.message-app input, .message-app button {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 16px;
}
.message-app ul {
  list-style: none;
  padding: 0;
}
.message-app li {
  background-color: #f0f0f0;
  margin-top: 5px;
  padding: 10px;
  border-radius: 5px;
}
</style>

如何运行

创建项目目录:
```
mkdir message-app && cd message-app
```
创建 index.html 和 src 目录，并添加 main.js 和 App.vue 文件:
```
touch index.html src/main.js src/App.vue
```
编辑 index.html、main.js 和 App.vue 文件，填充上述代码。
在项目根目录下运行一个本地服务器，可以使用 Python（如果已安装）:
```
python -m http.server
```
或者使用其他任何静态文件服务器。
打开浏览器访问 http://localhost:8000 查看应用。