Vue3 イベント処理

v-on ディレクティブを使用して DOM イベントを監視し、JavaScript コードを実行できます。

v-onディレクティブは次のように省略できます@記号。

構文形式：

v-on:click="methodName"
或
@click="methodName"

v-on

<div id="app"> <button @click="counter += 1">1 を追加</button> <p>このボタンは {{ counter }} 回クリックされました。</p> </div> <script> const app = { data() { return { counter: 0 } } } Vue.createApp(app).mount('#app') </script>

試してみる »

通常、JavaScript メソッドを呼び出すにはメソッドを使用する必要があります。

v-on は定義されたメソッドを受け取り、呼び出すことができます。

v-on

<div id="app"> <!--`greet` は以下で定義されているメソッド名です--> <button @click="greet">クリック</button> </div> <script>const app = { data() { return { name: 'サンプル' } }, methods: { greet(event) { // `methods` 内部の `this` 指向当前活动实例 alert('Hello ' + this.name + '!') // `event` である原生 DOM event if (event) { alert(event.target.tagName) } } } } Vue.createApp(app).mount('#app')</script>

試してみる »

メソッドに直接バインドするだけでなく、インライン JavaScript ステートメントを使用することもできます：

v-on

<div id="app"> <button @click="say('hi')">Say hi</button> <button @click="say('what')">Say what</button> </div> <script> const app = { data() { }, methods: { say(message) { alert(message) } } } Vue.createApp(app).mount('#app') </script>

試してみる »

イベントハンドラには複数のメソッドを含めることができ、これらのメソッドはカンマ演算子で区切られます：

v-on

<div id="app"> <!--one() と two() はボタンクリックイベントで実行されます--> <button @click="one($event), two($event)">クリック</button> </div> <script>const app = { data() { }, methods: { one(event) { alert("第一个事件处理器逻辑...") }, two(event) { alert("第二个事件处理器逻辑...") } } } Vue.createApp(app).mount('#app')</script>

試してみる »

イベント修飾子

Vue.js は v-on にイベント修飾子を提供して、event.preventDefault() や event.stopPropagation() などの DOM イベントの詳細を処理します。

Vue.js はドット.で表されるディレクティブの接尾辞を使用して修飾子を呼び出します。

  • .stop- バブリングを阻止
  • .prevent- デフォルトイベントを防止
  • .capture- キャプチャを阻止
  • .self- その要素自体で発生したイベントのみを監視
  • .once- 一度だけ発火
  • .left- 左クリックイベント
  • .right- 右クリックイベント
  • .middle- 中央マウスホイールイベント
<!-- 阻止单击事件冒泡 -->
<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>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

キー修飾子

Vue では、v-on を使用してキーボードイベントを監視するときにキー修飾子を追加できます。

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

すべての keyCode を覚えるのは難しいため、Vue は最も一般的なキーに対するエイリアスを提供しています：

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

すべてのキーエイリアス：

  • .enter
  • .tab
  • .delete（"Delete" と "Backspace" キーをキャプチャ）
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

システム修飾キー：

  • .ctrl
  • .alt
  • .shift
  • .meta

マウスボタン修飾子：

  • .left
  • .right
  • .middle

例

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

.exact 修飾子

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

例

<!-- たとえ Alt や Shift が同時に押された場合でもトリガーされます -->
<button @click.ctrl="onClick">A</button>

<!-- Ctrl が押されている場合にのみトリガーされます -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- システム修飾キーが何も押されていないときにのみトリガーされます -->
<button @click.exact="onClick">A</button>
その他の拡張