イベント処理

イベントを監視します

あなたはできるv-onDOMイベントコマンドをリッスンし、トリガされたとき、一部のJavaScriptコードを実行します。

例：

<DIV ID = "実施例1"> 
  <ボタンVオン：クリック= "カウンタ+ = 1"> 1 </ボタンを>追加
  <P>上記ボタンは、{{カウンタ}}回クリックされた</ P。 > 
</ div>

VaRの例1 = 新しいヴュー（{ 
  EL： '＃の例1' 、
  データ：{ 
    カウンタ： 0 
  } 
}）

結果：わずか

イベントハンドラメソッド

しかし、多くのイベント処理ロジックが複雑であるため、内のJavaScriptコードに直接書き込むv-on命令することは現実的ではありません。そうv-onとも呼ばれる必要があるメソッドの名前を受け取ることができます。

例：

<DIV ID = "例- 2"> 
  <！ - `greet`は、メソッドの名前には以下に定義される- > 
  <ON-Vボタン：クリック= "挨拶">グリート</ボタン> 
</ div>

例2 = VAR 新しい新しいヴュー（{ 
  EL： '＃の例2' 、
  データ：{ 
    名： 'Vue.js' 
  }、
  // オブジェクト`methods`で定義されたメソッド
  のメソッド：{ 
    挨拶：機能（イベント）{ 
      // Vueのインスタンスプロセスで`this`この時点 
      アラート（ 'こんにちは' + この .nameの+ '！' ）
       // ` event`ネイティブDOMイベント
      IF （イベント）{ 
        アラート（event.target.tagName）
      } 
    } 
  } 
} ）

// JavaScriptメソッドの中で直接呼び出すことができます 
example2.greet（）// => 'Vue.jsこんにちは！'

結果：わずか

方法インラインプロセッサ

直接メソッドにバインドに加えて、メソッドを呼び出すJavaScriptステートメントインラインで指定できます

<DIV ID = "例-3"> 
  <ボタンV-に：クリック= "（ 'こんにちは'）と言う"> </ button>の挨拶
  <ボタンVオン：クリック= "（ '何'）と言います">言うことを</ボタン> 
</ div>

新しいヴュー（{ 
  EL： '＃例-3' 、
  メソッド：{ 
    言う：機能（メッセージ）{ 
      警告（メッセージ）
    } 
  } 
}）

時には、元のDOMイベントにインラインの文プロセッサへのアクセスを必要とします。あなたは特別な変数を使用することができ$event、それがメソッドに渡されました：

<ボタンV-に：クリック= "（ 'フォームがまだ提出することはできません。'、$イベント）警告"> 
  送信
 </ボタン>

// ... 
方法：{ 
  警告：機能（メッセージ、イベント）{ 
    // 今、私たちはネイティブのイベントオブジェクトにアクセスすることができます
    IF （イベント）{ 
      event.preventDefault（）
    } 
    アラート（メッセージ）
  } 
}

イベント修飾子

イベントハンドラで呼び出され、event.preventDefault()またはevent.stopPropagation()非常に一般的な要件。我々は簡単にプロセスのこの時点を達成することができますが、より良い方法ですが：純粋なデータロジック方式ではなく、DOMイベントの詳細は。

この問題を解決するために、Vue.jsはするv-on提供イベント修飾子を。小数点表現を開始接尾辞で修飾コマンドによって、先に述べました。

.stop
.prevent
.capture
.self
.once
.passive

<！ -停止はクリックイベントが広がり続け- > 
<a v-on:click.stop="doThis"> </a>の

<！ -イベントページをリロードしない- > 
<フォームV-ON ：submit.preventは= "をonSubmit"> </ FORM> 

<！ -修飾子は、直列に接続することができます- > 
<a v-on:click.stop.prevent="doThat"> </a>の

< -のみ変更します！ブレーク- > 
<フォームV-ON：submit.prevent> </ FORM> 

< - > -イベントリスナーを追加し、使用イベントのキャプチャモード！
このイベントは、このプロセスの最初の内部素子をトリガし、その後、 - <！内部処理要素に引き渡された- > 
<divのV-ON：click.capture = "doThis"> ... </ div> 

< - event.targetがトリガされたときにのみとき、現在の要素のハンドラ自体- ！ - > 
< -イベントが内部の要素からトリガーされていないこと- >！
<divのV-ON：click.self = "dothat"> ... </ div>

注意：

