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是用來動態記錄聊天訊息的。
目前我們的應用程式該是這樣的大概佈局：

<divid="app"><ul><liv-for="item in message_array">{{item}}</li></ul><inputtype="text"v-model="message"/><buttonv-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

這樣就會實現一個類似這樣的效果的示例：