@@ -25,7 +25,7 @@ Vue.createApp({
}).mount('#basic-event')
```
-Result:
+結果:
See the Pen
@@ -34,15 +34,15 @@ Result:
-## Method Event Handlers
+## メソッドイベントハンドラ
-The logic for many event handlers will be more complex though, so keeping your JavaScript in the value of the `v-on` attribute isn't feasible. That's why `v-on` can also accept the name of a method you'd like to call.
+多くのイベントハンドラのロジックはより複雑になっていくので、`v-on` 属性の値に JavaScript 式を記述し続けるのは現実的ではありません。そのため、`v-on` は呼び出したいメソッドの名前も受け付けます。
-For example:
+例:
```html
-
+
Greet
```
@@ -56,9 +56,9 @@ Vue.createApp({
},
methods: {
greet(event) {
- // `this` inside methods points to the current active instance
+ // メソッド内の `this` は、 Vue インスタンスを参照します
alert('Hello ' + this.name + '!')
- // `event` is the native DOM event
+ // `event` は、ネイティブ DOM イベントです
if (event) {
alert(event.target.tagName)
}
@@ -67,7 +67,7 @@ Vue.createApp({
}).mount('#event-with-method')
```
-Result:
+結果:
See the Pen
@@ -76,9 +76,9 @@ Result:
-## Methods in Inline Handlers
+## インラインメソッドハンドラ
-Instead of binding directly to a method name, we can also use methods in an inline JavaScript statement:
+メソッド名を直接指定する代わりに、インライン JavaScript 式でメソッドを指定することもできます:
```html
@@ -97,7 +97,7 @@ Vue.createApp({
}).mount('#inline-handler')
```
-Result:
+結果:
See the Pen
@@ -106,7 +106,7 @@ Result:
-Sometimes we also need to access the original DOM event in an inline statement handler. You can pass it into a method using the special `$event` variable:
+時には、インラインステートメントハンドラでオリジナルの DOM イベントを参照したいこともあるでしょう。特別な `$event` 変数を使うことでメソッドに DOM イベントを渡すことができます:
```html
@@ -118,7 +118,7 @@ Sometimes we also need to access the original DOM event in an inline statement h
// ...
methods: {
warn(message, event) {
- // now we have access to the native event
+ // ネイティブイベントを参照しています
if (event) {
event.preventDefault()
}
@@ -127,12 +127,12 @@ methods: {
}
```
-## Multiple Event Handlers
+## 複数イベントハンドラ
-You can have multiple methods in an event handler separated by a comma operator like this:
+イベントハンドラ内ではカンマで区切ることで、複数のメソッドを設定することができます:
```html
-
+
Submit
@@ -142,19 +142,19 @@ You can have multiple methods in an event handler separated by a comma operator
// ...
methods: {
one(event) {
- // first handler logic...
+ // one($event)のハンドラーロジック
},
two(event) {
- // second handler logic...
+ // two($event)のハンドラーロジック
}
}
```
-## Event Modifiers
+## イベント修飾子
-It is a very common need to call `event.preventDefault()` or `event.stopPropagation()` inside event handlers. Although we can do this easily inside methods, it would be better if the methods can be purely about data logic rather than having to deal with DOM event details.
+イベントハンドラ内での `event.preventDefault()` または `event.stopPropagation()` の呼び出しは、様々な場面で共通に必要になります。これらはメソッド内部で簡単に呼び出すことができますが、DOM イベントの込み入った処理をおこなうよりも、純粋なデータロジックだけになっている方がより良いでしょう。
-To address this problem, Vue provides **event modifiers** for `v-on`. Recall that modifiers are directive postfixes denoted by a dot.
+この問題に対応するために、Vue は `v-on` のために **イベント修飾子(event modifiers)** を提供しています。修飾子は、ドット(.)で表記されるディレクティブの接尾辞を思い返してください。
- `.stop`
- `.prevent`
@@ -164,77 +164,77 @@ To address this problem, Vue provides **event modifiers** for `v-on`. Recall tha
- `.passive`
```html
-
+
...
-
-
+
+
...
```
::: tip
-Order matters when using modifiers because the relevant code is generated in the same order. Therefore using `@click.prevent.self` will prevent **all clicks** while `@click.self.prevent` will only prevent clicks on the element itself.
+修飾子を使用するとき、関連するコードが同じ順序で生成されるため注意してください。それゆえ、`@click.prevent.self` を使用すると**全てのクリックイベント**を防ぐことはできますが、`@click.self.prevent` は要素自身におけるクリックイベントを防ぐだけです。
:::
```html
-
+
...
```
-The `.passive` modifier is especially useful for improving performance on mobile devices.
+`.passive` 修飾子は特にモバイルでのパフォーマンスを改善するのに有用です。
::: tip
-Don't use `.passive` and `.prevent` together, because `.prevent` will be ignored and your browser will probably show you a warning. Remember, `.passive` communicates to the browser that you _don't_ want to prevent the event's default behavior.
+`.passive` と `.prevent` を一緒に使わないでください。`.prevent `は無視され、ブラウザにはおそらく警告が表示されます。`.passive` はイベントのデフォルトの挙動を妨げないことをブラウザに伝達することを思い出してください。
:::
-## Key Modifiers
+## キー修飾子
-When listening for keyboard events, we often need to check for specific keys. Vue allows adding key modifiers for `v-on` or `@` when listening for key events:
+キーボードイベントを購読するにあたって、特定のキーのチェックが必要になることがあります。Vue では、`v-on` または `@` に対してキー修飾子を追加することができます:
```html
-
+
A
-
+
A
-
+
A
```
-### Mouse Button Modifiers
+### マウスボタンの修飾子
- `.left`
- `.right`
- `.middle`
-These modifiers restrict the handler to events triggered by a specific mouse button.
+これらの修飾子は、イベントのトリガのハンドリングを、特定のマウスのボタンのみに制限します。
-## Why Listeners in HTML?
+## なぜ HTML にリスナを記述するのですか
-You might be concerned that this whole event listening approach violates the good old rules about "separation of concerns". Rest assured - since all Vue handler functions and expressions are strictly bound to the ViewModel that's handling the current view, it won't cause any maintenance difficulty. In fact, there are several benefits in using `v-on` or `@`:
+これまで説明してきたようなイベント監視のアプローチは、”関心の分離”という古き良きルールを破っているのではないか、と心配されるかもしれません。安心してください。すべての Vue ハンドラ関数と式は、現在の View を扱う ViewModel に厳密に閉じています。それによってメンテナンスが難しくなることはありません。実際、`v-on` または `@` を利用することでいくつかの利点があります。
-1. It's easier to locate the handler function implementations within your JS code by skimming the HTML template.
+1. HTML テンプレートを眺めることで、JS コード内のハンドラ関数を探すことを容易にします
-2. Since you don't have to manually attach event listeners in JS, your ViewModel code can be pure logic and DOM-free. This makes it easier to test.
+2. JS 内のイベントリスナーを手作業でアタッチする必要がないので、ViewModel を DOM 依存のない純粋なロジックにできます。これはテスタビリティを向上させます。
-3. When a ViewModel is destroyed, all event listeners are automatically removed. You don't need to worry about cleaning it up yourself.
+3. ViewModel が消去されるときに、すべてのイベントリスナーは自動で削除されます。手動でそれらの消去をおこなうことを気にする必要はありません。