vue修饰符

一、事件修饰符

 

　　1、.stop 阻止事件冒泡

　　原生JS里面阻止事件冒泡 event.stopPropagation()

　　在 vue 里面直接可以写在 事件之后 @click.stop = 'submit'

　　

　　2、.prevent  阻止默认事件 （如a标签默认跳转行为）

　　原生JS阻止默认事件 event.preventDefault()

　　在vue 里直接写在事件之后 @click.prevent = 'submit'

 

      3、.once 事件只触发一次

　　　在vue 里直接写在事件之后 @click.once = 'submit'

　　

　　4、.passive ：事件的默认立即执行，无需等待函数回调执行完毕（注：不能和.prevent连用）

　　　　这修饰符一般用在 @scroll   @touchmove 这种默认事件中，passive直接可以忽略掉事件所绑定的函数，而是直接执行事件默认行为

　　　　例如：我的滚动事件 scroll 事件里面绑定了一个非常耗性能的操作，如果不用passive，浏览器就会等函数操作执行完了之后在去执行默认事件使页面滚动，这样就会造成页面非常卡顿

　　　　　　　如果使用了passive，浏览器就只先执行默认滚动行为，不会等待函数操作完成，这样就大大提高了性能

 

　　5、修饰符可以串联使用

　　如：

<a @click.stop.prevent = 'submit'></a>

　　既可以阻止冒泡，也可以阻止默认事件

 

二、v-modle修饰符

 

　　1、.number 自动将用户的输入值转化为数值类型

 

　　2、.trim 自动过滤用户输入的首尾空格