1. Python技术站首页
  2. 其他
  3. Vue

使用vue3实现一个人喵交流小程序

• Vue

下面是使用Vue3实现一个人喵交流小程序的完整攻略。

准备工作

在开始实现之前，我们需要完成以下准备工作：

  1. 安装 Node.js（版本需>=14）以及 npm（或者使用 yarn）；
  2. 在命令行中安装 Vue CLI 3：npm install -g @vue/cli。

创建项目

使用 Vue CLI 3 创建一个新的项目：

vue create cat-talk

在创建项目时，选择“Manually select features”并选中“Router”“Vuex”“SCSS”。

安装相关依赖：

npm install

编写页面

首先编写页面路由。在 src/router/index.js 文件中添加以下内容：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/chatroom',
    name: 'Chatroom',
    component: () => import(/* webpackChunkName: "chatroom" */ '../views/Chatroom.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

其中，我们定义了两个路由：/对应的 Home 页面和 /chatroom 对应的 Chatroom 页面。

编写 Home 页面，在 src/views/Home.vue 文件中添加以下内容：

<template>
  <div class="home">
    <h1>Welcome to Cat Talk</h1>
    <button @click="gotoChatroom()">Go To Chatroom</button>
  </div>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    gotoChatroom() {
      this.$router.push('/chatroom')
    }
  }
}
</script>

<style scoped>
.home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 68px);
  font-size: 1.5rem;
}

button {
  font-size: 1.2rem;
  padding: 8px 16px;
  background-color: #2c3e50;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

button:hover {
  background-color: #34495e;
}
</style>

在 Home 页面中，我们添加了一个标题，并在页面中间放置了一个 button 按钮，用于跳转到 Chatroom 页面。同时，我们添加了路由跳转的方法 gotoChatroom 。

接着，我们编写 Chatroom 页面，在 src/views/Chatroom.vue 文件中添加以下内容：

<template>
  <div class="chatroom">
    <div class="chatroom-header">
      <h1>人喵聊天室</h1>
      <router-link to="/">回到首页</router-link>
    </div>
    <div class="chatroom-content">
      <div class="chat-list">
        <div v-for="item in chatList" :key="item.id" class="chat-item">
          <div class="avatar">
            <img :src="item.avatar" alt="">
          </div>
          <div class="chat-content">
            <div class="chat-user">
              {{item.username}} <span class="chat-time">{{item.time}}</span>
            </div>
            <div class="chat-message">{{item.message}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="chatroom-footer">
      <input type="text" placeholder="请输入聊天内容..." v-model.trim="message" @keyup.enter="sendMessage">
      <button @click="sendMessage()">发送</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Chatroom',
  data() {
    return {
      message: '',
      chatList: [
        { id: 1, username: '喵喵', avatar: 'https://randomuser.me/api/portraits/thumb/men/1.jpg', time: '10:20', message: '在吗？' },
        { id: 2, username: '人类', avatar: 'https://randomuser.me/api/portraits/thumb/women/1.jpg', time: '10:21', message: '在的' },
        { id: 3, username: '喵喵', avatar: 'https://randomuser.me/api/portraits/thumb/men/1.jpg', time: '10:22', message: '你怎么这么慢回复啊' }
      ]
    }
  },
  methods: {
    sendMessage() {
      if (this.message) {
        this.chatList.push({
          id: this.chatList.length + 1,
          username: '人类',
          avatar: 'https://randomuser.me/api/portraits/thumb/women/1.jpg',
          time: new Date().toLocaleTimeString(),
          message: this.message
        })
        this.message = ''
      }
    }
  }
}
</script>

<style scoped>
.chatroom {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chatroom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 68px;
  background-color: #2c3e50;
  color: #fff;
}

.chatroom-header h1 {
  font-size: 1.5rem;
  margin: 0;
}

.chatroom-header a {
  font-size: 1.2rem;
  color: #fff;
  text-decoration: none;
}

.chatroom-content {
  flex: 1;
  padding: 16px;
  background-color: #f5f5f5;
  overflow-y: auto;
}

.chat-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-item {
  display: flex;
  gap: 8px;
}

.avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
}

.chat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.chat-user {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  color: #777;
}

.chat-time {
  margin-left: 8px;
  font-size: 1rem;
  color: #999;
}

.chat-message {
  margin-top: 4px;
  font-size: 1.2rem;
  white-space: pre-line;
}

.chatroom-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background-color: #fff;
}

