Vue初体验（七）使用Vue实现一个简单的聊天框

1、实践是检验真理的唯一标准，现在我们做一个简易的聊天窗口，有一个input框，用于用户输入，一个按钮button，用于把用户的输入提交上去，然后又一个列表ul，用于展示我们每次提交的消息。

2、通过简单的分析，我们要思考这么几个问题：

第一、数据是怎么展示到界面上去的？
我们知道，界面展示的数据我们只能在data中实现。

第二、怎么样才能让界面数据动态变化？
界面的动态变化在本质上是数据的变化，只有数据改变了，界面才会改变！所有我们需要做的就是操作data中的数据。

第三、数据是怎么改变的？
在react中，使用this.setState()来实现，在小程序中，使用this.setData()来实现，在angular中，使用$scope来实现，而我们的Vue，仅仅使用this来实现，它只要this.data = value,就会实现数据的改变，从而实现界面的刷新。

3、经过简单分析，我们需要两个数据来实现我们的功能，分别是message和message_array,其中message是用来监听input用户输入的，而message_array是用来动态记录聊天消息的。
目前我们的应用程序该是这样的大概布局：

<div id="app"><ul><li v-for="item in message_array">{{item}}</li></ul><input type="text" v-model="message"/><button v-on:click="dealMessage">add</button></div>

我们使用v-for进行列表渲染，使用v-model来处理用户输入，使用v-on来绑定点击事件。
我们的js代码看起来像下面这样：

new  Vue({el:"#app",data:{message_array:[],message:''},methods:{dealMessage: function () {this.message_array.push(this.message);this.message = '';}}})

这样就会实现一个类似这样的效果的示例：

上一篇：Vue初体验（六）组件化component
下一篇：Vue初体验（八）属性和方法

Vue初体验（七）使用Vue实现一个简单的聊天框相关推荐

JAVA——如何写一个简单的聊天框
这是上学期JAVA选修课课下的一道简单的线上家庭作业题,题目描述如下: 总的来说就是要按照它的描述写一个聊天室界面.由于是选修课要求不高,老师只要求我们写出大致界面即可不用实现具体功能,不过闲来无事我 ...
SharePoint 2010 初体验（二）搭建一个简单的三态工作流
SharePoint 2010对工作流的创建与使用提供了友好的支持,我们有四种选择: SharePoint 2010:脱箱(Out-Of-The-Box)工作流 Visio 2010:可视化工作流,可 ...
Android（安卓）一个简单的聊天界面的实现（eclipse实现）
这几天刚刚学习一下安卓的编程,尝试制作了一个简单的聊天界面(还没有实现网络等后续功能)软件界面如图.(使用eclipse实现) 当输入一些内容后,聊天界面可以下拉显示更多的聊天信息,如下图首先对这个 ...
通过python 构建一个简单的聊天服务器
构建一个 Python 聊天服务器一个简单的聊天服务器现在您已经了解了 Python 中基本的网络 API:接下来可以在一个简单的应用程序中应用这些知识了.在本节中,将构建一个简单的聊天服务器.使 ...
通信软件基础B-重庆邮电大学-Java-编程实现一个简单的聊天程序-多线程编程实现
实验任务六编程实现一个简单的聊天程序-多线程编程实现 1. 系统设计要求编程实现一个简单的聊天程序,实现两台计算机间的信息交互,使用多线程编程实现:可同时连接多个客户端,服务器收到客户端发送的消息 ...
WebSocket(二) -- 使用原生webSocket实现一个简单的聊天
上文中,我们已经基本了解了webscoket的原理以及部分api的实现,接下来我们就使用websocket来实现一个简单的聊天室功能. 1. 需求分析 1.1 登陆聊天室: 1.2 登陆成功后与别人进 ...
用ServletContext做一个简单的聊天室
这里主要是ServletContext的一个特性:ServletContext是一个公共的空间,可以被所有的客户访问.由此可见ServletContext比cookie和session的作用范围要大[ ...
Netty - 一个简单的聊天室小项目
经过一段时间对Netty的学习,我们对Netty各版本以及像ProtocolBuffers等技术应用都有了不少相关的了解, 我们就用这段时间学到的只是做一个简单的聊天室的小项目来练习自己学到的技术. ...
python开发一个简单的聊天室
使用python的twisted框架编写一个简单的聊天室下面是基本架构基本架构图 -- coding:utf-8 -- from twisted.internet.protocol import ...

Vue初体验（七）使用Vue实现一个简单的聊天框

Vue初体验（七）使用Vue实现一个简单的聊天框相关推荐

最新文章

热门文章