監(jiān)聽事件
可以用
v-on指令監(jiān)聽DOM事件酝掩，并在觸發(fā)運行一些js代碼。
示例：
<div id="example-1">
//v-on 可以直接執(zhí)行一段代碼或者一個方法
<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
}
})
事件處理方法
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` 在方法里指向當(dāng)前 Vue 實例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
// 也可以用 JavaScript 直接調(diào)用方法
example2.greet() // => 'Hello Vue.js!'
內(nèi)聯(lián)處理器中的方法
除了直接綁定到一個方法口四，也可以在內(nèi)聯(lián)js語句中調(diào)用方法：
<div id="example-3">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
new Vue({
el: '#example-3',
methods: {
say: function (message) {
alert(message)
}
}
})
又是也需要在內(nèi)聯(lián)語句處理器中訪問原始的DOM事件羊异。可以用特殊變量$event把它傳入方法：
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
//事件
methods: {
warn: function (message, event) {
// 現(xiàn)在我們可以訪問原生事件對象
if (event) {
event.preventDefault()
}
alert(message)
}
}
事件修飾符
在事件處理程序中調(diào)用event.preventDefault()或event.stopPropagation() 是很常見的需求读慎。（盡管我們可以在方法中輕松實現(xiàn)這點，但更好的方式是：方法只有純粹的數(shù)據(jù)邏輯槐雾，而不是去處理DOM事件細節(jié)夭委。）
為了解決這個問題，Vue.js為v-on提供了事件修飾符募强。修飾符是由點開頭的指令后綴來表示的株灸。
-
.stop阻止事件繼續(xù)向下傳遞 -
.prevent提交事件不在重載頁面 -
.capture當(dāng)元素發(fā)生冒泡時，先觸發(fā)帶有該修飾符的元素 -
.self跳過冒泡事件和捕獲事件擎值，只有直接作用在該元素上的事件才可以執(zhí)行慌烧。 -
.once只執(zhí)行一次 .passive
<!-- 阻止單擊事件繼續(xù)傳播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件監(jiān)聽器時使用事件捕獲模式 -->
<!-- 即內(nèi)部元素觸發(fā)的事件先在此處理，然后才交由內(nèi)部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>
使用修飾符時幅恋，順序很重要杏死，相應(yīng)的代碼會以同樣的順序產(chǎn)生。因此捆交，用
v-on:click.prevent.self會阻止所有的點擊淑翼，而v-on:click.self.prevent只會阻止對元素自身的點擊。
Vue還對應(yīng)addEventListener中的 passive選項提供了 .passive修飾符品追。
<!-- 滾動事件的默認行為 (即滾動行為) 將會立即觸發(fā) -->
<!-- 而不會等待 `onScroll` 完成 -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>
這個.passive修飾符尤其能夠提升移動端的性能玄括。
不要把
.passive和.prevent一起使用，因為.prevent將會被忽略肉瓦，而且瀏覽器可能會有一個警告遭京。請記住：.passive會告訴瀏覽器你 不想阻止事件的默認行為泞莉。
按鍵修飾符
在監(jiān)聽鍵盤事件時哪雕，經(jīng)常需要檢查詳細的按鍵。Vue允許為v-on在監(jiān)聽鍵盤事件時添加按鍵的修飾符：
<!-- 只有在 `key` 是 `Enter` 時調(diào)用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
你可以直接將keyboardEvent.key暴露的任意有效按鍵名轉(zhuǎn)換為kebab-case來作為修飾符鲫趁。
<input v-on:keyup.page-down="onPageDown">
在上述示例中斯嚎、處理函數(shù)只會在$event.key等于PageDown時被調(diào)用。
按鍵碼
keycode的事件用法并可能不會被最新的瀏覽器支持挨厚。
使用keycode屬性也是允許的：
<input v-on:keyup.13="submit">
為了在必要的情況下支持就瀏覽器堡僻，Vue提供了絕大多數(shù)常用的按鍵碼別名：
.enter.tab-
.delete(捕獲刪除和退格鍵) .esc.space.up.down.left.right
有一些按鍵（
.esc以及所有的方向鍵）在IE9中有所不同的key值，如果你想支持IE9疫剃，這些內(nèi)置別名應(yīng)該是首選钉疫。
你還可以通過全局config.keycodes對象自定義按鍵修飾符別名：
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
系統(tǒng)修飾鍵
2.1.0新增
可以用如下修飾符來實現(xiàn)僅在按下相應(yīng)按鍵時才觸發(fā)鼠標或者鍵盤事件的監(jiān)聽器。
.ctrl.alt.shift.meta
例如：
<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>
請注意修飾鍵與常規(guī)鍵不同巢价，在和
keyup事件一起用時牲阁，事件觸發(fā)時修飾鍵必須處于按下狀態(tài)固阁。換句話說，只有在按住ctrl的情況下釋放其他按鍵咨油，才能觸發(fā)keyup.ctrl您炉。而單單釋放ctrl也不會觸發(fā)事件。如果你想要這樣的行為役电，請為ctrl換用keycode:keyup.17赚爵。
.exact修飾符
.exact修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件。
<!-- 即使 Alt 或 Shift 被一同按下時也會觸發(fā) -->
<button v-on:click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的時候才觸發(fā) -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>
<!-- 沒有任何系統(tǒng)修飾符被按下的時候才觸發(fā) -->
<button v-on:click.exact="onClick">A</button>
鼠標按鍵修飾符
.left.right-
.middle
這些修飾符會限制處理函數(shù)僅響應(yīng)特定的鼠標按鈕法瑟。
