Vue v-onディレクティブの使用について

1. イベントのリスニング

v-onディレクティブを使用すると、 DOMイベントをリッスンし、トリガーされたときにJavaScriptコードを実行できます。イベントコードは v-on の直後に配置することも、関数として記述することもできます。

サンプルコードは次のとおりです。

<div id="アプリ">
  <p>{{カウンター}}</p>
  <button @click="counter += 1">+1</button>
  <button @click="減算(10)">-10</button>
</div>
<スクリプト>
  constアプリ = 新しいVue({
    el: "#app",
    データ： {
      カウンター: 0
    },
    メソッド: {
      減算(値){
        this.counter -= 値
      }
    }
  })
</スクリプト>

2. イベントパラメータを渡す

イベント処理関数でネイティブDOMイベントを取得する場合は、 htmlコードで呼び出すときに$eventパラメータを渡すことができます。

サンプルコードは次のとおりです。

<button v-on:click="subtract(10,$event)">10 を引く</button>
...
<スクリプト>
...
メソッド: {
    減算: 関数(値,イベント){
        this.count -= 値;
        console.log(イベント);
    }
}
...
</スクリプト>

3. イベント修飾子

イベントハンドラーでevent.preventDefault()またはevent.stopPropagation()を呼び出すことは、非常に一般的な要件です。メソッド内でこれを簡単に実行できますが、 DOMイベントの詳細を処理するのではなく、メソッドに純粋なデータロジックを持たせる方が適切です。

この問題を解決するために、 Vue.js v-onのイベント修飾子を提供します。前述したように、修飾子はコマンドサフィックスの先頭のドットで示されます。

.stop: event.stopPropagationは、イベントのバブリングを停止します。
.prevent: event.preventDefault 、デフォルトの動作を防止します
.capture: イベントキャプチャ。
.self: 現在クリックされている要素自体を表します。
.once: このイベントは 1 回だけ実行されます。
.passive: ページのスクロール時にデフォルトの動作を妨げないようにブラウザに指示し、スクロールをスムーズにします。

ケース1: クリックイベントがさらに伝播するのを防ぐ

<div id="アプリ">
  <div @click="divClick">
    1111
    <button @click.stop="btnClick">ボタン</button>
  </div>
</div>
<スクリプト>
  アプリを新しいVue({
    el: "#app",
    データ： {
      カウント: 0
    },
    メソッド: {
      divクリック(){
        console.log("divClick")
      },
      btnClick(){
        console.log("btnClick")
      }
    }
  });
</スクリプト>

ケース2: 送信イベントでページがリロードされなくなった

<div id="アプリ">
  <フォームアクション="">
    <ラベル>
      <入力タイプ="テキスト">
    </ラベル>
    <ラベル>
      <input type="submit" value="送信">
    </ラベル>
  </フォーム>
</div>
<スクリプト>
  constアプリ = 新しいVue({
    el: "#app",
    データ： {
    }
  })
</スクリプト>

上記は、データ送信の最も標準的なコードです。送信後、自動的にBaiduにジャンプします。ただし、現在、要件があります。データ入力後、自動的にBaiduにジャンプするのではなく、まず独自の方法でデータを処理し、処理後に指定されたページにジャンプすることを希望します。

コードは次のとおりです。

<div id="アプリ">
  <フォームアクション="https://www.baidu.com">
    <ラベル>
      <入力タイプ="テキスト">
    </ラベル>
    <ラベル>
      <input type="submit" value="送信" @click.prevent="testClick">
    </ラベル>
  </フォーム>
</div>
<スクリプト>
  constアプリ = 新しいVue({
    el: "#app",
    メソッド: {
      テストクリック(){
      }
    }
  })
</スクリプト>

ここでは、クリックイベントをsubmitにバインドし、 .preventを使用してデフォルトの動作を防止します。

Vue v-on ディレクティブの使用に関するこの記事はこれで終わりです。Vue v-on ディレクティブに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: