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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue ディレクティブ v-html はフィルター関数の例を使用します
  • Vue v-text ディレクティブの簡単な使用例
  • Vue.js 命令 v-for の使用と添字インデックスの取得
  • Vue.js における v-on イベント命令の使用に関する簡単な説明
  • Vue.js の v-cloak ディレクティブと詳細な使用方法
  • Vue.js の v-for の使い方とインデックスの取得方法
  • vue.js でよく使われる v 命令の解析

<<:  CSSカスタムプロパティの予備的な理解

>>:  MySQL 8.0の新機能、隠しフィールドの詳細な説明

推薦する

Dockerイメージ内のnoneイメージ操作を削除する

普段はdocker buildコマンドでイメージを生成していますが、コードの更新が頻繁に行われるとn...

LinuxにMySQLをインストールするための詳細なチュートリアル

すべてのプラットフォーム用の MySQL ダウンロードは、MySQL ダウンロードから入手できます。...

webpack-dev-server のコア概念とケースの詳細な説明

webpack-dev-server コアコンセプトWebpack の ContentBase と ...

LinuxカーネルマクロContainer_Ofの詳細な説明

目次1. 構造体はメモリにどのように保存されますか? 2. container_ofマクロ3. 型4...

グリーンスタイルのウェブデザイン作品18点の最新コレクション

トイ・ストーリー3 オンラインマーケティングウェブサイトゼンモバイル鉄から鉄へスプラウトファンドバー...

ウェブサイト制作におけるオンライン広告の新しいインタラクティブ体験(グラフィックチュートリアル)

インターネット時代が成熟するにつれて、オンライン広告の発展も加速しています。圧倒的な広告収入と完璧な...

Vue を使用した Amap アプリケーション開発のベスト プラクティス

目次序文非同期読み込みパッケージコンポーネントコンポーネントの使用インターフェースをカスタマイズする...

Nginx 正規表現関連のパラメータとルールの紹介

序文最近、私はクライアントのサーバー構成を支援しており、Nginx 構成ファイルを頻繁に変更していま...

MySQLを安全にシャットダウンする方法

MySQL サーバーをシャットダウンする場合、シャットダウン方法に応じてさまざまな問題が発生する可能...

Apache ストレステストツールのインストールと使用

1. ダウンロードApacheの公式サイトhttp://httpd.apache.org/にアクセス...

Linux システムでの vim プラグインのインストールの概要

目次vimプラグインマネージャーをインストールするプラグインデモを追加プラグインを削除するには: v...

SpringBoot + Vue プロジェクトを Linux サーバーにデプロイするための詳細なチュートリアル

序文SpringBoot + Vueのフロントエンドとバックエンドを分離したプロジェクトをどのように...

Kylin 4.0.2 (Ubuntu) でブート パーティションを拡張するプロセスの紹介

目次序文1. 新しいパーティションを準備する2. ブートパーティションをコピーする3. fstabフ...

CSS3に基づいてiPhoneを描く

結果:実装コードhtml <div class='iphone'> &l...

Mybatis マッパー動的プロキシの原理の分析

序文動的プロキシの原理を説明する前に、まず、mybatis を統合した後の dao 層の 2 つの実...