Vue events

   Click me
   
{{counter}}

example 1

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

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

example 2

   Click me
   
{{counter}}
   
Coordinates: {{X}}/{{Y}}

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

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

   Click me
   
{{counter}}
   
Coordinates: {{X}}/{{Y}}

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;
    }
  }
});