vue處理用戶輸入

為了讓用戶和你的應用進行互動，可以用 v-on 指令綁定一個監聽事件用於調用我們 Vue 實例中定義的方法：

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

點擊按鈕：

在 reverseMessage 方法中，在沒有接觸 DOM 的情況下更新了應用的狀態 - 所有的 DOM 操作都由 Vue 來處理，寫的代碼只需要關注基本邏輯。

Vue 也提供了 v-model 指令，它使得在表單輸入和應用狀態中做雙向數據綁定變得非常輕巧。

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})