vue指令 -v-on按键修饰符 & -v-on事件修饰符

一.## vue指令-v-on按键修饰符

作用: 给键盘事件, 添加修饰符, 增强能力

• 语法:

• • @keyup.enter  -  监测回车按键
  • @keyup.esc     -   监测返回按键 更多修饰符

<template>
  <div>
    <input type="text" @keydown.enter="enterFn">
    <hr>
    <input type="text" @keydown.esc="escFn">
  </div>
</template>

<script>
export default {
 methods: {
   enterFn(){
     console.log("enter回车按键了");
   },
   escFn(){
     console.log("esc按键了");
   }
 }
}
</script>

总结: 多使用事件修饰符, 可以提高开发效率, 少去自己判断过程

二.-v-on事件修饰符

语法:

<标签 @事件名.修饰符="methods里函数" />

• .stop - 阻止事件冒泡
• .prevent - 阻止默认行为
• .once - 程序运行期间, 只触发一次事件处理函数