.chatroom-footer input {
  flex: 1;
  margin-right: 16px;
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.chatroom-footer button {
  padding: 4px 8px;
  background-color: #2c3e50;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.chatroom-footer button:hover {
  background-color: #34495e;
}
</style>

在 Chatroom 页面中，我们分别定义了聊天列表 chatList 和输入框内容 message 的数据属性，并添加了发送消息的方法 sendMessage 。同时，我们使用了 Vue 3 的 v-for 指令来循环展示聊天列表，使用了 v-model 指令将输入框的值和数据属性 message 绑定，使用 @keyup.enter 绑定 Enter 键事件来响应键盘回车按键。

运行程序

最后，运行项目并查看效果：

npm run serve

访问 http://localhost:8080/ 可以看到 Home 页面，并通过点击跳转到 Chatroom 页面。

示例说明一

上面的代码中，我们使用了 Vue 3 的新特性响应式 API ref 和 reactive。具体来说，在 Chatroom 页面中，我们定义了 chatList 和 message 两个数据属性：

data() {
  return {
    message: '',
    chatList: [
      { id: 1, username: '喵喵', avatar: 'https://randomuser.me/api/portraits/thumb/men/1.jpg', time: '10:20', message: '在吗？' },
      { id: 2, username: '人类', avatar: 'https://randomuser.me/api/portraits/thumb/women/1.jpg', time: '10:21', message: '在的' },
      { id: 3, username: '喵喵', avatar: 'https://randomuser.me/api/portraits/thumb/men/1.jpg', time: '10:22', message: '你怎么这么慢回复啊' }
    ]
  }
},

当 chatList 和 message 发生变化时，Vue 3 会自动更新页面的数据渲染。这样，在 sendMessage 方法中不需要手动调用 this.$forceUpdate() 可以更新页面。

示例说明二

上面的代码中，我们使用了 Vue 3 的新特性 v-model 的修饰符 trim。具体来说，在 Chatroom 页面中，我们使用以下代码将输入框的值和数据属性 message 绑定：

<input type="text" placeholder="请输入聊天内容..." v-model.trim="message" @keyup.enter="sendMessage">

这里添加了修饰符 trim，表示去除输入框的前后空格。这样，当用户在输入框输入完内容后按回车键发送消息时，输入框内的空格不会传递给数据属性 message，从而保证了发送的消息内容正确。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用vue3实现一个人喵交流小程序 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • vue 取出v-for循环中的index值实例

    下面我将详细讲解”vue 取出 v-for循环中的index值实例”的攻略。 1. 在v-for循环中使用index 使用v-for循环时，可以给它提供一个参数，这个参数将会被自动的设置为当前项的索引值。v-for的语法如下： <template> <div> <ul> <li v-for="(item, …

    Vue 2023年5月29日
    00

  • Vue实现预览文件(Word/Excel/PDF)功能的示例代码

    下面是Vue实现预览不同类型文件的示例代码的完整攻略： 1. 准备工作 在Vue的项目中，要实现文件预览功能，需要安装和引用一些第三方库：- file-saver库，用于在前端将文件保存到本地；- axios库，用于发送请求到后端获取文件数据；- jszip库，用于解压缩zip文件；- pdf.js库，用于预览PDF文件。 可以使用npm来安装这些库： np…

    Vue 2023年5月28日
    00

  • Vue表格组件Vxe-table使用技巧总结

    Vue表格组件Vxe-table使用技巧总结 简介 Vxe-table是一款基于Vue.js的表格组件，提供了强大的分页、排序、编辑、导入导出等功能，可以快速应用于数据管理系统等场景。 本文将总结Vxe-table的常见使用技巧，包括数据渲染、插槽、操作按钮、事件监听等，帮助快速上手Vxe-table的使用。 安装 可以通过以下命令来安装Vxe-table：…

    Vue 2023年5月29日
    00

  • Vue关于组件化开发知识点详解

    下面是关于Vue的组件化开发的详细攻略。 1. 什么是组件化开发 组件化开发是一种将一个大型项目拆分成多个小的可重用组件的方法。每个组件都封装了自己的数据和方法，可在不同的页面和应用中被重复利用。 Vue.js 是一个专注于数据驱动的渐进式 JavaScript 框架，它通过其丰富的生命周期钩子函数和强大的响应式数据绑定机制，使得组件化开发得以高效实现。 2…

    Vue 2023年5月27日
    00

  • vue遍历生成的输入框 绑定及修改值示例

    下面是”Vue遍历生成的输入框绑定及修改值示例”的完整攻略： 1. 创建Vue组件 首先，假设我们已经创建了一个Vue组件。该组件有一个数据属性items，它的值是一个包含多个对象的数组。每个对象都包含一个name和一个value属性。例如： <template> <div> <div v-for="(item, in…

    Vue 2023年5月29日
    00

  • Vue3 中的 readonly 特性及函数使用详解

    Vue3 中的 readonly 特性及函数使用详解 在 Vue3 中，readonly 是一个非常有用的特性，它可以将一个对象或数组变成只读的，防止被修改，以保证应用程序的稳定性。 什么是 readonly 特性？ readonly 特性可以在定义一个对象或数组时，将其设置为只读状态，使其不被修改。使用 readonly 的优势在于避免了应用程序中的错误或…

    Vue 2023年5月28日
    00

  • Vue使用electron生成桌面应用过程详解

    Vue使用electron生成桌面应用过程详解 1. 概述 Vue.js是一个流行的JavaScript框架，用于构建Web应用程序。而Electron是一个使用JavaScript、HTML和CSS构建跨平台桌面应用程序的工具包。将Vue.js与Electron结合使用，可以快速而简单地构建更为强大的桌面应用程序。 本文将介绍如何使用Vue.js和Elec…

    Vue 2023年5月27日
    00

  • vue实例成员 插值表达式 过滤器基础教程示例详解

    我将为你讲解“vue实例成员 插值表达式 过滤器基础教程示例详解”的攻略。 Vue实例成员 Vue实例是最基本的构成单元，具有许多成员属性和方法。其中，常用的实例成员包括：data、methods、computed、watch等等。 data data属性是用来注册Vue实例的数据属性。它能让Vue跟踪数据的变化，当数据变化时，它会通知到相关的视图以及组件等…

    Vue 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部