vue的修饰符

v-on

• 缩写：@

• 事件修饰符

• .stop - 调用 event.stopPropagation()。      //阻止冒泡
  .prevent - 调用 event.preventDefault()。       //阻止事件默认行为
  .capture - 添加事件侦听器时使用 capture 模式。
  .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
  .native - 监听组件根元素的原生事件。
  .once - 只触发一次回调。
  .left - (2.2.0) 只当点击鼠标左键时触发。
  .right - (2.2.0) 只当点击鼠标右键时触发。
  .middle - (2.2.0) 只当点击鼠标中键时触发。
  .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
  例子:
  <!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> 
  <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> 
  <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a>
  

  按键修饰符

• • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

  • 例子:<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()`--!>
    <input v-on:keyup.enter="submit">

  • 你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

    // 可以使用 `v-on:keyup.f1`
    Vue.config.keyCodes.f1 = 112

     

  • 表单域修饰符

  • number:转化为数值

  • trim:去掉开始和结尾的空格

  • lazy:将input事件切换为change事件

  • 示例:<input v-model.number = "age" type = "number">