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

下面是使用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 refreactive。具体来说,在 Chatroom 页面中,我们定义了 chatListmessage 两个数据属性:

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: '你怎么这么慢回复啊' }
    ]
  }
},

chatListmessage 发生变化时,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)
上一篇 2天前
下一篇 2天前

相关文章

  • vue2.0+vue-router构建一个简单的列表页的示例代码

    下面是“vue2.0+vue-router构建一个简单的列表页”的完整攻略: 步骤一:创建项目 首先,我们需要创建一个空项目,可以通过以下命令来创建: vue create my-project 创建完成后,进入项目的根目录,安装 vue-router 依赖: npm install vue-router –save 步骤二:配置路由 在 src 目录下创…

    Vue 1天前
    00
  • 手把手搭建安装基于windows的Vue.js运行环境

    下面是手把手搭建安装基于Windows的Vue.js运行环境的完整攻略: 1. 安装Node.js 首先,需要安装Node.js作为运行Vue.js项目的环境。可以从官网https://nodejs.org/en/下载适合自己操作系统的版本进行安装。 安装完成后,可以在命令行工具中输入以下命令来检查安装是否成功: node -v 如果安装成功,则会显示Nod…

    Vue 2天前
    00
  • 详解vue-cli项目中用json-sever搭建mock服务器

    下面是详解“详解vue-cli项目中用json-sever搭建mock服务器”的完整攻略: 一、什么是json-server JSON Server是一个基于Node.js的RESTful API服务器,可以通过在本地运行json文件中的数据创建完整的RESTful API,这在前端开发中用于测试和模拟数据非常有帮助。 二、在Vue-cli项目中安装json…

    Vue 22小时前
    00
  • Vue如何引入远程JS文件

    Vue框架提供了多种方式来引入远程的JavaScript文件。下面详细介绍两种常用的方式。 方式一:通过script标签引入 我们可以在Vue组件内使用script标签来引用远程JS文件。下面是一个示例: <template> <div> <h1>Hello Vue</h1> <button @click…

    Vue 1天前
    00
  • Vue/React子组件实例暴露方法(TypeScript)

    接下来我将为你详细讲解“Vue/React子组件实例暴露方法(TypeScript)”的完整攻略。 1. 为什么要暴露子组件实例方法? 在Vue/React组件开发中,父子之间的组件通信是很常见的一种情况。而在某些情况下,我们需要获取子组件的实例,以便使父组件调用子组件的方法或属性。这个时候就需要用到子组件实例的暴露方法。 2. 如何在Vue子组件中暴露实例…

    Vue 1天前
    00
  • Vue3从0搭建Vite打包组件库使用详解

    好的,下面我将详细讲解“Vue3从0搭建Vite打包组件库使用详解”的完整攻略。 如何搭建 步骤一:安装Vue CLI 首先安装 Vue CLI。打开终端并运行以下命令: npm install -g @vue/cli 步骤二:创建Vue项目 生成一个新的Vue项目,安装 Vue Router 和 Vuex。进入项目路径,执行以下命令: vue create…

    Vue 12小时前
    00
  • Vue如何获取数据列表展示

    当我们使用Vue进行开发时,数据展示是不可避免的需要。这里提供一份完整的攻略,来讲解Vue如何获取数据列表展示。 一、数据获取 获取数据是数据展示的前置步骤。Vue中通常使用计算属性(computed)或者组件的created生命周期函数来获取数据。 1. 计算属性 计算属性是用来计算衍生数据的属性,它通常依赖于已有的数据。当依赖的数据发生变化时,计算属性将…

    Vue 22小时前
    00
  • Vue中事件总线(eventBus)的深入详解及使用

    Vue中事件总线(eventBus)的深入详解及使用 在Vue的开发中,事件总线(eventBus)是非常常用的技术手段,可以方便地实现组件之间的通信以及非父子组件之间的通信。本篇文章将基于Vue 2.x版本,介绍如何使用事件总线及其原理解析。 什么是事件总线 事件总线是一种在Vue中非常常用的技术手段,它是通过Vue实例作为中央事件总线,来实现组件之间的通…

    Vue 2天前
    00
  • Vue实现动态添加或者删除对象和对象数组的操作方法

    Vue是一款流行的JavaScript框架,可以用于构建易于维护的用户界面和单页面应用程序。Vue提供了许多功能来帮助我们对数据进行处理,其中包括动态添加和删除对象和对象数组。 1. 实现动态添加对象 要在Vue中动态添加一个对象,首先需要定义一个方法来处理添加操作。可以在Vue组件的方法中添加一个“add”函数,来实现添加对象的逻辑。 <templa…

    Vue 1天前
    00
  • vuex存取值和映射函数使用说明

    下面就为大家介绍一下Vuex存取值和映射函数的使用说明: Vuex存取值和映射函数使用说明 Vuex存取值 Vuex是Vue.js的状态管理库,它允许我们以集中式的方式存储、管理和使用应用中的所有组件之间共享的状态。在Vuex中,所有状态都被存储在一个单一的状态树中,这个状态树是响应式的,它可以在状态改变时自动更新视图。 在Vuex中,我们可以通过gette…

    Vue 21小时前
    00