Vue.jsは非常に強力で、習得が容易で、親しみやすいライブラリであり、HTML、CSS、およびJavascriptの知識があれば、その中でWebアプリケーションの構築を開始できます。 Vue.jsは、既存のAngularフレームワークとreactフレームワークの最高の機能を組み合わせて構築されています。これは、UI（ユーザーインターフェイス）とSPA（シングルページアプリケーション）の構築に使用されるプログレッシブでリアクティブなJavascriptフレームワークです。そのため、開発者はVue.jsでアプリケーションを開発する際にコーディングし、自由と快適さを感じることが大好きです。 Vue.jsのイベントのリッスンと処理を見てください。イベントをリッスンして処理するためのv-onディレクティブが提供されていることがわかります。 v-onディレクティブを使用して、DOMをリッスンし、必要なタスクを実行できます。また、多くのイベントハンドラーを提供します。ただし、この記事では、クリックイベントについてのみ学習し、焦点を当てていきます。それでは、始めましょう！
JavascriptのonClickイベントと同様に、Vue.jsはイベントをリッスンするためのv-on：clickを提供します。
v-on：clickイベントの構文は次のようになります。
< ボタン v-on：click='functionName'>>クリック</ ボタン >>
Vue.jsは、v-onを使用する代わりに、省略形の@を提供します。
< ボタン @クリック='functionName'>クリック</ ボタン >>
Vue.jsは、クリックイベントをリッスンして関数を呼び出すだけではありません。また、引用符で囲まれた算術演算やJavascriptに関連するものを直接書き込むこともできます。ちょうどこのような：
< ボタン @クリック='num + = 1'>追加</ ボタン >>
Vue.jsは、以下に示すように、インラインJavascriptステートメントでメソッドまたは関数を呼び出すことを提供します。
< ボタン @クリック='message（' Hi '）'>表示</ ボタン >>以下の例のように、Vue.jsのイベントハンドラーを使用して、インラインステートメントを使用してVue.jsの特別に提供された$ event変数をメソッドの引数に渡すことにより、DOMイベントにもアクセスできます。
< ボタン @クリック='message（' Hi '、$ event）'>送信</ ボタン >>
Vue.jsは、複数の関数またはメソッドを呼び出すこともできます。次の例のように、複数の関数を呼び出して、それらをコンマで区切ることができます。
< ボタン @クリック='first（' Hello '）、second（' Hi '、$ event）'>送信する</ ボタン >>Vue.jsはイベント修飾子も提供します。
イベント修飾子
多くの場合、イベントとともに修飾子を呼び出す必要があります。そのため、Vue.jsは次の修飾子のいくつかを提供します。
。ストップ
クリックイベントの送信を停止します。
< に @ click.stop='これを行う'>></ に >>。防ぐ
これにより、ページがリロードまたはリダイレクトされなくなります。
< 形 @ submit.prevent='onSubmit'>></ 形 >>。一度
クリックイベントは1回だけトリガーされます。
< に @ click.once='これを行う'>></ に >>。捕獲
これは主に、イベントリスナーを追加するために使用されます。
< div @ click.capture='これを行う'>..。</ div >>修飾子をチェーンすることもできます。ただし、修飾子の順序は重要であり、結果に影響することに注意してください。
< に @ click.stop.prevent='それを行う'>></ に >>結論
この記事では、noobから忍者レベルまでのClickイベント処理の概念全体について説明しました。クリックイベントの記述のさまざまな構文と v-on:click のさまざまな使用方法について学習しました。開発者やさまざまなイベント修飾子を簡単にするためにVue.jsによって提供されるディレクティブ。 Vue.jsに関連するこのようなより有用なコンテンツについては、linuxhint.comにアクセスし続けてください。