处理用户输入

在 Scrimba 上尝试这节课

为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

  1. <div id="app-5">
  2.   <p>{{ message }}</p>
  3.   <button v-on:click="reverseMessage">反转消息</button>
  4. </div>
  1. var app5 = new Vue({
  2.   el: '#app-5',
  3.   data: {
  4.     message: 'Hello Vue.js!'
  5.   },
  6.   methods: {
  7.     reverseMessage: function () {
  8.       this.message = this.message.split('').reverse().join('')
  9.     }
  10.   }
  11. })

处理用户输入 - 图1

注意在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

  1. <div id="app-6">
  2.   <p>{{ message }}</p>
  3.   <input v-model="message">
  4. </div>
  1. var app6 = new Vue({
  2.   el: '#app-6',
  3.   data: {
  4.     message: 'Hello Vue!'
  5.   }
  6. })

处理用户输入 - 图2