<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
   <button v-on:click="increase">Click me</button>
   <p>{{counter}}</p>
</div>

example 1

new Vue({
  el: '#app',
  data: {
    counter: 0
    },
  methods: {
    increase: function() {
        this.counter++
    }
  }
});

这里我们给button增加了一个v-on directive，后面跟的参数click代表一个事件，可以是任何和按钮有关的事件，等号右侧的值是事件发生后要调用的函数。

example 2

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
   <button v-on:click="increase">Click me</button>
   <p>{{counter}}</p>
   <p v-on:mousemove="updateCoordinate">Coordinates: {{X}}/{{Y}}</p>
</div>

new Vue({
  el: '#app',
  data: {
    counter: 0,
    X: 0,
    Y: 0
    },
  methods: {
    increase: function() {
        this.counter++
    },
    updateCoordinate: function() {
        this.X = event.clientX;
      this.Y = event.clientY;
    }
  }
});

这里我们可以发现，mousemove这个event还自动的在调用的函数里加入event参数，里面包含光标的坐标信息。

example 3

那如果想给这些事件的响应函数里传入自定义的参数呢？

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
   <button v-on:click="increase(2, $event)">Click me</button>
   <p>{{counter}}</p>
   <p v-on:mousemove="updateCoordinate">Coordinates: {{X}}/{{Y}}</p>
</div>

new Vue({
  el: '#app',
  data: {
    counter: 0,
    X: 0,
    Y: 0
    },
  methods: {
    increase: function(step, event) {
        this.counter = this.counter+2
    },
    updateCoordinate: function(event) {
        this.X = event.clientX;
      this.Y = event.clientY;
    }
  }
});