vue按键修饰符

事件修饰符

.prevent 阻止 submit提交、A标签默认行为跳转行为 (@click.prevent = "事件") 常用  对应event.preventDafault 阻止默认事件

.once 只触发一次

.stop 阻止冒泡 对应event.stopPropagation 阻止事件冒泡

.self 只有在当前元素上触发事件的时候，才会调用处理函数(不会阻止冒泡) 只有event.target 为自身才触发事件

.passive   滚动事件的默认行为(即滚动行为) 将会立即触发 而不会等待`onScroll` 完成 这其中包含`event.preventDefault()` 的情况

 .native  就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触  发的。

.self的理解

  我们知道在一般情况下，e.target总是指向最内层的元素 所以如果父元素设置了.self 修饰符 那么他在点击子元素时，并不会触发被修饰的事件；只有点击没有子元素的空白区域时，才会触发被修饰的事件

  官方文档的一个提示

  使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v - on: click.prevent.self 会阻止所有的点击，而 v - on: click.self.prevent 只会阻止对元素自身的点击。

事件修饰符可以连续多次调用

阻止跳转默认行为

只会阻止一次

 

按键修饰符(键盘按键) 按键修饰最好配合 input 输入框使用

按键修饰符都是配合文本输入框使用

.eneter  按回车键 才会触发

.tab 按tab键 才会触发

.esc  只有按ESC键的时候才会触发

.space 空格键

......... 所有键盘按钮都可以

@keyup.enter 按键盘回车才会触发

@keyup.键盘按键

 

通过全局 config.keyGodes 对象自定义按键修饰符别名

Vue.config.keyGodes.按键名 = 自定义按键

例: Vue.config.keyGodes.f2 = 112