Vue - 事件

v-on 監聽事件

可以用 v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼。

v-on: 簡寫 @

<div id="app">
    <p>按鈕被點擊了 {{counter}} 次。</p> 
    <button v-on:click="counter += 1">add</button>   
</div>
<script>
new Vue({
    el: '#app',
    data: {
        counter: 0
    }
})
</script>

事件處理方法

然而許多事件處理邏輯會更為復雜，所以直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。因此 v-on 還可以接收一個需要調用的方法名稱。

所有方法都需要放到 methods 對象里面，再進行調用

<div id="app">
    <button v-on:click="greet">Greet</button>   
</div>
<script>
new Vue({
    el: '#app',
    data: {
        name: 'Vue.js'
    },
    methods: {
    	greet: function(){
    		console.log('Hello ' + this.name + ' !')
    	}
    }
})
</script>

內聯處理器中的方法

除了直接綁定到一個方法，也可以在內聯 JavaScript 語句中調用方法：

<div id="app">
    <button v-on:click="say('hello world ! ! ')">world</button>   
    <button v-on:click="say('helli xiaobai !')">xiaobai</button>   
</div>
<script>
new Vue({
    el: '#app',
    data: {
        name: 'Vue.js'
    },
    methods: {
    	say: function(e){
    		console.log(e)
    	}
    }
})
</script>

事件修飾符

.stop阻止事件冒泡
<a v-on:click.stop="doThis"></a>

.prevent阻止默認事件
<form v-on:submit.prevent="onSubmit"></form>

.capture時間捕獲（從上到下）
<div v-on:click.capture="doThis">...</div>

.self只在元素自身回調
<div v-on:click.self="doThat">...</div>

.once只觸發一次
<a v-on:click.once="doThis"></a>

滾動事件的默認行為 (即滾動行為) 將會立即觸發
而不會等待 `onScroll` 完成 
這其中包含 `event.preventDefault()` 的情況
<div v-on:scroll.passive="onScroll">...</div>

## 按鍵修飾符 在監聽鍵盤事件時，我們經常需要檢查常見的鍵值。Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符 ``` ```
### 按鍵別名 >.enter (“回車”鍵) >.tab (“TAB”鍵) >.delete (捕獲“刪除”和“退格”鍵) >.esc (“ESC”鍵) >.space (“空格”鍵) >.up (向上方向鍵) >.down (向下方向鍵) >.left (向左方向鍵) >.right (向右方向鍵)

當然，除了這些常用按鍵別名之外，Vue也提供了自定義按鍵別名的方法

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

### 組合鍵 組合按鍵不能單獨觸發事件，要與非組合按鍵一起才能觸發事件 > .ctrl > .alt > .shift > .meta ``` ```