devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【web前端开发网页设计】一步步实现：HTML + CSS + JavaScript 完整vue聊天窗口列表（超实用）轻松搞定简单聊天功能：完整源代码与详细教程（新手必看）轻松入门前端开_前端聊天界面

作者：繁依Fanyi0 | 2024-07-28 02:45:28

赞

踩

前端聊天界面

b站视频演示效果：

效果图：

完整代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>聊天窗口</title>
  7.     <!-- 引入 Vue.js -->
  8.     <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  9.     <style>
  10.         /* 样式 */
  11.         body {
  12.             font-family: Arial, sans-serif;
  13.             margin: 0;
  14.             padding: 20px;
  15.         }
  16.         .chat-container {
  17.             width: 400px;
  18.             margin: 0 auto;
  19.             border: 1px solid #ccc;
  20.             border-radius: 5px;
  21.             overflow: hidden;
  22.         }
  23.         .chat-messages {
  24.             height: 300px;
  25.             overflow-y: scroll;
  26.             padding: 10px;
  27.             background-color: #f2f2f2;
  28.         }
  29.         .message {
  30.             margin-bottom: 10px;
  31.         }
  32.         .message.sender {
  33.             text-align: right;
  34.         }
  35.         .message.receiver {
  36.             text-align: left;
  37.         }
  38.         .message-content {
  39.             display: inline-block;
  40.             padding: 5px 10px;
  41.             border-radius: 5px;
  42.             background-color: #007bff;
  43.             color: #fff;
  44.         }
  45.         .message-content.receiver {
  46.             background-color: #ccc;
  47.             color: #000;
  48.         }
  49.         .input-container {
  50.             padding: 10px;
  51.             border-top: 1px solid #ccc;
  52.         }
  53.         .input-container input[type="text"] {
  54.             width: 80%;
  55.             padding: 8px;
  56.             border: 1px solid #ccc;
  57.             border-radius: 3px;
  58.             outline: none;
  59.         }
  60.         .input-container button {
  61.             padding: 8px 15px;
  62.             border: none;
  63.             border-radius: 3px;
  64.             background-color: #007bff;
  65.             color: #fff;
  66.             cursor: pointer;
  67.         }
  68.     </style>
  69. </head>
  70. <body>
  71. <div id="app">
  72.     <div class="chat-container">
  73.         <div class="chat-messages" ref="chatMessages">
  74.             <div class="message sender" v-for="(message, index) in messages" :key="index">
  75.                 <div class="message-content">{{ message }}</div>
  76.             </div>
  77.         </div>
  78.         <div class="input-container">
  79.             <input type="text" v-model="newMessage" @keyup.enter="sendMessage" placeholder="输入消息...">
  80.             <button @click="sendMessage">发送</button>
  81.         </div>
  82.     </div>
  83. </div>
  84.  
  85. <script>
  86.     new Vue({
  87.         el: '#app',
  88.         data() {
  89.             return {
  90.                 messages: [
  91.                     '你好，这是一条测试消息。',
  92.                     '你可以在这个聊天窗口中输入消息进行聊天。',
  93.                     '接下来，我会模拟对话的过程。',
  94.                 ],
  95.                 newMessage: '',
  96.             };
  97.         },
  98.         methods: {
  99.             sendMessage() {
  100.                 if (this.newMessage.trim() !== '') {
  101.                     this.messages.push(this.newMessage.trim());
  102.                     this.newMessage = '';
  103.                     // 滚动到底部
  104.                     this.$nextTick(() => {
  105.                         const chatMessages = this.$refs.chatMessages;
  106.                         chatMessages.scrollTop = chatMessages.scrollHeight;
  107.                     });
  108.                 }
  109.             },
  110.         },
  111.     });
  112. </script>
  113. </body>
  114. </html>

功能：

  1. 显示聊天消息列表，显示发送者的消息。
  2. 用户可以输入消息并发送。
  3. 发送消息后，聊天窗口会自动滚动到最新消息的位置。

知识点：

  1. Vue.js：使用了 Vue.js 来构建交互式的前端界面。
  2. 数据绑定：通过 v-model 实现输入框与数据的双向绑定，使得输入框中的内容能够实时反映到数据上。
  3. 列表渲染：使用 v-for 指令遍历 messages 数组，渲染出聊天消息列表。
  4. 事件处理：使用 @click 和 @keyup.enter 监听按钮点击事件和键盘回车事件，实现发送消息的功能。
  5. 滚动处理：通过 $nextTick 在消息发送后滚动聊天窗口到底部。
  6. CSS 样式：应用了一些简单的 CSS 样式来美化界面，并使其具有良好的显示效果。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

各位同学们：还有啥想看的功能或者特效不？欢迎在评论区留言哦！

本人承接网网站开发，如有需要，欢迎私信咨询！

如果您感觉文章对您有帮助~
那就打赏一下，请笔者喝杯咖啡吧~

给新手学习前端开发的建议：

  1. 了解基础知识：

    • 学习HTML、CSS和JavaScript的基础知识。它们是前端开发的核心，构成了网页的基本结构和样式，以及交互功能。
    • 掌握HTML的标签和语义化，了解CSS的选择器和布局技巧，熟悉JavaScript的基本语法和DOM操作。

  2. 实践项目：

    • 不要仅仅停留在理论学习上，通过实践项目来巩固和应用所学知识。
    • 可以从简单的静态页面开始，逐渐尝试添加交互效果和动态数据。
    • 参与开源项目或自己动手创建一个个人网站，将所学知识应用到实际场景中。

  3. 学习工具和框架：

    • 了解并学习前端开发中常用的工具和框架，如构建工具（Webpack、Gulp等）、版本控制工具（Git）、前端框架（React、Vue、Angular等）。
    • 这些工具和框架能够提高开发效率，简化开发流程，是前端开发的重要组成部分。

  4. 关注前端趋势：

    • 前端开发是一个快速发展的领域，新的技术和工具不断涌现。
    • 关注前端社区、博客和会议，了解最新的技术趋势和发展方向，保持学习的热情和动力。

  5. 培养解决问题的能力：

    • 前端开发常常会遇到各种问题和挑战，学会独立思考和解决问题是非常重要的。
    • 遇到问题时，可以先尝试自己解决，通过查阅文档、搜索资料和社区讨论来找到答案。
    • 如果实在无法解决，可以向同事或社区求助，但也要学会总结和分享自己的经验和教训。

  6. 不断学习和提升：

    • 前端开发是一个不断学习和提升的过程，要保持对知识的渴望和追求。
    • 可以通过阅读书籍、参加培训、参与开源项目等方式来不断提升自己的技能水平。
    • 同时，也要关注自己的职业发展，了解行业的需求和趋势，规划自己的职业道路。

  7. 注重代码质量和可维护性：

    • 编写高质量的代码是前端开发的基本要求之一。
    • 学习并遵循代码规范，使用适当的命名和注释来提高代码的可读性。
    • 注重代码的结构和逻辑，避免过度嵌套和复杂的逻辑。
    • 考虑代码的可维护性，尽量编写可复用和可扩展的代码。

  8. 参与社区和交流：

    • 加入前端开发的社区和论坛，与其他开发者进行交流和分享。
    • 通过参与社区活动、回答问题、分享经验等方式，不仅可以提升自己的技能水平，还可以结识更多的同行和朋友。

总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。

加油吧！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/892515
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号