在Vue中，事件修飾符處理了許多DOM事件的細節，讓我們不再需要花大量的時間去處理這些煩惱的事情，而能有更多的精力專注於程序的邏輯處理。 （學習影片分享：vue影片教學）
在Vue中事件修飾符主要有：
，防止事件冒泡
，防止執行預設的行為（如果事件可取消，則取消該事件，而不停止事件的進一步傳播）
##：只會觸發自己範圍內的事件，不包含子元素.once：只會觸發一次
<!-- HTML -->
<div>
<div>
<div>
<button>点击我(^_^)</button>
</div>
</div>
<p>{{ message }}</p>
</div>
let app = new Vue({
el: '#app',
data () {
return {
message: '测试冒泡事件'
}
},
methods: {
inner: function () {
this.message = 'inner： 这是最里面的Button'
},
middle: function () {
this.message = 'middle: 这是中间的Div'
},
outer: function () {
this.message = 'outer: 这是外面的Div'
}
}
})
#整個事件示意圖如下：
.stop相當於在每個方法中呼叫了等同於event.stopPropagation()，點擊子節點不會捕獲到父節點的事件
<!-- HTML --> <div id="app"> <div class="outeer" @click.stop="outer"> <div class="middle" @click.stop="middle"> <button @click.stop="inner">点击我(^_^)</button> </div> </div> </div>
這個時候，點擊button時，並不會捕獲到div.middle和div.outer上的事件： 
.prevent等同於JavaScript的event.preventDefault()
event.preventDefault()來防止瀏覽器的網址中出現#。在Vue中，可以使用事件修飾符.prevent來取消預設事件。這時候，點擊連結之後，瀏覽器的網址中再也不會出現#。
標籤，當使用者點擊時，通常會在瀏覽器的網址列出<div id="app">
<a href="#" @click.prevent="prompt">点击我(^_^)</a>
<p>{{ message }}</p>
</div>
let app = new Vue({
el: '#app',
data () {
return {
message: '我是一个文本信息'
}
},
methods: {
prompt: function (e) {
this.message = location.href
}
}
})
.capture
修飾符和.stop
剛好相反。
<!-- HTML -->
<div id="app">
<div class="outeer" @click.capture="outer">
<div class="middle" @click.capture="middle">
<button @click.capture="inner">点击我(^_^)</button>
</div>
</div>
<p>{{ message }}</p>
</div>
let app = new Vue({
el: '#app',
data () {
return {
message: '事件捕获'
}
},
methods: {
inner: function () {
this.message = 'inner： 这是最里面的Button'
alert(this.message)
},
middle: function () {
this.message = 'middle: 这是中间的Div'
alert(this.message)
},
outer: function () {
this.message = 'outer: 这是外面的Div'
alert(this.message)
}
}
})看到的行為如下： 
<!-- HTML -->
<div id="app">
<div class="outer" @click.self="outer">
<div class="middle" @click.self="middle">
<button @click="inner">点击我(^_^)</button>
</div>
</div>
<p>{{ message }}</p>
</div>
let app = new Vue({
el: '#app',
data () {
return {
message: '修饰符：.self'
}
},
methods: {
inner: function () {
this.message = 'inner： 这是最里面的Button'
alert(this.message)
},
middle: function () {
this.message = 'middle: 这是中间的Div'
alert(this.message)
},
outer: function () {
this.message = 'outer: 这是外面的Div'
alert(this.message)
}
}
})div.outer、div.middle和button
.once 只執行一次點擊
還記得我們以前使用Vue寫了一個計數器，點擊
就會加1，不斷點擊就會不斷累加，反則點擊
######如果我們在###@click###事件上新增###.once###修飾符，只要點擊按鈕只會執行一次。 ######<div id="app"> <button v-on:click="increase">+</button> <span>{{ count }}</span> <button v-on:click="reduce">-</button> </div> let app = new Vue({ el: '#app', methods: { increase: function() { this.count++ }, reduce: function() { this.count-- } }, data: { count: 0 } })登入後複製###############示範demo位址：https://codepen.io/airen/pen/dVQoRN####<div id="app"> <button @click.once="increase">+</button> <span>{{ count }}</span> <button @click.once="decrease">-</button> </div>登入後複製
在JavaScript事件中除了前面所说的事件，还有键盘事件，也经常需要监测常见的键值。在Vue中允许v-on在监听键盘事件时添加关键修饰符。记住所有的keyCode比较困难，所以Vue为最常用的键盘事件提供了别名：
.enter：回车键.tab：制表键.delete：含delete和backspace键.esc：返回键.space: 空格键.up：向上键.down：向下键.left：向左键.right：向右键<div id="app">
<button @keyup.enter="enter" @keyup.tab="tab" @keyup.delete="delete1" @keyup.esc="esc" @keyup.space="space" @keyup.up="up" @keyup.down="down" @keyup.left="left" @keyup.right="right">{{ message }}</button>
<p>{{ message }}</p>
</div>
let app = new Vue({
el: '#app',
data () {
return {
message: '将光标置于按钮上后，按下键盘上不同的按键，会有不同的效果'
}
},
methods: {
enter: function (){
this.message = '你按了回车键：enter'
},
tab: function (){
this.message = '你按了tab键: tab'
},
delete1: function (){
this.message = '你按了删除键: delete'
},
esc: function (){
this.message = '你按了取消键: esc'
},
space: function (){
this.message = '你按了空格键：space'
},
up: function (){
this.message = '你按了向上键：up'
},
down: function (){
this.message = '你按了向下键：down'
},
left: function (){
this.message = '你按了向左键：left'
},
right: function (){
this.message = '你按了向右键：right'
}
}
})当你把鼠标移动按钮上，然后按下不同的键盘，将会监听到对应的键盘事件：
演示demo地址：：https://codepen.io/airen/pen/RLqPYx
鼠标修饰符用来限制处理程序监听特定的滑鼠按键。常见的有：
.left：鼠标左键.middle：鼠标中间滚轮.right：鼠标右键可以用如下修饰符开启鼠标或键盘事件监听，使在按键按下时发生响应：
.ctrl.alt.shift.meta在Vue中可以通过config.keyCodes自定义按键修饰符别名。例如，由于预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法，出现alert。
<!-- HTML -->
<div id="app">
<input type="text" v-on:keydown.f5="prompt()">
</div>
Vue.config.keyCodes.f5 = 116;
let app = new Vue({
el: '#app',
methods: {
prompt: function() {
alert('我是 F5！');
}
}
});在Vue中，使用v-on来给元素绑定事件，而为了更好的处理逻辑方面的事物，Vue提供了一个methods。在methods中定义一些方法，这些方法可以帮助我们处理一些逻辑方面的事情。而在这篇文章中，我们主要介绍了一些事件的修饰符，比如常见的阻止事件冒泡，键盘修饰符等。除此之外，还提供了config.keyCodes提供自定义按键修饰符别名。
以上是實例詳解Vue中的事件修飾符的詳細內容。更多資訊請關注PHP中文網其他相關文章！
