Vue方法與事件處理的問題

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

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!'

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

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 模式 -->
<p v-on:click.capture="doThis">...</p>

<!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回調 -->
<p v-on:click.self="doThat">...</p>

<!-- 只有在 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