Vue.js のメソッドとイベントの概要

この記事では、Vue.js のメソッドとイベントについて紹介します。これには一定の参考価値があります。困っている友人は参考にしてください。お役に立てば幸いです。

メソッドとイベント

@click 呼び出されるメソッド名の後に括弧 () を続ける必要はありません。メソッドにパラメータがある場合、ネイティブ イベント オブジェクト イベントはデフォルトで渡されます。

HTML 要素上のイベントを監視するこの設計は、DOM と JavaScript が密接に結合しており、分離の原則に違反しているように見えますが、実際はまったく逆です。 HTML を通じてどのメソッドが呼び出されているかを知ることができるため、ロジックが DOM から切り離され、メンテナンスが容易になります。

最も重要なことは、viewModel が破棄されると、すべてのイベント ハンドラーが自分で処理しなくても自動的に破棄されるということです。

Vue は、ネイティブ DOM イベントにアクセスするための特別な変数 $event を提供します。

<div id="app">
    <a href="https://www.apple.com/" @click="handleClick(&#39;禁止打开&#39;,$event)">打开链接</a>
</div>

Modifiers

Vue は次の修飾子をサポートしています:

.stop

.prevent

.capture

.self.once

具体的な使用方法は次のとおりです。

#イベント リスナーを追加する場合 イベント キャプチャを使用するmode

...

コールバックのみを実行する(子要素ではなく) 要素自体でイベントがトリガーされたとき 一度だけトリガーされ、同じことがコンポーネントに適用されますフォーム要素でキーボード イベントをリッスンするときは、キー修飾子を使用することもできます。

修飾関数	使用例
クリック イベントのバブリングを防止する	<a @click.stop="handle"></a>
送信イベントでページがリロードされなくなりました	<form @submit.prevent="handle"></form>
修飾子は連結できます	<a @click.stop.prevent="handle"></a>
#修飾子のみ	#
# ...
...

修飾関数使用例keyCode #のみvm.submit().enter.tab

### を呼び出す場合、## は 13 です	特定の keyCode に加えて、Vue はいくつかのショートカット名も提供します:

.delete (「delete」キーと「backspace」キーを補充します)

.esc

.space

.up

.down

.left

.right

これらのキー修飾子は、組み合わせて使用​​することも、マウスと併用することもできます:

.ctrl

.alt

.shift

.meta

この記事はここにすべてあります。vue.js に関するその他のコースについては、php 中国語 Web サイトの

JavaScript ビデオ チュートリアル## を参照してください。 ＃ カラム！ ！ ！

以上がVue.js のメソッドとイベントの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。