vue中事件冒泡

当点击了子元素时，触发了子元素的事件的同时，触发了父元素。代码如下：

非常帅
{{num}}位女生着迷

</h1>
<span v-html="name"></span>
<button @click="num ++">点击</button>
<br>
<button @click="handleClick">点击</button>
<hr>
<input type="checkbox" v-model="lessions" value="Java">Java<br>
<input type="checkbox" v-model="lessions" value="python">python<br>
<input type="checkbox" v-model="lessions" value="IOS">IOS<br>

<h1>
    您已经购买以下列表:{{lessions.join(",")}}
</h1>
<div style="width: 100px;height: 100px;background-color: cornflowerblue" @click="print('div')">
    div
    <button @click="print('button')">点击</button>
</div>

结果如下：
阻止事件冒泡的方法：
使用@click.stop
代码如下：

非常帅
{{num}}位女生着迷

</h1>
<span v-html="name"></span>
<button @click="num ++">点击</button>
<br>
<button @click="handleClick">点击</button>
<hr>
<input type="checkbox" v-model="lessions" value="Java">Java<br>
<input type="checkbox" v-model="lessions" value="python">python<br>
<input type="checkbox" v-model="lessions" value="IOS">IOS<br>

<h1>
    您已经购买以下列表:{{lessions.join(",")}}
</h1>
<div style="width: 100px;height: 100px;background-color: cornflowerblue" @click.stop="print('div')">
    div
    <button @click.stop="print('button')">点击</button>
</div>