vue 事件修饰符

在处理事件时调用event.preventDefault()或event.stopPropagation()是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好
为解决这一问题，Vue 为 v-on 提供了事件修饰符，常用有以下几个:

.stop  .prevent .once

具体参考：事件处理 | Vue.js (vuejs.org)https://cn.vuejs.org/guide/essentials/event-handling.html#event-modifiers

阻止默认事件 

通过.prevent来阻止事件发生

<template>
  <div>
    <p @click.prevent="clickHandle"><a href="https://mp.youkuaiyun.com/">点击进入csdn官网</a></p>
  </div>
</template>

<script>
export default{
  data(){
    return{
      result:["a","b","c"]
    }
  },
  //在vue中所有的方法都将写在methods函数中
  methods:{
    clickHandle(){
      console.log("事件阻止");
      
    }
  }
}
</script>

点击链接没有进行跳转，控制台输出”事件阻止“。

 

阻止事件冒泡 

使用.stop 来阻止事件冒泡

<template>
  <div @click="clickDiv">
    <p @click.stop="clickHandle">点击进入</p>
  </div>
</template>

<script>
export default{
  data(){
    return{
      result:["a","b","c"]
    }
  },
  //在vue中所有的方法都将写在methods函数中
  methods:{
    clickHandle(){
      console.log("p");
    },
    clickDiv(){
      console.log("div")
    }
  }
}
</script>

点击控制台不会同时输出p和div ,只会输出p