vue-事件修饰

1.阻止冒泡事件

<template>
  <div  @click.self="onOutClick">
    <div  @click="onInnerClick">
       div
    </div>
  </div>
</template>

<script>

  export default {
    data() {
      return {

      };
    },
    methods: {
      onOutClick(){
         console.log('外面的div');
      },
      onInnerClick(){
        console.log('里面的div');
      },
    },
  }
</script>
<style scoped>

</style>

2.取消a标签默认事件

<template>
   <a @click.prevent="linkClick" href="http://www.baidu.com">链接</a>
</template>

<script>

  export default {
    data() {
      return {

      };
    },
    methods: {
      linkClick(){
         console.log('linkClick');
      }
    },
  }
</script>
<style scoped>

</style>

3.只允许按钮被点击一次

<template>
   <p @click.once="linkClick">链接</p>
</template>

<script>

  export default {
    data() {
      return {

      };
    },
    methods: {
      linkClick(){
         console.log('linkClick');
      }
    },
  }
</script>
<style scoped>

</style>