输入和事件

可以使用 v-on 指令将事件监听器绑定到元素上。这个指令将事件名称作为参数，然后将事件监听器作为传入值。例如：

想要在按钮被单击时将 counter 的值增加 1，可以编写如下代码：

<button v-on:click="counter++">单击增加计数</button>
<h3>你已点击按钮 {{ counter }} 次</h3>

data() {
  return {
    counter: 0
  }
}

对于一些复杂的逻辑，可能一句话两句话说不清的。那么，你需要定义一个函数：当按钮被单击的时候调用该方法名对应的方法。

<!-- 注意这里没有括号() -->
<button v-on:click="increase">单击增加计数</button>
<h3>你已点击按钮 {{ counter }} 次</h3>

data () {
  return {
    counter: 0
  }
},
methods: {
  increase(event) {
    this.counter++; // `this` 在方法里指向当前 Vue 实例
    if (event) {    // `event` 是原生 DOM 事件
      console.info(event.target.tagName)
    }
  }

也可以用 JavaScript 直接调用方法

vm.increase() // => 'Hello Vue.js!'

使用单独的方法时，事件对象会作为第一个参数传入。

这里如果不注意 v-on 中的方法调用的写法（有无括号），会出现一个事件处理方法中 $event 的值为 undefined 的问题。关于这个问题的由来和解决方案，我们在《专项问题》详细说明、展示。

和 v-bind 指令类似，v-on 指令同样有一个简写方式：可以将 v-on:click 简写为 @click 。例如：

<button @click="increase">单击增加计数</button>