杰霸霸博客

主题

事件处理 ​

1. 事件的基本使用 ​

  1. 使用v-on:xxx 或 @xxx 绑定事件, 其中xxx是事件名, @是v-on:的简写形式；
  2. 事件的回调需要配置在methods对象中，最终会在vm上；
  3. methods中配置的函数，不要用箭头函数！否则this就不是vm了
  4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或者组件实例对象；
  5. @click="demo" 和@click="demo($event)" 效果一致, 但后者可以传参事件； 事件的方法不能配置在data对象中，虽然最后方法也会在vm上面，data中所有的属性都会被数据代理，方法不是数据没必要数据代理，因此方法就放置在methods对象中了。

2. 事件修饰符 ​

Vue的事件修饰符有：

  1. prevent: 阻止默认事件(常用)；比如点击超链接跳转行为被阻止
  2. stop: 阻止事件冒泡(常用)；父级元素事件监听被阻止
  3. once: 事件只触发一次(常用)；比如按钮阻止重复点击
  4. capture: 使用事件的捕获模式；也就是不在采用冒泡模式，下图点击div2,先触发showMsg(1) Alt text
js
<!-- 使用事件的埔获模式 -->
<div class="box1" @click.capture="showMsg(1)">
    div1
    <div class="box2" @click="showMsg(2)">
        div2
    </div>
</div>
  1. self: 只有event.target是当前操作的元素时才触发事件；比如事件冒泡，event.target是子元素，如果配置self将限制父元素事件源必须是自身也就阻止了事件冒泡
  2. passive: 事件的默认行为立即执行，无需等待事件回调完毕；比如鼠标滚轮滚动默认行为是滚动条向下滑动，如果事件处理代码很耗时，很可能导致滚动条最后来不及滚动，加上passive会优先处理滚利条页面效果，常用在移动端浏览器上面。

以上事件修饰符可以组合使用, 比如@click.prevent.stop。

3. 键盘事件 ​

3.1 Vue中常用的按键别名 ​

  • 回车 ==> enter
  • 删除 ==> delete (捕获删除和退格键)
  • 退出 ==> esc
  • 空格 ==> space
  • 换行 ==> tab (比较特殊，按下tab会将焦点移走，因而不能触发事件不能配合keyup，配合keydown使用)
  • 上 ==> up
  • 下 ==> down
  • 左 ==> left
  • 右 ==> right

Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)。比如切换大小写按键：Caps lock的别名是caps-lock。
系统修饰键(用法特殊)：Ctrl、alt、shift、meta(就是win键)

  1. 如果配合keyup使用：按下修饰键的同时，再按下其他键，再释放其他键，事件才能被触发；
  2. 如果配合keydown使用：正常触发事件。

也可以使用keyCode去指定具体的按键(官方不推荐，参考文档)

3.2 自定义按键别名 ​

Vue.config.keyCodes.自定义键名 = 键码

js
Vue.config.keyCodes.huiche = 13

3.3 组合按键监听 ​

组合按键监听配置就是 比如@keydown.Ctrl.z 就是按ctrl+z才触发事件