Vue3中的操作指令(二)

事件修飾符

事件進行中我們使用過​

​event.preventDefault()​

​​方法或者​

​event.stopPropagation()​

​​方法，在vue中我們可以在​

​v-on​

​​指令中使用​

​stop​

​​或者​

​prevent​

​​去代替上面兩個方法。除此之外還有​

​capture​

​​表示添加事件監聽器時去使用。​

​self​

​​表示僅當事件是從特定按鍵觸發時才觸發回調。​

​once​

​​表示僅僅觸發一次回調，再次點選時也不會再觸發。​

​left​

​​表示當按滑鼠左鍵時觸發。​

​right​

​​表示當按滑鼠右鍵時觸發。​

​middle​

​​表示當按滑鼠中間的鍵時觸發。​

​passive​

​​表示當為true模式添加偵聽器。修飾符還可以串起來去使用，但是需要注意書寫順序。​

​v-on:click.prevent.self​

​​表示會阻止所有的單擊。​

​v-on:click.self.prevent​

​表示隻會阻止對元素自身的單擊。

<div v-on:click.self="btnClick"></div>
<div v-on:click.once="intClick"></div>      

鍵盤修飾符

鍵盤修飾符有很多，例如​

​enter​

​​、​

​space​

​​、​

​ctrl​

​​、​

​alt​

​​、​

​shift​

​​、​

​meta​

​​等，需要注意的是mac系統和windows系統有些對應的鍵是不一樣的。例如有​

​meta​

​​。還有當修飾鍵和​

​keyup​

​事件一起使用時，事件觸發修飾鍵必須處于按下狀态。

<input @keyup.ctrl.a="btnClick">      

上面表示隻有當我們同時按下​

​ctrl​

​​和​

​a​

​​鍵的時候,​

​btnClick​

​方法不會被調用，但是當我們按住ctrl鍵，但是松開a鍵的時候，就會觸發btnClick事件。如果我們想要同時按下時去觸發btnClick事件，我們可以用ctrl對應的數字就替代這個鍵。

v-text/v-html

​

​v-text​

​​指令用于更新元素的文本内容。​

​v-html​

​​指令用于更新元素的​

​innerHTML​

​，相當于我們可以将内容當做html代碼插入進去。但是我們需要注意的是，插入的html代碼可以帶來安全性問題，是以我們盡量不要在使用者送出當面使用該指令。

v-once

​

​v-once​

​這個指令可以讓元素或者元件隻渲染一次，不需要使用表達式，當渲染過之後，再次渲染時，就會把渲染過的東西當做靜态内容或者跳過。進而提高性能優化。

v-cloak

自定義指令

vm.directive(name, [define])