在vue中修饰符的主要目的是为了解决一些原生DOM事件中的一些细节问题以及一些常规的内容优化问题。因此了解修饰符在特定情况下的作用还是有必要的,这能提高不少的开发效率。
修饰符的类型
修饰符在不同的内容上有着不同的修饰作用,因此针对的内容也会有所不一样。
1.事件修饰符 6个
事件修饰符通常 应用于各种通用事件,如click、change等。常用的有:
- .stop ------ 阻止事件冒泡
- .prevent ------ 阻止默认事件(如表单提交、a标签跳转)
- .capture ------ 与事件冒泡的方向相反,事件捕获由外到内
- .self ------ 只会触发自己范围内的事件,不包含子元素
- .once ------ 只会触发一次
- .passive ------ 该修饰符表示事件设置{passive:true},表示处理事件函数中不会调用preventDefault函数,就会减少了额外的监听,从而提高了性能;所以不能和.prevent修饰符一同使用,否则浏览器会报错
2.按键修饰符 9个
按键修饰符通常 应用在keyup/keypress/keydown等键盘按下事件
常用的有:
- .enter------(通常用于输入内容时按下enter登录之类的内容)
- .tab
- .delete ------(捕获“删除”和“退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right
这些没什么好解释的,仅针对键盘对应的内容
3.系统修饰键 5个
系统修饰键通常 应用在鼠标或键盘事件的监听器 即click事件或者keyup之类的事件都可以用
- .ctrl
- .alt
- .shift
- .exact ------修饰符允许你控制由精确的系统修饰符组合触发的事件
- .meta ------(这个键用的比较少,详情看官网)
4.鼠标按钮修饰符 3个
鼠标按钮修饰符 通常 应用在鼠标的事件上 即鼠标点击事件、滚动事件。
- .left------左边触发
- .right ------右边触发
- .middle ------中间触发
5.通常修饰符 4个
这个修饰键通常应用在v-model这个指令上用于修饰一些变量
- .lazy------ 在改变后才触发(也就是说只有光标离开input输入框的时候值才会改变)
- .number ------ 将输出字符串转为Number类型·(虽然type类型定义了是number类型,但是如果输入字符串,输出的是string)
- .trim ------ 自动过滤用户输入的首尾空格
- .native ------ 绑定原生事件到组件模板的根节点上,针对一些自定义组件上的事件绑定操作,直接应用在html上是没效果的。
自定义按键修饰符别名
这个内容一般用的不多,但是有必要了解下
// 核心点在于Vue.config.keyCodes
Vue.config.keyCodes.f5 = 116;