# 放在事件后的
@click.once='函数'
.stop 只处理自己的事件，不再冒泡给父标签（阻止事件冒泡）
.self 只处理自己的事件，子控件冒泡的事件不处理
.prevent 阻止a链接的跳转
.once 事件只会触发一次（适用于抽奖页面）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1>点击子标签，父标签的事件也触发：事件冒泡</h1>
<h2>阻止事件冒泡：点子标签，父标签不触发 stop</h2>
<ul @click="handleUl">
<!-- 阻止冒泡-->
<li @click.stop="handleLi">111111</li>
<!-- 没阻止冒泡-->
<li @click="handleLi">222222</li>
</ul>
<h1>点击子标签，父标签的事件也触发：事件冒泡</h1>
<h2>子标签的冒泡不处理：父标签写self，父标签只处理自己的事件，冒泡的事件不管</h2>
<ul @click.self="handleUl">
<!-- 阻止冒泡-->
<li @click="handleLi">111111</li>
<!-- 没阻止冒泡-->
<li @click="handleLi">222222</li>
</ul>
<h1>prevent 阻止a链接的跳转</h1>
<a href="http://www.aaa.top" @click.prevent="handleA">aaaaaa</a>
<h1>once 只执行一次</h1>
<button @click.once="handleButton">点我</button>
</div>
</body>
<script>
const app = Vue.createApp({
data() {
return {}
},
methods: {
handleLi(){
console.log('li')
},
handleUl(){
console.log('Ul')
},
handleA(){
console.log('a')
},
handleButton(){
console.log('button')
}
}})
app.mount("#app")
</script>
</html>
