修飾符（Modifiers）是以半角句號 . 指明的特殊后綴纠屋，用于指出一個(gè)指令應(yīng)該以特殊方式綁定肿孵。例如灶壶，.prevent 修飾符告訴 v-on 指令對于觸發(fā)的事件調(diào)用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>
v-on 與 v-model灾茁，會看到更多修飾符的使用牧抽。
<div id="example-1">
<button v-on:click="counter += 1">增加 1</button>
<p>這個(gè)按鈕被點(diǎn)擊了 {{ counter }} 次构回。</p>
</div>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
內(nèi)聯(lián)處理器里的方法
除了直接綁定到一個(gè)方法夏块，也可以用內(nèi)聯(lián) JavaScript 語句：
<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)
}
}
})
事件修飾符
在事件處理程序中調(diào)用 event.preventDefault()
或 event.stopPropagation()
是非常常見的需求。盡管我們可以在 methods 中輕松實(shí)現(xiàn)這點(diǎn)纤掸，但更好的方式是：methods 只有純粹的數(shù)據(jù)邏輯脐供，而不是去處理 DOM 事件細(xì)節(jié)。
為了解決這個(gè)問題借跪，Vue.js 為 v-on
提供了 事件修飾符政己。通過由點(diǎn) (.) 表示的指令后綴來調(diào)用修飾符。
.stop
.prevent
.capture
.self
.once
<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>
<div v-on:click.self="doThat">...</div>
使用修飾符時(shí)掏愁，順序很重要歇由；相應(yīng)的代碼會以同樣的順序產(chǎn)生。因此果港，用 @click.prevent.self
會阻止所有的點(diǎn)擊沦泌，而 @click.self.prevent
只會阻止元素上的點(diǎn)擊。
