事件修饰符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#passive{
width: 100px;
height: 100px;
background-color: #00FFFF;
overflow: auto;
}
#passive ul {
width: 100px;
height: 300px;
background-color: #5F9EA0;
}
#passive ul li {
margin-top: 50px;
}
</style>
<!--
事件修饰符：
prevent 阻止默认行为
stop 阻止事件冒泡
once 事件只触发一次
capture 事件冒泡后更改顺序
self 只有event.target是元素时才触发事件（阻止冒泡）
scroll 滚动到底不在滚动
wheel 滚动到底数据会继续滚动
passive 当触发事件后，优先执行该功能，立即执行
-->
<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
<!-- 阻止标签默认行为 -->
<div id="Modifier">
<a href="http://baidu.com" @click.prevent='showInfo'>点我，弹出alert弹窗</a>
<hr>
<div id="stop" @click="showInfo">
<button @click.stop="showInfo">点击我，弹出alert：stop</button>
</div>
<hr>
<div id="once" @click.once="showInfo">
<button @click.once="showInfo">点击我，弹出alert：once</button>
</div>
<hr>
<div id="capture" @click.capture="showInfo">
<button @click="showInfo1">点击我，弹出alert：capture</button>
</div>
<hr>
<div id="self" @click.self="showInfo2">
<button @click="showInfo2">点击我，弹出alert：self</button>
</div>
<div id="passive">
<ul @wheel.passive="showInfo3">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</head>
<body>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el : "#Modifier",
//el : 'a',
data:{
showInfo(event){
alert('111')
},
showInfo1(){
alert('222')
},
showInfo2(e1){
console.log(e1.target)
},
showInfo3(){
for(var i = 0 ; i<100000 ; i++){
console.log('@');
}
}
},
})
</script>
</body>
</html>
