メソッドプロセッサ
v-onコマンドを使用して、DOMイベントをリッスンできます。
<div id = "example"> <button v-on：click = "greet"> greet </button> </div>
クリックイベントハンドラーをメソッドの挨拶にバインドします。以下は、Vueインスタンスで定義されている方法です。
var vm = new vue（{el： '＃example'、data：{name： 'vue.js'}、// `methods` object：{greed：function（event）{//メソッドのポイント` this`ポイント `this` bm alert（ 'hello' + this.name + '！'） }}）// javascriptコード//-> 'hello vue.js！'でメソッドvm.greet（）を呼び出すこともできます。自分でテストしてください
インラインステートメントプロセッサ
メソッドへの直接バインドに加えて、インラインJavaScriptステートメントを使用することもできます。
<div id = "example-2"> <button v-on：click = "say（ 'hi'）"> say hi </button> <button v-on：click = "say（ 'what'）" what </button> </div>
New Vue（{el： '＃Example-2'、Methods：{say：function（msg）{alert（msg）}}}）インライン式と同様に、イベントハンドラーは1つのステートメントに制限されています。
また、インラインステートメントプロセッサでネイティブDOMイベントにアクセスする必要がある場合があります。特別な変数$イベントを使用して、メソッドに渡すことができます。
<ボタンv-on：click = "say（ 'hello！'、$ event）">送信</button>
// ...方法：{say：function（msg、event）{//ネイティブイベントオブジェクトEvent.preventdefault（）}}にアクセスできます。イベント修飾子
イベントプロセッサでは、event.preventdefault（）またはevent.stoppropagation（）が必要です。メソッド内で簡単に実行できますが、DOMイベントの詳細を処理せずにメソッドを純粋なデータロジックにする方が良いでしょう。
この問題を解決するために、vue.jsはV-onに2つのイベント修飾子を提供します：.Preventと.Stop。修飾子がドットから始まる命令サフィックスであることを覚えていますか？
<！ - クリックイベントが泡立ってからイベントを防ぐ - > <a v-on：click.stop = "dothis"> </a> <！ - イベントを送信しなくなりましたページを過負荷にしなくなります - > <form v-on：submit.prevent = "onsubmit"> </form> <！ - モディファイ因子はcatっています - > <> < v-on：submit.prevent> </form>
1.0.16 2つの追加修飾子を追加しました。
<イベントリスナーを追加するときにキャプチャモードを使用します - > <div v-on：click.capture = "dothis"> ... </div> <！ - コールバックは、イベントが要素自体でトリガーされた場合にのみトリガーされます（子要素ではありません） - > <div v-on：click.self = "dothat"> ... </div> ... </div>
キー修飾子
キーボードイベントをリッスンするときは、キーコードを検出する必要があることがよくあります。 vue.jsを使用すると、キーモディファイヤーをv-onに追加できます。
<！ - vm.submit（）は、keycodeが13の場合にのみ呼び出されます - > <input v-on：keyup.13 = "submit">
すべてのキーコードは難しいことを忘れないでください。Vue.jsは、最も一般的に使用されるキーのエイリアスを提供します。
<
すべての重要なエイリアス：
•入力
•タブ
•消去
•ESC
•空間
•上
•下
•左
•右
1.0.8+：シングルレッターのキーエイリアスをサポートしています。
1.0.17+：キーエイリアスをカスタマイズできます：
// @keyup.f1vue.directive（ 'on'）。keycodes.f1= 112を使用できます
なぜHTMLでイベントを聞くのですか？
この種のイベント監視方法は、「懸念の分離」という従来の概念に反することに気付いたかもしれません。心配しないでください。すべてのvue.jsイベント処理方法と表現は、現在のビューのビューモデルに厳密に結合されており、メンテナンスの困難を引き起こすことはありません。実際、V-onを使用することにはいくつかの利点があります。
1. HTMLテンプレートをスキャンすると、JavaScriptコードで対応するメソッドを簡単に見つけることができます。
2。JavaScriptでイベントを手動で結合する必要がないため、ViewModelコードは非常に純粋なロジックであり、DOMから完全に分離されてテストしやすくなります。
3. ViewModelが破壊されると、すべてのイベントプロセッサが自動的に削除されます。自分で掃除する方法を心配する必要はありません。
この記事は、「vue.jsフロントエンドコンポーネント学習チュートリアル」にまとめられており、誰もが学習して読むことを歓迎します。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。