修飾子を使用する場合は、順序が重要であり、適切なコードが同じ順番で生成されます。そのため、使用がv-on:click.prevent.selfできなくなり、すべてのクリックを、しかし、v-on:click.self.prevent唯一の要素自体のクリックを防止します。

2.1.4新

<！ - -クリックイベントは一度だけトリガされます> 
<a v-on:click.once="doThis">する</a>

2.3.0新

Vueがまたに対応オプション提供修飾子。addEventListenerpassive.passive

<！ - -イベントをスクロールするためのデフォルトの動作（つまり、スクロール動作は）すぐにトリガーされます> 
< - - `onScroll`の完了を待たずに！> 
<！ -このincludes` event.preventDefault（）`ケース- > 
<divのV-ON：scroll.passive = "onScroll"> ... </ div>

これは、パフォーマンス.passive修飾子特定の携帯端末を向上させることができます。

注意：

入れないでください.passiveと.preventするので、一緒に使用.prevent無視され、ブラウザがあなたに警告を表示することがあります。それを忘れないでください.passiveあなたがいることをブラウザ伝えていないイベントのデフォルト動作を防ぎたいの。

キー修飾

キーボードイベントを聴いたとき、私たちはしばしば、詳細ボタンをチェックする必要があります。Vueがすることができv-onたときに、モニタ、キーボードイベント修飾キーを追加します。

<！ -のみ）（ `vm.submitを呼び出すために` `ときkey` Enter` is` - > 
<INPUT V-ON：keyup.enter = "送信">

あなたは指示することができKeyboardEvent.key改良剤としてケバブ、ケースの中に任意の有効なキー名の露出を。

<入力V-上：keyup.pageダウン= "onPageDown">

上記の例では、ハンドラは、ときにのみ$ event.key等しいPageDownキーを呼び出されます。

システム修飾キー

2.1.0新

あなただけの唯一のプレス対応するボタンにマウスやキーボードイベントリスナーをトリガ達成するために、次の修飾子を使用することができます。

.ctrl
.alt
.shift
.meta

例えば：

<！ - Altキー+ C - > 
<入力@ keyup.alt.67 = "クリア"> 

<！ - Ctrlキーを押しながらクリックしてください- > 
<divの@ click.ctrl = "doSomethingの">何か</ div>

注意：

修飾キーやボタン異なるルーチンを、そして中にいることに注意してくださいkeyup一緒に変更されたイベントトリガーボタンのイベントを押す必要があります。言い換えれば、ちょうど押しながらctrlトリガーに、他の状況下でリリースボタンをkeyup.ctrl。しかし、唯一のリリースでは、ctrlイベントをトリガしません。この動作をする場合は、することctrlに切り替えますkeyCode：keyup.17。

1..exact修飾子

.exact修飾子を使用すると、イベントの組み合わせによってトリガ正確なシステムの修飾を制御することができます。

<！ - - AltキーまたはShiftキーを一緒に押された場合でも、トリガします> 
<@ click.ctrlボタン= "のonClick"> A </ボタン> 

<！ -それはCtrlキートリガー押された場合にのみ- > 
<@ click.ctrl.exactボタン= "onCtrlClick"> A </ボタン> 

<！ -それがトリガーされたときに何のシステム修飾子が押されていない- > 
<@ click.exactボタン= "のonClick" > A </ボタン>

2.マウスボタンモディファイ

2.2.0新

これらの修飾子は、特定のマウスボタンに.left.right.middleハンドラの応答を制限する可能性があります。

なぜHTMLでのイベントに耳を傾けますか？

あなたは気づくかもしれない懸念の分離（関心の分離）長年の伝統と、このイベントリスナーの仕方反します。しかし、方法や表現を扱うすべてのVue.jsイベントは厳密にViewModelに現在のビューにバインドされているので、それはメンテナンスのあらゆる困難起こさない、心配しないでください。実際には、使用することは、v-onいくつかの利点があります。

HTMLテンプレートの方法で一目で簡単に対応するJavaScriptのコードを見つけることができるようになります。
手動でJavaScriptでのバインドのイベントには必要ありませんので、あなたのViewModelコードは、非常に純粋なロジックとすることができ、DOMは完全に、テストを容易に分離さ。
ViewModelには、破壊された場合は、すべてのイベントハンドラが自動的に削除されます。あなたはそれらをきれいにする方法を心配する必要はありません。

ヴュー（7）