Vue实现简单聊天界面

刚接触Vue不久，现在大概才开始学了一半吧，最近专业实训答辩，看到别人写了一个聊天室，觉得好像挺好的，就在网上找了相关的文章来看。

下面这个链接的文章就写得很清楚，我相当于是按照它那个然后自己理解了一遍 再写的

原链接：https://blog.csdn.net/muzhe1024/article/details/83550371

（1）效果图

大概效果图就是这样子的（丑哈哈哈哈）。

（2）页面布局：分为三个大的div：header,main,sendbox.

头部的实现就是一个div,然后加上一个标题（聊天对象）

中间部分是显示聊天的内容

 底部是输入聊天内容，并且通过按钮将数据渲染到我们的main 当中去。

（3）贴代码

第一部分是html 的内容

第二部分是vue,js的内容

最后一部分是css内容

以上代码是所有的完整代码，我不知道其中还有没有可以优化的地方。

 不过其实还是想把内容存到LocalStorage或者是存到数据库里面，以表的 形式，接下来再继续写吧。