详解Vue 方法与事件处理器

<div id="example">
 <button v-on:click="greet">greet</button>
</div>

var vm = new vue({
 el: '#example',
 data: {
  name: 'vue.js'
 },
 // 在 `methods` 对象中定义方法
 methods: {
  greet: function (event) {
   // 方法内 `this` 指向 vm
   alert('hello ' + this.name + '!')
   // `event` 是原生 dom 事件
   alert(event.target.tagname)
  }
 }
})

// 也可以在 javascript 代码中调用方法
vm.greet() // -> 'hello vue.js!'

<div id="example-2">
 <button v-on:click="say('hi')">say hi</button>
 <button v-on:click="say('what')">say what</button>
</div>

new vue({
 el: '#example-2',
 methods: {
  say: function (msg) {
   alert(msg)
  }
 }
})

<button v-on:click="say('hello!', $event)">submit</button>

// ...
methods: {
 say: function (msg, event) {
  // 现在我们可以访问原生事件对象
  event.preventdefault()
 }
}

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="dothis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onsubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="dothat">

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件侦听器时使用 capture 模式 -->
<div v-on:click.capture="dothis">...</div>

<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="dothat">...</div>

<!-- 只有在 keycode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

<!-- 同上 -->
<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">

enter
tab
delete
esc
space
up
down
left
right

// 可以使用 @keyup.f1
vue.directive('on').keycodes.f1 = 112