Vue事件修饰符

Vue提供了多种事件修饰符，用于简化事件处理逻辑。以下是Vue中常用的事件修饰符及其用途：

1. .stop
   • 阻止事件冒泡
   • 等同于JavaScript中的event.stopPropagation()

 <div class="one" @click="one">
           <div class="two" @click.stop="two">
               <div class="three" @click="three"></div>
           </div>
       </div>

2. .prevent
   • 阻止默认事件
   • 等同于JavaScript中的event.preventDefault()

<a href="http://www.baidu.com" @click.prevent.once="goTo">goTo</a>

3. .capture

   • 使用事件捕获模式
   • 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理

   <div class="one" @click="one">
            <div class="two" @click.capture="two">
                <div class="three" @click="three"></div>
            </div>
        </div>
   

4. .self

   • 只当事件在该元素本身（比如不是子元素）触发时触发回调

<div class="one" @click="one">
          <div class="two" @click.self.stop="two">
              <div class="three" @click="three"></div>
          </div>
      </div>

5. .once
   • 事件只触发一次

<div class="one" @click="one">
          <div class="two" @click="two">
              <div class="three" @click.stop.once="three"></div>
          </div>
      </div>

使用这些修饰符可以让你的代码更简洁，并且更容易理解事件处理的意图。