前端Vue2-Day47

事件处理：使用v-on:事件名 或 @事件名绑定事件。

1. 事件的回调需要配置在methods对象内，最终在vm上。

2. methods中的配置函数，this指向为组件实例对象或vm。不使用箭头函数，否则this指向改变。

3. @click="demo" 和 @click="demo($event) 效果一致，后者可以传参。

 

事件修饰符：

• prevent：阻止默认事件（e.preventDefault()）
• stop：阻止事件冒泡（e.stopPropagation()）
• once：事件仅触发一次
• capture：使用事件的捕获模式
• self：只有event.target是当前操作元素才触发事件
• passive：事件的默认行为为立即执行，无需等待事件回调执行完毕

 

键盘事件：

Vue中常见的键盘别名：

• 回车 => enter
• 删除 => delete
• 退出 => esc
• 换行 => tab（必须配合keydown使用）
• 空格 => space
• 上、下、左、右=> up、down、left、right

Vue中未提供特殊键盘别名的按键，可以使用原始的按键key值去绑定，但要转化为短横线命名：caps-lock

可以利用Vue.config.KeyCodes.别名 = 按键的keyCode 来设置别名。

 

 

系统修饰键（用法特殊）：ctrl、alt、shift、meta 等键

① 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才触发。

② 配合keydown使用：正常触发事件

 

事件满足链式编程：

<a :href="url" @click.prevent.stop="showInfo">点击提示信息</a>

也可以实现系统修饰键的固定触发：

<!-- 摁下ctrl+y键触发 -->
<input type="text" @keyup.ctrl.y="showInfo">