vue 事件修饰符

• .stop
• .prevent
• .capture
• .self
• .once   
1 .stop  阻止冒泡修饰符

   <div @click="parent">parent
          <div @click.stop="child">child
              <div @click="grandson.stop">grandson</div>
          </div>
      </div>

  
  

   parent(){ console.log("parent")},
    child(){console.log("child")},
  grandson(e){console.log("grandson")}

  点击grandson，不加stop，控制台会出现这样的信息，
• 


• 2.capture  捕获

•  <div @click.capture="parent">parent
          <div @click="child">child
              <div @click="grandson">grandson</div>
          </div>
      </div>

  
  
  
• 点击grandson，控制台会出现这样的信息，

• 
#####################################################这里是阻止事件传播


   <div @click.capture.stop="parent">parent
          <div @click="child">child
              <div @click="grandson">grandson</div>
          </div>
      </div>

• 3.once  只执行一次

•  <div @click="parent">parent
          <div @click.once="child">child
              <div @click="grandson">grandson</div>
          </div>
      </div>

  
  这里第一次点击grandson三个都出现，但点击第二次的时候child就不出现了
  
  4.self  只点自己身上才运行
  
  

   <div @click="parent">parent
          <div @click.self="child">child
              <div @click="grandson">grandson</div>
          </div>
      </div>

  5 .prevent  阻止元素发生默认行为
  这个代码只会输出parent，不会发生跳转，从而阻止浏览器的默认行为
  

  <a href="www.baidu.com" @click.prevent="parent"></a>