2024年前端最新一个简单漂亮的前端聊天界面，计算机专业必看

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

.chat_banner {

background: linear-gradient(to right, #a41adc, #ee1351, #a41adc); /* 标准的语法 */

width: 999px;

height: 50px;

border: 1px solid blue;

}

.chat_body {

width: 999px;

height: 546px;

border: 1px solid red;

}

.chat_online {

overflow: hidden;

float: left;

height: 546px;

width: 200px;

border: 1px solid yellow;

background-color: white;

}

.search_online {

text-indent: 2em;

height: 40px;

border: 1px solid black;

}

.search_online input[type=“text”] {

outline: none;

margin: 2px auto;

height: 30px;

width: 60%;

border-radius: 8px;

text-indent: 2em;

}

.online_friend ul li {

list-style-type: none;

}

.online_friend ul li {

height: 60px;

border-bottom: 1px solid #1c1f21;

margin-top: 10px;

}

.a_friend {

/border: 1px solid #2328ff;/

height: 55px;

background-color: #39fffe;

}

.head_portrait {

background-color: #b532ff;

margin: 6px 6px;

float: left;

height: 40px;

width: 40px;

border: 1px solid orangered;

border-radius: 50%;

}

.head_text {

padding: 3px;

font-size: 22px;

text-align: center;

vertical-align: center;

margin-top: 3px;

}

.friend {

float: right;

height: 54px;

width: 140px;

/border: 1px solid rebeccapurple;/

}

.friend .name {

margin: 4px 6px;

float: left;

}

.friend .this_time {

margin-top: 4px;

float: right;

}

.chat_main {

float: left;

width: 548px;

height: 546px;

border: 1px solid seagreen;

/background-color: white;/

background: url(“…/img/圣诞.jpg”) no-repeat;

background-size: cover;

}

.send_message {

width: 548px;

height: 65px;

position: absolute;

bottom: 0px;

background: linear-gradient(to top, rgba(9, 216, 237, 0.99), #72cad4);

}

.send_message input[type=“text”] {

width: 470px;

height: 30px;

margin-top: 16px;

margin-left: 10px;

border-radius: 10px 0 0 10px;

text-indent: 2em;

outline: none;

background-color: white;

border: none;

}

.send_message input[type=“button”] {

border-radius: 0 10px 10px 0;

width: 35px;

height: 30px;

background-color: white;

border: none;

margin-left: 0;

background-color: white;

border: none;

outline: none;

}

.send_message input[type=“button”]:hover {

background-color: orangered;

}

.send_message input[type=“button”]:active {

background-color: #879eee;

}

.chat_namecard {

float: left;

width: 245px;

height: 546px;

border: 1px solid saddlebrown;

background-color: #f1fea9;

}

.chat_content ul{

list-style-type: none;

}

.chat_content{

overflow: auto;

width: 540px;

/设置高度滚动条才有效/

height: 470px;

}

.chat_content li{

margin-top: 10px;

width: 540px;

clear: both;

display: block;

}

.chat_content li img{

margin: 6px 0 0 0;

}

.chat_content li span {

background: #ffd351;

padding: 10px;

border-radius: 10px;

/最大宽度不能太长，不然布局会混乱/

max-width: 400px;

border: 1px solid white;

box-shadow: 0 0 3px #879eee;

margin: 6px 10px 0 10px;

overflow: hidden;

}

.chat_content li img {

width: 40px;

height: 40px;

border-radius: 50%;

}

.chat_content li img.imgleft {

margin-left: 10px;

float: left;

}

.chat_content li img.imgright {

margin-right: 10px;

float: right;

}

.chat_content li span.spanleft {

float: left;

}

.chat_content li span.spanright {

float: right;

}

三.JS代码

window.onload = function () {

var user = [“…/img/img_17.jpg”];

var num = 1;//判断左右

var portrait_position = 0;

var now = -1;//左右浮动

var send_btn = document.getElementById(‘send_btn’);

var send_txt = document.getElementById(‘send_txt’);

var chat_ul = document.getElementById(‘chat_ul’);

var chat_span = chat_ul.getElementsByTagName(‘span’);

var chat_img = chat_ul.getElementsByTagName(‘img’);

send_btn.onclick = function () {

if (send_txt.value == ‘’) {

alert(“请不要惜字如金”);

} else {

chat_ul.innerHTML += ‘

• ’ + send_txt.value + ‘’;

• now++;

  if (num==0) {

  chat_span[now].className = ‘spanright’;

  chat_img[now].className = ‘imgright’;

  }

  else {

  chat_span[now].className = ‘spanleft’;

  chat_img[now].className = ‘imgleft’;

  }

  send_txt.value = ‘’;

  // 内容过多时,将滚动条放置到最底端

  /contentcontent.scrollTop = content.scrollHeight;/

  }

  }

  总结

  阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。

  

  

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

  scrollTop = content.scrollHeight;*/

  }

  }

  总结

  阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。

  

  

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】