1. 程式人生 > 實用技巧 >提高工作效率的Vue常用修飾符

提高工作效率的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">

原文作者:https://segmentfault.com/a/1190000016786254 (更詳細)