v-on

修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

v-on 与 v-model，会看到更多修饰符的使用。

  增加 1
  
这个按钮被点击了 {{ counter }} 次。

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

内联处理器里的方法
除了直接绑定到一个方法，也可以用内联 JavaScript 语句：

Say hi
Say what


new Vue({
el: '#example-3',
methods: {
say: function (message) {
alert(message)
}
}
})

事件修饰符
在事件处理程序中调用 event.preventDefault()
或 event.stopPropagation()
是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on
提供了 事件修饰符。通过由点 (.) 表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
.once

...

...

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 @click.prevent.self
会阻止所有的点击，而 @click.self.prevent
只会阻止元素上的点击。