vue常用的修饰符

常用的修饰符

1.表单修饰符

.lazy

//在我们填完信息，光标离开标签的时候，
//才会将值赋予给value，也就是在change事件之后再进行信息同步

<input type="text" v-model.lazy="value">
<p>{{value}}</p>   //注意绑定表单事件喔

//.trim

//清除用户输入的空格字符，但是内容中间的空格不会消除

<input type="text" v-model.trim="value"> //通常在用户名表单中用到

//.number

//限制输入数字或者输入的东西转换成数字  (如果你先输入数字，那它就会限制你输入的只能是数字。如果你先输入字符串，那它就相当于没有加 .number)

<input type="text" v-model.number="value"> ```

**2.事件修饰符**
```js
//.stop

//一键阻止事件冒泡，相当于调用了 event.stopPropagation() 方法

<button @click.stop="ok">ok</button></div>

//.prevent

用于阻止事件的默认行为，例如当点击提交按钮时阻止对表单的提交。相当于调用了 event.preventDefault() 方法

<button @click.prevent="ok">ok</button></div>

//.self

//当事件发生在该元素本身而不是子元素的时候会触发
//.once
//这个修饰符的用法也是和名字一样简单粗暴，
//只能用一次，绑定了事件以后只能触发一次，第二次就不会触发。

<button @click.once="del">ok</button>

//.capture

//事件侦听，事件发生的时候会调用
//.passive
//当我们在监听元素滚动事件的时候，会一直触发 onscroll 事件，
//在 PC 端是没啥问题的，但是在移动端，会让我们的网页变卡
//，因此我们使用这个修饰符的时候，
//相当于给 onscroll 事件整了一个 .lazy 修饰符

//.native

//该修饰符的作用就是把一个 Vue 组件转化为一个普通的 HTML 标签

<el-son-item @click.native="add"></el-son-item> //可以在子组件上直接注册事件```

**3.鼠标按键修饰符**

```Click 事件，我们一般是会用左键触发，有时候我们需要更改右键菜单啥的，就需要用到右键点击或者中间键点击，这个时候就要用到鼠标按钮修饰符

.left 左键点击
.right 右键点击
.middle 中键点击

4.键值修饰符

在我们的项目经常需要监听一些键盘事件来触发程序的执行，而Vue中允许在监听的时候添加关键修饰符：常用的键值修饰符:
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

<input @click.enter=“add”/>