vue事件基本使用总结

发布时间 2023-05-31 15:35:27作者: webHYT

vue事件的基本使用:

1、使用v-on:xxx或@xxx绑定事件,其中xxx是事件名

2、事件的回调需要配置咋methods对象中,最终会挂载在vue实例对象上

3、methods中配置的函数,不要用箭头函数,否则this就不会只想vue实例了

4、methods中配置的函数,都是被Vue所管理的函数,this指向的是vue实例或组件实例

5、@click="demo"和@click="demo($event,'a')",效果一致但后者可传参

vue中的事件修饰符:

1、prevent:阻止默认事件(常用)

2、stop:阻止事件冒泡(常用)

3、once:事件只触发一次(常用)

4、capture:使用事件捕获模式

5、self:只有event.target对象是当前操作的元素才触发

6、passive:事件的默认行为立即执行,无需等待事件回调执行完毕,如鼠标滚轮事件wheel 

vue中键盘事件:

1、vue中常用的按键别名:

  1. 回车 => enter
  2. 删除 => delete(捕获“删除”和“退格”键)
  3. 退出 => esc
  4. 空格 => space
  5. 换行 => tab   //不适合用keyup事件,tab会切走当前选中的元素 用keydown比较好
  6. 上 => up
  7. 下 => down
  8. 左 => left
  9. 右 => right

2.vue中未提供别名的按键可以使用按键原始的key值去绑定,但要注意要转换为caps-lock(切换大小写键,多单词按键需要全转换为小写并用“-”连接)

<input type="text" placeholder = "按下回车提示输入" @keyup.caps-lock="showInfo"></input>

3.系统修饰键(用法特殊):ctrl,alt,shift,meta(菜单键)

(1)配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才会触发 

<input type="text" placeholder = "按下回车提示输入" @keyup.ctrl="showInfo"></input>  //ctrl+y 并且松开y键时 才会触发事件

(2)配合keydown使用:正常触发事件

4. 也可以通过keyCode去指定具体的按键(不推荐)键盘的编码不一致可能会有兼容问题参考 MDN KeyboardEvent.keyCode

5.Vue.config.keyCodes.自定义键名 = 键码 ,可以定制按键(也不太推荐)