vue事件修饰符

1.阻止事件的默认行为 @click.prevent
在事件绑定的时候 加上prevent 或者在事件调用的时候加preventDefault

    <form action="/abc" @click.prevent="handleClick">
      <input type="submit" />
    </form>
    handleClick(e) {
        // code...
        e.preventDefault()
      }

2. 阻止事件向外冒泡 @click.stop
3. 当点击的元素和触发事件的元素一致时才执行(e.target==e.currentTarget) @click.self
4. 事件只执行一次,再次点击不会触发 @click.once
5. 按照事件捕获的方式执行(一般情况下是按照冒泡的顺序执行的)。@click.capture。由外到内
   如果不加capture修饰符,执行顺序是先弹出 ‘clickInner’,后弹出‘clickOuter’。 由内到外

    <div @click.capture="clickOuter">
      <div @click.capture="clickInner">
        hello world
      </div>
    </div>
    clickOuter() {
        alert('clickOuter');
      },
      clickInner() {
        alert('clickInner');
      }

补充
键盘修饰符
@keydown.enter。当按下回车键才执行keydown绑定的函数

系统修饰符
和键盘修饰符很像
@keydown.ctrl,@keydown.alt,@keydown.shift,@keydown.meta。当同时按下对应的键和键盘上的其他键才执行keydown绑定的函数

鼠标按键的修饰符
@click.left(鼠标左键),@click…middle(鼠标中键),@click…right(鼠标右键)。当点击鼠标对应的键才执行click绑定的函数