vue提倡的是在方法中只有对数据的处理，所以提供了事件修饰符用于DOM的事件处理，常用的事件修饰符有以下几个:

统一的js

<script>
export default {
  methods:{
    divEven(){
      alert("我是div的事件");
    },
    aEven(){
      alert("我是a链接事件");
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

# 1. 第一种情况

  <!--第一种情况-->
  <div @click="divEven" style="border:1px #188eee solid;">
      <a href="#" @click="aEven">百度链接</a>
  </div>
1
2
3
4

# 2. stop的使用：阻止事件冒泡的发生

<!--stop的使用：阻止事件冒泡的发生-->
<div @click="divEven" style="border:1px #188eee solid;">
    <a href="#" @click.stop="aEven">百度链接</a>
</div>
1
2
3
4

# 3. prevent的使用：阻止默认事件的发生

<!--prevent的使用：阻止默认事件的发生-->
<div @click="divEven" style="border:1px #188eee solid;">
    <a href="#" @click.stop.prevent="aEven">百度链接</a>
</div>
1
2
3
4

# 4. self的使用：只有点击他本身时才去执行，点击他的子元素不去执行

<!--self的使用：只有点击他本身时才去执行，点击他的子元素不去执行-->
<div @click.self="divEven" style="border:1px #188eee solid;">
    <a href="#" @click.prevent="aEven">百度链接</a>
</div>
1
2
3
4

# 5. capture的使用：触发捕获事件()先执行大盒子的事件，起执行小盒子的事件

<!--capture的使用：触发捕获事件()先执行大盒子的事件，起执行小盒子的事件-->
<div @click.capture="divEven" style="border:1px #188eee solid;">
    <a href="#" @click.prevent="aEven">百度链接</a>
</div>
1
2
3
4

TOC