VUE中的修飾符、指令

修飾符

表單修飾符

表單中v-model每次input事件觸發

• v-model.lazy每次change事件觸發
• v-model.number轉爲數字類型
• v-moel.trim過濾首尾空格

事件修飾符

• .stop阻止事件繼續傳播 => event.stopPropagation()
• .prevent阻止事件默認行爲 => event.preventDefalt()
• .capture事件捕獲模式，先當前元素後向內執行 => addEventListener的第三參數true
• .self只對event.target當前元素觸發事件
• .once只觸發一次，可用於自定義組件事件上
• .passive不阻止事件默認行爲，立即執行函數（不和.prevent一起用）
• .native監聽原生事件

鍵盤按鍵修飾符

v-on:keyboardEvent.key鍵盤事件綁定有效按鍵名key作爲修飾符，(IE9中對.esc以及所有方向鍵有不同的key值，內置別名以兼容IE9)；Vue提供的按鍵別名：

• .enter
• .tab
• .delete
• .esc
• .space
• .up
• .down
• .left
• .right

其他的keyCode表：？

鼠標按鈕修飾符

v-on:mouseEvent.key鼠標事件綁定按鍵名key作爲修飾符，限制鼠標按鈕才能響應事件：

• .left
• .right
• .middle

系統修飾符

僅在按下相應系統鍵時候才能觸發鼠標或鍵盤事件的監聽器

• .ctrl
• .alt
• .shift
• .meta

精準系統修飾符.exact

精準控制系統修飾符組合才能觸發事件：

//即使Alt或Shift，和Ctrl一同按下，也會觸發click事件
<button @click.ctrl="onClick">.</button>
//只有Ctr被按下時，纔會觸發
<button @click.ctrl.exact="onClick">.</button>
//沒有任何系統修飾符被按下時，纔會觸發
<button @click.exact="onClick">.</button>

事件傳播機制

？

指令

v-html
v-text
v-model
v-bind：:
v-on：@
v-show
v-if、v-else-if、v-else
v-for :key