vue事件修饰符

详解

• .stop 阻止冒泡，相当于相当于js中的event.stopPropagation
  冒泡事件：父子组件都有点击事件，点击子组件，就会触发父组件上的点击事件

• .prevent 阻止默认事件，相当于js的event.preventDefault()，比如a标签点击跳转

• .capture 事件捕获 捕获事件：父子组件都有点击事件，点击子节点，就会触发从外至内 父节点->子节点的点击事件

• .self 只当在 event.target 是当前元素自身时触发处理函数，

• .once只触发一次

• 键盘修饰符 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
  .enter：回车键
  .tab：制表键
  .delete：含delete和backspace键
  .esc：返回键
  .space: 空格键
  .up：向上键
  .down：向下键
  .left：向左键
  .right：向右键

• .鼠标修饰符
  .left：鼠标左键
  .middle：鼠标中间滚轮
  .right：鼠标右键

代码展示

<template>
  <div class="home">
    <!--    冒泡-->
    <div class="wrapper" @click.stop="warpper">
      <div class="child" @click.stop="child">　　　
        <button @click="btn">点击</button>
      </div>
    </div>
    <p>{
     {
      message }}</p>


    <!--    .prevent-->
    <!--    <a href="/a1" @click="alert(2)">a标签</a>-->
    <a href="/a1" @click.prevent="alert(2)">a标签</a>


    <!--    .self-->
    <div class="wrapper" @click.self="warpper">
      <div class="child" @click="child"></div>
    </div>


    <!--    按键修饰符   监听回车 -->
    <input v-on:keyup.enter="submit">


    <!--    鼠标修饰符  监听鼠标左键-->
    <div @click.left="leftFn">鼠标</div>
  </div>
</template>

<script>
  export default {
     
    name: 'Home',
    data() {
     
      return {
     
        message: "vue事件修饰符"
      }
    },
    computed: {
     },
    methods: {
     
      btn: function () {
     
        this.message = 'btn： 这是最里面的Button'
      },
      child: function () {
     
        this.message = 'child: 这是中间的Div'
      },
      warpper: function () {
     
        this.message = 'warpper: 这是外面的Div'
      },
      alert(val) {
     
        alert(val)
      },
      submit() {
     
        this.message = '回车键事件'
      },
      leftFn() {
     
        this.message = '鼠标左键'
      }
    }
  }
</script>

<style>
  .wrapper {
     
    width: 300px;
    height: 300px;
    border: 1px solid red;
  }

  .child {
     
    width: 200px;
    height: 200px;
    border: 1px solid tan;
  }
</style>

思维导图