イベント処理


ディレクトリ


##イベントのリッスン

v-on
ディレクティブを使用して DOM をリッスンします。イベントを生成し、トリガーされるといくつかの JavaScript コードを実行します。

例:

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

結果:

2.gif


イベント処理メソッド

#ただし、多くのイベント処理ロジックはより複雑になるため、v-on

ディレクティブに JavaScript コードを直接記述することは現実的ではありません。したがって、
v-on

は、呼び出す必要があるメソッド名も受け取ることができます。 例:

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>
var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})
// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!'

結果:

1.gif

## メソッドインライン プロセッサの場合

メソッドは、メソッドに直接バインドされるだけでなく、インライン JavaScript ステートメントでも呼び出すことができます:
<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>
new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
結果:


3.gif インライン ステートメント ハンドラーで生の DOM イベントにアクセスする必要がある場合もあります。特殊変数

$event

を使用してメソッドに渡すことができます:

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>
// ...
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}

イベント修飾子

##イベント ハンドラーで event.preventDefault() または event.stopPropagation()

を呼び出すことは、非常に一般的な要件です。これをメソッドで簡単に実装できますが、DOM イベントの詳細を処理するのではなく、純粋なデータ ロジックを備えたメソッドを使用することをお勧めします。

この問題を解決するために、Vue.js は v-onevent 修飾子 を提供します。前述したように、修飾子はドットで始まる命令接尾辞で表されます。

  • #.停止

  • ##.防止

  • #.capture
  • .self
  • .once
  • .passive
  • ##

    <!-- 阻止单击事件继续传播 -->
    <a v-on:click.stop="doThis"></a>
    
    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    
    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="doThat"></a>
    
    <!-- 只有修饰符 -->
    <form 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>
ネイティブ DOM イベントに対してのみ機能する他の修飾子とは異なり、

.once

修飾子は次のこともできます。カスタム
コンポーネント イベント

で使用できます。コンポーネントに関するドキュメントを読んでいない場合でも、心配する必要はありません。 2.3.0 新しく追加された

Vueは、

addEventListener##で提供される
passive

オプションにも対応します#.passive 修飾子。

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
この .passive 修飾子は、特にモバイルのパフォーマンスを向上させることができます。

.passive

.prevent
と一緒に使用しないでください。

.prevent は無視され、ブラウザーに警告が表示される可能性があります。 .passive は、イベントのデフォルトの動作をブロックしたくないことをブラウザーに伝えることに注意してください。

##キー修飾子


キーボード イベントをリッスンするとき、多くの場合、次のことが必要になります。詳細なキーを確認します。 Vue では、キーボード イベントをリッスンするときに v-on でキー修飾子を追加できます:
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">


KeyboardEvent.key 任意の有効なキー名を直接公開できます修飾子としてケバブケースに変換されます。

<input v-on:keyup.page-down="onPageDown">

上の例では、ハンドラー関数は $event.keyPageDown と等しい場合にのみ呼び出されます。

#キーコード


keyCodeイベントの使用法 は非推奨になっており、最新のブラウザではサポートされていない可能性があります。

keyCode 機能の使用も許可されています:

<input v-on:keyup.13="submit">
必要に応じて古いブラウザをサポートするために、Vue は最も一般的に使用されるキーコード エイリアスを提供します:

  • #.enter

  • .tab

  • .delete (「Delete」キーと「Backspace」キーをキャプチャ)

  • ##.esc

  • ##.space
  • .up
  • ##.down
  • ############。左右############## ## ## 一部のキー (

    .esc およびすべての矢印キー) は、IE9 では異なる key

    値を持っています。IE9 をサポートしたい場合は、これらの組み込みエイリアスを優先する必要があります。
  • グローバル config.keyCodes オブジェクト

    :
  • // 可以使用 `v-on:keyup.f1`
    Vue.config.keyCodes.f1 = 112
  • を使用して、キー修飾子のエイリアス をカスタマイズすることもできます。

システム修飾キー

2.1.0 新規

次の修飾子を使用して、対応するキーが押されたときにのみ起動される、マウスまたはキーボード イベントのリスナーを実装します。 ##.ctrl


##.alt

##.shift

.meta

  • 注: オンMac のシステム キーボード、meta はコマンド キー (?) に対応します。 Windows のシステム キーボードでは、メタは Windows ロゴ キー (?) に対応します。 Sun オペレーティング システムのキーボードでは、メタは実線の gem キー (◆) に対応します。他の特定のキーボード、特に MIT および Lisp マシンのキーボード、および Knight キーボードや Space-cadet キーボードなどの後継キーボードでは、meta は「META」とマークされます。シンボリック キーボードでは、メタは「META」または「Meta」とマークされます。
  • 例:

    <!-- Alt + C -->
    <input @keyup.alt.67="clear">
    
    <!-- Ctrl + Click -->
    <div @click.ctrl="doSomething">Do something</div>

  • 修飾キーは通常のキーとは異なることに注意してください。
  • keyup

    イベントと一緒に使用すると、修飾キーはイベントがトリガーされると変更されます。このキーを押す必要があります。つまり、keyup.ctrl は、

    ctrl
  • を押しながら他のキーを離すことによってのみトリガーできます。また、単に
  • ctrl

    を放しただけではイベントはトリガーされません。この動作が必要な場合は、ctrl の代わりに

    keyCode
  • を使用してください:
keyup.17

.exact

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

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>


マウス ボタン修飾子##2.2.0 新しい# ###########。左######

  • .右

  • .中

  • これら修飾子は、特定のマウス ボタンにのみ応答するようにハンドラー関数を制限します。


    #なぜ HTML でイベントをリッスンするのですか?


    このようなイベントに気づくかもしれません。傾聴のアプローチは、関心事を分離するという長年の伝統に反します。ただし、すべての Vue.js イベント ハンドラーと式は現在のビューの ViewModel に厳密にバインドされているため、メンテナンスが困難になることはありませんので、ご安心ください。実際、

    v-on の使用にはいくつかの利点があります。

    1. HTML テンプレートをスキャンすると、JavaScript コード内の対応するメソッドを簡単に見つけることができます。

    2. JavaScript でイベントを手動でバインドする必要がないため、ViewModel コードは非常に純粋なロジックとなり、DOM から完全に切り離され、テストが容易になります。

    3. ViewModelが破棄されると、すべてのイベントハンドラーが自動的に削除されます。掃除について心配する必要はありません。