Vueはクリックを実装し、イベントオブジェクトとカスタムパラメータを同時に渡します。

カスタムパラメータを渡すだけ

html

<div id="アプリ">
 <button @click="tm(123)">ddddd</button>
</div>

JSコード

新しいVue({
  el:'#app',
 方法:{
   tm:関数(e){
    コンソールログ(e);
  }
 }
})

イベントオブジェクトを渡すだけです

html

<div id="アプリ">
 <button @click="tm">ddddd</button>
</div>

JSコード

新しいVue({
  el:'#app',
 方法:{
   tm:関数(e){
    コンソールログ(e);
  }
 }
})

イベントオブジェクトとカスタムパラメータを同時に渡す

html

<div id="アプリ">
 <button @click="tm($event,123)">ddddd</button>
</div>

JSコード

新しいVue({
  el:'#app',
 方法:{
   tm:関数(e,値){
    コンソールログ(e);
    console.log(値);
  }
 }
})

補足: vue 共通イベント v-on:click とイベントオブジェクト、イベントバブリング、イベントのデフォルト動作

実は、v-on の後にはクリックイベントだけでなく他のイベントも続くことができ、使い方も同様です。たとえば、v-on:click/mouseout/mouseover/mousedown.......

次のクリックは例です

注: すべての v-on は @ と省略できます。たとえば、v-click は @click と省略できます。

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

v-on ディレクティブを使用すると、DOM イベントをリッスンし、トリガーされたときに JavaScript コードを実行できます。一般的に言えば、DOMをリッスンして何らかの操作をトリガーすることです。これらの操作（クリックなど）がトリガーされた後に実行されるアクション（js）は、

v-on:click="item+=1"

例えば：

<テンプレート>
 <div> 要素
  <input type="button" value="clickme" v-on:click="item+=1"/>
  <div>{{アイテム}}</div>
 </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
 名前: 'HelloWorld',
 データ （） {
  戻る {
  アイテム:1
  }
 }
}
</スクリプト>
 
<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイルスコープ>
 
</スタイル>

結果：

クリックするたびにバインド値が 1 ずつ増加していることがわかります。つまり、イベントトリガーの後に js 操作を配置できるということです。しかし、ロジックが複雑すぎると、書き込むことで混乱が生じ、ビューとロジックが混同されることがあります。したがって、クリックの後にメソッドを続けることができ、すべての処理ロジックメソッドを関数にカプセル化して、クリック時に呼び出すことができます。

2. イベント処理方法

v-on:click="挨拶"

例えば：

<テンプレート>
 <div> 要素
  <input type="button" value="clickme" v-on:click="greet"/>
  <div>{{res}}</div>
 </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
 名前: 'HelloWorld',
 データ （） {
  戻る {
   名前 : 1,
   解像度:""
  }
 },
 方法:{
  挨拶: 関数 () {
   // メソッド内の `this` は現在の Vue インスタンスを参照します this.res = 'Hello ' + this.name + '!';
  }
 }
}
</スクリプト>
 
<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイルスコープ>
 
</スタイル>

効果：

クリックすると、greet メソッド内の js ロジックが実行されていることがわかります。

3. パラメータを使用した時間バインディング方式:

上記と同じですが、唯一の違いはパラメータを持っていることです

 v-on:click="greet(名前)"

<テンプレート>
 <div> 要素
  <input type="button" value="clickme" v-on:click="greet(name)"/>
  <div>{{res} </div>
 </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
 名前: 'HelloWorld',
 データ （） {
  戻る {
   名前 : 1,
   解像度:""
  }
 },
 方法:{
  挨拶: 関数 (受け入れ) {
   // メソッド内の `this` は現在の Vue インスタンスを参照します this.res = 'Hello ' + reccept + 1 + '!';
  }
 }
}
</スクリプト>
 
<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイルスコープ>
 
</スタイル>

効果は一定です。メソッドは 1 つのメソッド内で複数回呼び出すこともできます。

4. インラインプロセッサのメソッド

つまり、メソッド内で他のメソッドを呼び出すということです。ここでの他のメソッドは、バブリング防止などのjsネイティブメソッドでも、カスタムメソッドでもかまいません。

v-on:click="greet(名前、$イベント)"

例えば：

<テンプレート>
 <div> 要素
  <input type="button" value="clickme" v-on:click="greet(name,$event)"/>
  <div>{{res} </div>
 </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
 名前: 'HelloWorld',
 データ （） {
  戻る {
   名前 : 1,
   解像度:""
  }
 },
 方法:{
  挨拶: 関数 (reccept,event) {
   (reccept===1)の場合、this.say()
  },
  言う:関数() {
   this.res="電話しました"
  }
 }
}
</スクリプト>
 
<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイルスコープ>
 
</スタイル>

効果：

5. イベントオブジェクト

$eventは現在のクリックイベントのイベントオブジェクトを取得します。たとえば、clickは現在のクリックのDOMイベントオブジェクト情報を取得します。

v-on:click="($event) に挨拶する"

例えば：

<テンプレート>
 <div> 要素
  <input type="button" value="clickme" v-on:click="greet($event)"/>
 </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
 名前: 'HelloWorld',
 データ （） {
  戻る {
   非表示: true
  }
 },
 方法:{
  挨拶: 関数 (ev) {
  アラート(ev.clientX)
  }
 }
}
</スクリプト>
 
<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイルスコープ>
 
</スタイル>

効果：

6. イベントバブリング

イベントのバブリングが阻止されない場合、イベントは2回バウンスします。

例えば

