vue事件修飾符
阿新 • • 發佈：2020-08-20
1、冒泡與捕獲：
冒泡：由內向外觸發；捕獲：由外向內觸發
2、修飾符
（1）.stop修飾符：阻止事件冒牌，不讓他向外觸發
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id ="
結果：不新增.stop會輸出click2,click1，新增.stop後只顯示click2
（2）.capture 捕獲事件，點選子節點，會從外向內觸發
輸出結果順序變成：點選測試2，輸出click1,click2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id ="element1">
<div @click="test1">
<span>測試1</span>
<div @click.stop="test2">
<span>測試2</span>
</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#element1",
// data:{
// },
methods:{
test1:function(){
console.log("click1");
},
test2:function(){
console.log("click2");
}
}
})
</script>
</body>
</html>
（3）.self只會觸發自己範圍內的事件，不會包含子元素
（4）.once，只要點選按鈕只會執行一次
結果：無論點選多少次click2，只會在第一次點選輸出 click2 ,click1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id ="element1">
<div @click.once="test1">
<span>測試1</span>
<div @click.once="test2">
<span>測試2</span>
</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#element1",
// data:{
// },
methods:{
test1:function(){
console.log("click1");
},
test2:function(){
console.log("click2");
}
}
})
</script>
</body>
</html>