表单修饰符
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 (更详细)