v-on

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

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

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

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

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

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
只会阻止元素上的点击。

你可能感兴趣的:(v-on)