監聽事件
可以用
v-on
指令監聽 DOM 事件，并在觸發時運作一些 JavaScript 代碼。
示例：
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
結果：
事件處理方法
然而許多事件處理邏輯會更為複雜，是以直接把 JavaScript 代碼寫在
v-on
指令中是不可行的。是以
v-on
還可以接收一個需要調用的方法名稱。
示例：
<div id="example-2">
<!-- `greet` 是在下面定義的方法名 -->
<button v-on:click="greet">Greet</button>
</div>
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 對象中定義方法
methods: {
greet: function (event) {
// `this` 在方法裡指向目前 Vue 執行個體
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
// 也可以用 JavaScript 直接調用方法
example2.greet() // => 'Hello Vue.js!'
事件修飾符
在事件處理程式中調用
event.preventDefault()
或
event.stopPropagation()
是非常常見的需求。盡管我們可以在方法中輕松實作這點，但更好的方式是：方法隻有純粹的資料邏輯，而不是去處理 DOM 事件細節。
為了解決這個問題，Vue.js 為
v-on
提供了事件修飾符。之前提過，修飾符是由點開頭的指令字尾來表示的。
- .stop
- .prevent
- .capture
- .self
- .once
- .passive
<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>
<!-- 送出事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 隻有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發的事件先在此處理，然後才交由内部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 隻當在 event.target 是目前元素自身時觸發處理函數 -->
<!-- 即事件不是從内部元素觸發的 -->
<div v-on:click.self="doThat">...</div>
按鍵修飾符
在監聽鍵盤事件時，我們經常需要檢查常見的鍵值。Vue 允許為
v-on
在監聽鍵盤事件時添加按鍵修飾符：
<!-- 隻有在 `keyCode` 是 13 時調用 `vm.submit()` -->
<input v-on:keyup.13="submit">
記住所有的
keyCode
比較困難，是以 Vue 為最常用的按鍵提供了别名：
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 縮寫文法 -->
<input @keyup.enter="submit">
全部的按鍵别名：
- .enter
- .tab
- .delete (捕獲“删除”和“倒退”鍵)
- .esc
- .space
- .up
- .down
- .left
- .right
- .ctrl
- .alt
- .shift
- .meta
- .left
- .right
- .middle
可以通過全局 config.keyCodes 對象自定義按鍵修飾符别名：
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
完整例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>監聽事件</title>
</head>
<body>
<h3>監聽事件</h3>
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
<!-- `greet` 是在下面定義的方法名 -->
<div>
<button v-on:click="greet">Greet</button>
</div>
<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis">測試一下</a>
<div>
<!-- 同上 -->
<input v-on:keyup.enter="submit">回車試試
</div>
</div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var example1 = new Vue({
el : '#example-1',
data : {
counter : 0,
name : 'Vue.js'
},
methods : {
greet : function(event) {
// `this` 在方法裡指向目前 Vue 執行個體
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
},
doThis : function() {
alert('測試')
},
submit : function() {
alert('測試222')
}
}
})
</script>
</html>
測試結果：
