Vue事件修饰符 | | 按键修饰符 | | 表单修饰符

1.事件修饰符

1.1.修饰符预览

.stop     //阻止事件冒泡
.prevent  //组止默认时事件（例如a标签的默认跳转）
.capture  //监听元素并优先触发在该元素上的事件（当元素发生冒泡时，谁有该事件修饰符，就先触发谁。 先看没有该修饰符的操作）
.self     //只有点击当前元素时候，才会触发事件处理函数,该元素的事件不会因为冒泡而触发。
.once     //只会触发一次该事件

1.2.修饰符使用

直接在事件绑定后使用修饰符即可

<div @click.stop = 'event'></div>//阻止当前事件冒泡

2.按键修饰符

2.1.按键修饰符使用

使用 Vue 进行开发时，可以选择特定按键的按下动作来触发事件

<input type = "text" v:on.keyup.enter ="handle" v-model="inpVal"/>

上面的代码可义看到，v-on 使用了 按键修饰符.keyup.enter，表示在按下回车时，也会触发handle事件

2.2.自定义按键修饰符

Vue规定了自定义按键修饰符功能，使用全局的config.keyCodes对象即可自定义

Vue.config.keyCodes.f1 = 112 //数字代表了每一个按键的唯一标识，可以使用 keyup 事件，在事件对象中的 keyCode 属性获取每一个按键的唯一标识

上面定义了 f1 按键的修饰符，可以直接在标签中使用。

当然你也可以直接使用数字作为标识符使用也可以，推荐自定义名称，更加易于代码的阅读

3.表单修饰符

• .number

.number可以帮助我们将表单或其他标签传过来的数字（字符串），转化为可以运算的数字

<input type = "number" v-model.number = "val" />

上面 input 标签使用 .number 处理后，val 便是可以用来计算的数字

• .tirm

.tirm用来去掉数据前后的空格

• .lazy

.lazy可以将 input 事件更改为change事件

input事件： 类似于 keyup ，每次 input 框值改变时，即会触发
change事件：类似于 blur，每次 input 失去焦点时会触发