事件修飾符：
- .stop 阻止冒泡
- .prevent 阻止預設事件
- .capture 添加事件偵聽器時使用事件捕獲模式
- .self 隻當事件在該元素本身（比如不是子元素）觸發時觸發回調
- .once 事件隻觸發一次
vue官網上指出：
在事件處理程式中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在方法中輕松實作這點，但更好的方式是：方法隻有純粹的資料邏輯，而不是去處理 DOM 事件細節。
為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符。之前提過，修飾符是由點開頭的指令字尾來表示的。
event.preventdefault():阻止預設事件發生，例如：a标簽預設會重新整理，表單的送出。
event.stopPropagation()：終止事件在傳播過程的捕獲、目标處理或起泡階段進一步傳播。調用該方法後，該節點上處理該事件的處理程式将被調用，事件不再被分派到其他節點。即不會再産生捕獲和冒泡事件。
如圖所示：嵌套div，每一個div都有click事件，點選目标事件，先走捕獲->目标->冒泡 即捕獲：從外到内依次執行click事件，冒泡：從内到外依次執行click事件
vue事件修飾符：
(1).stop // 阻止事件繼續傳播 即阻止它的捕獲和冒泡過程
執行個體：如下點選内部點選，阻止了冒泡過程，即隻執行tz這個方法，如果不加.stop，講先執行方法，後執行gett方法。即通過了冒泡這個過程。
<div v-on:click="gett">外部點選
<div v-on:click.stop="tz">内部點選</div>
</div> （2）.prevent //阻止預設事件發生 即event.preventdefault():
執行個體： 阻止了a标簽的預設重新整理
<a href="" v-on:click.prevent>點選</a> （3）.capture // 添加事件監聽器時使用事件捕獲模式，即在捕獲模式下觸發
執行個體：在點選最裡層的點選6時，gett方法先執行，因為gett方法在捕獲模式執行的，先與冒泡事件。下列執行順序 geet->set->tz ,因為後倆個還是冒泡模式下觸發的事件。
<div v-on:click.capture="gett">外部點選5
<div v-on:click="tz">内部點選5
<div v-on:click="set">點選6</div>
</div>
</div> （4）.self //目前元素自身時觸發處理函數時才會觸發函數，原理：是根據event.target确定是否目前元素本身，來決定是否觸發的事件/函數
執行個體：如果點選内部點選2，冒泡不會執行gett方法，因為event.target指的是内部點選2的dom元素，不是外部點選1的，是以不會觸發自己的點選事件
<div v-on:click.self="gett">外部點選1
<div v-on:click="tz">内部點選2</div>
</div> <div v-on:click.once="tz">once</div> <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<div id="app">
<button v-on:click="gett" >點選</button>
<input type="text" v-on:keyup.13="gett" />
<div v-on:click="gett">外部點選
<div v-on:click.stop="tz">内部點選</div>
</div>
<a href="" v-on:click.prevent>dsfs</a>
<div v-on:click.self="gett">外部點選1
<div v-on:click="tz">内部點選2</div>
</div>
<div v-on:click.capture="gett">外部點選5
<div v-on:click="tz">内部點選5
<div v-on:click="set">點選6</div>
</div>
</div>
<div v-on:click.once="tz">once</div>
</div>
<div id='a'>外部點選3
<div id='b'>内部點選4</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/vue.js"></script>
<script type="text/javascript">
mui.init()
</script>
<script type="application/javascript">
var app = new Vue({
el: '#app',
data: {
name:'張三'
},
methods:{
gett:function(e){
alert("111");
console.log(e.target);
this.name='李四';
},
tz:function(e){
console.log(e.target);
alert(222)
},
set:function(e){
console.log(e.target);
alert(333)
}
}
})
document.getElementById('a').addEventListener('click',function(e){
console.log(e.target);
alert('aaaa')
},true)
document.getElementById('b').addEventListener('click',function(e){
console.log(e.target);
alert('bbbb')
},true)
</script>
</body>
</html> ![Java小案例——随機數猜測随機數猜測[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)