<テンプレート>
 <div> 要素
  <div @click="show1($event)">
   <div @click="show2($event)">クリックしてください</div>
  </div>
 </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
 名前: 'HelloWorld',
 データ （） {
  戻る {
   非表示: true
  }
 },
 方法:{
  show1: 関数 (ev) {
   警告(1)
  },
  表示2: 関数 (ev1) {
   警告(2)
  }
 }
}
</スクリプト>
 
<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイルスコープ>
 
</スタイル>

しかし、泡立ちを止めれば、一度しか弾けません

例: ネイティブ js はバブリングを防止します

ev1.cancelBubble=true

<テンプレート>
 <div> 要素
  <div @click="show1($event)">
   <div @click="show2($event)">クリックしてください</div>
  </div>
 </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
 名前: 'HelloWorld',
 データ （） {
  戻る {
   非表示: true
  }
 },
 方法:{
  show1: 関数 (ev) {
   警告(1)
  },
  表示2: 関数 (ev1) {
    ev1.cancelBubble=true
   警告(2)
 
  }
 }
}
</スクリプト>
 
<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイルスコープ>
 
</スタイル>

では、Vue 自体にカプセル化されたバブリング防止メソッドはどうでしょうか?

@click.stop="show2()"

例えば：

<テンプレート>
 <div> 要素
  <div @click="show1()">
   <div @click.stop="show2()">クリックしてください</div>
  </div>
 </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
 名前: 'HelloWorld',
 データ （） {
  戻る {
   非表示: true
  }
 },
 方法:{
  表示1: 関数() {
   警告(1)
  },
  表示2: 関数 (ev1) {
   警告(2)
  }
 }
}
</スクリプト>
 
<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイルスコープ>
 
</スタイル>

7. デフォルトの動作を防止する:

たとえば、右クリックすると、次のようなデフォルトメニューが表示されます。

<テンプレート>
 <div> 要素
  <div>
   <div @contextmenu="show2()">右クリックしてください</div>
  </div>
 </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
 名前: 'HelloWorld',
 データ （） {
  戻る {
   非表示: true
  }
 },
 方法:{
  表示2: 関数 (ev1) {
   警告(2)
 
  }
 }
}
</スクリプト>
 
<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイルスコープ>
 
</スタイル>

効果：

デフォルトの動作を防ぐ方法があります

ev1.preventDefault();

例えば：

<テンプレート>
 <div> 要素
  <div>
   <div @contextmenu="show2($event)">右クリックしてください</div>
  </div>
 </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
 名前: 'HelloWorld',
 データ （） {
  戻る {
   非表示: true
  }
 },
 方法:{
  表示2: 関数 (ev1) {
   警告(2);
   ev1.preventDefault();
  }
 }
}
</スクリプト>
 
<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイルスコープ>
 
</スタイル>

クリックしてもデフォルトのメニューは表示されません（PS 360 ブラウザの右クリックは無効です）

デフォルトの動作を防ぐために vue でカプセル化されたメソッド:

@contextmenu.prevent="show2()"

例えば：

<テンプレート>
 <div> 要素
  <div>
   <div @contextmenu.prevent="show2()">右クリックしてください</div>
  </div>
 </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
 名前: 'HelloWorld',
 データ （） {
  戻る {
   非表示: true
  }
 },
 方法:{
  表示2: 関数 (ev1) {
   警告(2);
  }
 }
}
</スクリプト>
 
<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイルスコープ>
 
</スタイル>

8. その他のイベント修飾子

使い方は同じなので繰り返しません。

。捕獲

。自己

。一度

<!-- クリック イベントがそれ以上伝播しないようにする -->
<a v-on:click.stop="doThis"></a>
<!-- 送信イベントでページがリロードされなくなりました -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾子は連鎖できます -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 修飾子のみ -->
<フォーム v-on:submit.prevent></フォーム>
<!-- イベント リスナーを追加するときにイベント キャプチャ モードを使用する -->
<!-- つまり、要素自体によってトリガーされたイベントはここで最初に処理され、その後、内部要素に渡されて処理されます-->
<div v-on:click.capture="doThis">...</div>
<!-- event.target が現在の要素自体である場合にのみハンドラーをトリガーします -->
<!-- つまり、イベントは内部要素からトリガーされません-->
<div v-on:click.self="doThat">...</div>

修飾子を使用する場合、順序が重要であり、対応するコードは同じ順序で生成されます。したがって、@click.prevent.self を使用するとすべてのクリックが防止されますが、@click.self.prevent を使用すると要素自体のクリックのみが防止されます。

2.1.4 追加

<!-- クリック イベントは 1 回だけ発生します -->
<a v-on:click.once="doThis"></a>

ネイティブ DOM イベントでのみ機能する他の修飾子とは異なり、.once 修飾子はカスタムコンポーネントイベントでも使用できます。コンポーネントに関するドキュメントをまだ読んでいない場合は、今は心配する必要はありません。

<!-- スクロール イベントはデフォルトのスクロール動作をキャンセルしません -->
<div v-on:scroll.passive="onScroll">...</div>

Vue は、モバイルパフォーマンスを向上させるために、これらの修飾子に対して追加の .passive 修飾子を提供します。

たとえば、スクロールする場合、ブラウザは処理関数でイベントが event.preventDefault() と呼ばれたかどうかを認識しないため、イベント全体が処理された後にスクロールをトリガーします。 .passive 修飾子は、このイベントのデフォルトの動作がキャンセルされないことをブラウザにさらに伝えるために使用されます。

.passive と .prevent を一緒に使用しないでください。パッシブハンドラーは、デフォルトのイベント動作を防ぐことはできません。

上記は私の個人的な経験です。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。間違いや不備な点がありましたら、遠慮なくご指摘ください。

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