提高工作效率的Vue常用修飾符
阿新 • • 發佈:2020-07-25
表單修飾符
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">
原文作者:https://segmentfault.com/a/1190000016786254 (更詳細)