vue的事件修饰符和冒泡事件的处理

<template>
  <div id="app" @click="functest">
    <span>第一个span标签</span>
    <p>这是第一个p标签</p>
    <span>第二个span</span>


    <!--1、" .stop “： 阻止冒泡，具体事例，在点击【戳他】按钮后，触发 input对应的函数 ‘btnHandler’，该函数执行完成后，会触发div的函数’ divHandler '，为了防止此类情况的发生，需要在Input的点击事件上添加” .stop "。-->


    <!--<div class="inner" @click.stop="divHandler3">-->
      <!--我是第三个-->
    <!--</div>-->

    <!--<div class="inner" @click="divHandler">-->
      <!--<div class="inner" @click.stop="divHandler2">-->
        <!--我是第二个-->
        <!--</div>-->
      <!--我是最外层事件-->
      <!--&lt;!&ndash; 使用 .stop 阻止冒泡 &ndash;&gt;-->
      <!--<div class="button" value="戳他" @click.stop="btnHandler"> 戳他</div>-->
    <!--</div>-->

    <!-- 2、" .prevent " : 使用 " .prevent " 阻止默认行为，在超链接中的点击事件中使用该属性，超链接不会跳转而只执行函数对应的内容。 -->
    <a href="http://www.baidu.com" @click.prevent="linkClick">去百度</a>

    <!--" .capture " ：实现捕获触发事件的机制，在点击【戳他】按钮后，先执行div标签的函数，再执行 【戳他】按钮，对应的函数。-->
    <!-- 使用 .capture 实现捕获触发事件的机制 -->
    <!--<div class="inner" @click.capture="divHandler">-->
      <!--&lt;!&ndash; 从外到里 &ndash;&gt;-->
      <!--<div type="button" value="戳他" @click.stop="captureHandler">戳他</div>-->
    <!--</div>-->


    <!--" .self "： 只有点击当前元素的时候，才会触发事件处理函数。点击【戳他】按钮，只执行【戳他】按钮对应的函数，而不会冒泡执行div中的函数，div中的函数只有点击时才触发。-->
    <!--<div @click="divHandlerself2">-->
    <!--<div class="inner" @click.stop="divHandlerself">-->
      <!--sds-->
      <!--<input type="button" value="戳他self" @click.stop="btnHandlerself">-->
    <!--</div>-->
    <!--</div>-->
    <!--" .once ": 只触发一次事件处理函数-->
    <!--<div @click="divHandlerself2">-->
      <!--<div class="inner" @click.stop="divHandlerself">-->
        <!--sds-->
        <!--<input type="button" value="戳他self" @click.stop="btnHandlerself">-->
      <!--</div>-->
      <!--&lt;!&ndash;" .stop “和” .self “的区别：” .self “只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为。” .stop "会阻止所有的冒泡的行为。&ndash;&gt;-->
    <!--</div>-->
    <!---->

    <div class="outer" @click="div2Handler">

      <div class="inner" @click="divHandler55">divHandler55</div>
      <div class="inner" @click.self="divHandler33">divHandler33

        <input type="button" value="戳他" @click="btnHandler">
      </div>
    </div>


  </div>
</template>

<script>


export default {
  name: 'App',
  methods:{

      divHandler55(){
          console.log('divHandler55')
      },
      functest(){
          console.log('functest')
      },

      divHandler33(){
          console.log('divHandler333333')
      },

      div2Handler(){
          console.log('divHandlerself222222')
      },

      divHandlerself2(){
          console.log('divHandlerself2')
      },
      divHandlerself(){
          console.log('divHandlerself')
      },

      btnHandlerself(){
          console.log('btnHandlerself')
      },

      captureHandler(){
          console.log('captureHandler')
      },
      linkClick(){
          console.log('linkClick')
      },

      divHandler3(){
          console.log("divHandler3")
      },

      divHandler2(){
          console.log("divHandler2")
      },

      divHandler(){
         console.log("divHandler")
       },
      btnHandler(){
          console.log("btnHandler")
      }
  }
}


</script>

<style>
  /*span:nth-of-type(1){*/
    /*color: cyan*/
  /*}*/
  span:nth-child(3){
    color: cyan
  }
</style>