vue之v-on修饰符，prevent 、stop及按键修饰符keyup、keydown详解

事件修饰符概念

1、事件修饰符

事件修饰符：vue提供事件修饰符，可以快速阻止默认行为或阻止冒泡

.prevent 阻止默认行为， .stop 阻止冒泡

语法：

@事件名.修饰符="..."

<template>
  <div>
    <!-- 语法 @事件名.修饰符="..." -->
    <!-- prevent修饰符阻止事件的默认行为 -->
    <!-- .prevent.stop可以连写 -->
    <a href="https://www.baidu.com" @click.prevent.stop="fn">百度</a>

    <!-- .stop修饰符，阻止父级click事件冒泡 -->
    <div @click="daddy">父节点
      <div @click.stop="child">子节点</div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    fn() {
      console.log('fn');
    },
    child() {
      console.log('child');
    },
    daddy() {
      console.log('daddy');
    },
  }
}
</script>
<style>

</style>

2、按键修饰符

在监听键盘事件时，我们经常需要判断详细的按键。可用按键修饰符。

需求: 用户输入内容, 回车时, 打印输入的内容。

 @keyup.enter  监听回车键

 @keyup.esc   监听返回键

<template>
  <div>
    <p>
      <!-- enter是回车触发 -->
      <input type="text" @keyup.enter="fn"><button>回复</button>
    </p>
    <p>
      <!-- esc触发 -->
      <input type="text" @keyup.esc="fn2"><button>回复</button>
    </p>
  </div>
</template>
<script>
export default {
  methods: {
    fn() {
      console.log('按下了回车');
    },
    fn2() {
      console.log('已取消');
    }
  }
}
</script>
<style>

</style>

 Tip：一般用keyup事件而不用keydown事件，因为keyup事件只触发一次，如果按住键盘不松开keydown事件就会一直触发

 附上一个小案例：

<template>
  <div>
    <button @click="hello">你好，世界</button>
    <p>
      <button @click="count--">-</button>
      <span>{{ count }}</span>
      <button @click="count++">+</button>
    </p>
    <button @click="addNumber(10)">加10</button>
    <button @click="addNumber(100)">加100</button>
    <p>
       <!-- a标签的默认行为是跳转页面 -->
      <a href="https://www.baidu.com" @click="noRedirect">事件对象阻止</a> |
      <a href="https://www.baidu.com" @click.prevent>修饰符阻止</a>
    </p>

    <p>
      <input type="text" placeholder="按回车" @keyup.enter="reply">
    </p>
    <p>
      <input type="text" placeholder="按ESC" @keyup.esc="cancel">
    </p>
  </div>
</template>
<script>
export default {
<!-- data里面声明的变量 -->
  data() {
    return {
      count: 10,
    };
  },
<!-- methods里面声明的方法 -->
  methods: {
    hello() {
      console.log('hello world');
    },
    addNumber(number) {
      this.count += number;
    },
    noRedirect(e) {
      e.preventDefault();
    },
    reply() {
      console.log('按下了回车');
    },
    cancel() {
      console.log('已取消');
    }
  }
}
</script>
<style>

</style>

字符翻转小案例：

<!-- 需求：点击按钮button，h1标签里的字符串翻转显示 -->
<template>
  <div>
    <!-- 通过插值表达式动态渲染 -->
    <h1>{{ message }}</h1>
    <!-- button添加点击事件执行reverseWorld函数 -->
    <button @click="reverseWorld">逆转世界</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello, World',
    }
  },
  methods: {
    reverseWorld() {
      // 第一步，把字符串拆分成数组
      const array = this.message.split('');
      // 第二步，倒转数组
      array.reverse();
      // 第三步，倒转后的数组拼接回去
      this.message = array.join("");
    },
  }
}
</script>
<style>

</style>