Vue初体验（七）使用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>
1
2
3
4
5
6
7

我们使用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 = '';
         }
     }
 })
1
2
3
4
5
6
7
8
9
10
11
12
13

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

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