2020 关于Vue修饰符

为了方便大家写代码，vue.js给大家提供了很多方便的修饰符，比如我们经常用到的取消冒泡，阻止默认事件等等~

1、表单修饰符

填写表单，最常用的是什么？input！v-model~而我们的修饰符正是为了简化这些东西而存在的

• .lazy

<div>
   <input type="text" v-model="value">
   <p>{
   {
   value}}</p>
</div>

从这里我们可以看到，我们还在输入的时候，光标还在的时候，下面的值就已经出来了，可以说是非常地实时。

但是有时候我们希望，在我们输入完所有东西，光标离开才更新视图。

<div>
   <input type="text" v-model.lazy="value">
   <p>{
   {
   value}}</p>
</div>

这样即可~这样只有当我们光标离开输入框的时候，它才会更新视图，相当于在onchange事件触发更新。

• .trim

在我们的输入框中，我们经常需要过滤一下一些输入完密码不小心多敲了一下空格的兄弟输入的内容。

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

为了让你更清楚的看到，我改了一下样式，不过问题不大，相信你已经清楚看到这个大大的hello左右两边没有空格，尽管你在input框里敲烂了空格键。

需要注意的是，它只能过滤首尾的空格！首尾，中间的是不会过滤的

• .number

看这个名字就知道，应该是限制输入数字或者输入的东西转换成数字，but不是辣么干的。

如果你先输入数字，那它就会限制你输入的只能是数字。
如果你先输入字符串，那它就相当于没有加.number

2、事件修饰符

• .stop

由于事件冒泡的机制，我们给元素绑定点击事件的时候，也会触发父级的点击事件。

<div @click="shout(2)">
  <button @click="shout(1)">ok</button>
</div>

//js
shout(e){
   
  console.log(e)
}
//1
//2

一键阻止事件冒泡，简直方便得不行。相当于调用了event.stopPropagation()方法。

<div @click="shout(2)">
  <button @click.stop="shout(1)">ok</button>
</div>
//只输出1