vue解惑のv-on(イベントリスニング命令)

4072 ワード

一.v-on命令
vueでは、DOMイベントをv-onコマンドで傍受し、対応するコードをトリガします.例えばv-on:clickは、クリックイベントを傍受したことを示す.
二.イベント修飾子
イベント処理関数でevent.preventDefault()を呼び出すなどの方法は非常に一般的なニーズである.しかし、より良い方法は、関数を処理するのは純粋なデータロジックだけで、
DOMイベントの詳細を処理するのではありません.この問題を解決するためにjsはv-onにイベント修飾子を提供する.
  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive
  • 
    <a v-on:click.stop="doThis">a>
    
    
    <form v-on:submit.prevent="onSubmit">form>
    
    
    <a v-on:click.stop.prevent="doThat">a>
    
    
    <form v-on:submit.prevent>form>
    
    
    
    <div v-on:click.capture="doThis">...div>
    
    
    
    <div v-on:click.self="doThat">...div>

    .キー
    キーボードイベントを するときは、 なキーを する があります.Vueでは、v-onにキーボードイベントをリスニングするときにキー を できます.
    
    <input v-on:keyup.enter="submit">