Vue 事件

内联语句处理器

@事件='方法($event)' // $event 将当前事件原生 event 传入

事件修饰符

• .self： 只触发自己的方法，子节点冒泡不触发
• .stop： 阻止冒泡
• .prevent： 阻止默认行为
• .passive： 不阻止默认行为,不能与prevent一起使用
• .once： 只执行一次
• .capture： 使用事件捕捉模式
  • @click.prevent.self 会阻止所有的点击
  • @click.self.prevent 只会阻止对元素自身的点击
• .native： 原生事件

按键修饰符

• .ascii码值：按下对应的键值触发
• .enter：回车
• .tab：table
• .delete：“删除”和“退格”键
• .esc：退出
• .space：空格
• .up：上
• .down：下
• .left：左
• .right：右

自定义按键修饰符别名

Vue.config.keyCodes.f1 = 112

使用 ---> @keyup.f1

• .ctrl
• .alt
• .shift
• .meta：windows/mac 的 command 键

多个按键

@keyup.alt.67    // ctrl+c
@keyup.click.ctrl  // Ctrl + 点击
// 如果同时加了其他的按键按下也会触发

• .exact精确的修饰符按下事件

click.ctrl.exact // 只按下 ctrl 才能触发,多余按下不能触发
click.exact    // 不按下任何键才能触发

鼠标修饰符

• .left
• .right
• .middle

表单修饰符

• .lazy：value 改变且失焦才触发，在 change 事件中同步
• .number：将输入的值转为 number 类型
• .trim：过滤输入的首位空格