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 自动过滤用户输入的首尾空格

       

原文地址:https://www.cnblogs.com/xxflz/p/15633098.html