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初體驗（八）屬性和方法