提高工作效率的Vue常用修饰符

表单修饰符

v-model.lazy="value"   当光标离开输入框的时候，它才会更新视图，相当于在onchange事件触发更新。

v-model.trim="value"   过滤输入的空格，（首尾）

v-model.number="value"  如果先输入数字，那它就会限制你输入的只能是数字。

如果先输入字符串，那它就相当于没有加.number

事件修饰符  （注意：修饰符可以同时使用多个,但是可能会因为顺序而有所不同，从左往右判断）

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

v-on:submit.prevent  用于阻止事件的默认行为，例如，当点击提交按钮时阻止对表单的提交

@click.self  只当事件是从事件绑定的元素本身触发时才触发

@click.once 只能用一次，绑定了事件以后只能触发一次，第二次就不会触发。

 @click.capture  与事件冒泡机制反过来

 v-on:scroll.passiv  相当于给onscroll事件整了一个.lazy修饰符

@click.native 一般用于组件上面，如果绑定在正常html上面会失效

鼠标按钮修饰符

@click.left  左键点击

@click.right  右键点击

@click.middle 中键点击

键值修饰符

@keyup.keyCode    //普通键.enter.tab.delete   //(捕获“删除”和“退格”键).space.esc.up.down.left.right  //系统修饰键.ctrl.alt.meta(vue给一些常用的键提供了别名 )

v-bind修饰符

.sync   (2.3+新增,一般用于子组件修改父组件参数,相当于简化了Vue 的$emit)

//父组件<comp :myMessage.sync="bar"></comp>

//子组件this.$emit('update:myMessage',params);

  .prop (自定义属性存储变量)

      <input id="uid" title="title1" value="1" :index.prop="index">

startsWith()   判断是否以指定的字符串开头区分大小写，是返回true 不是返回false

 

原文作者:https://segmentfault.com/a/1190000016786254 （更详细）