From 5a61a4847f882f9549f0dae95d9d945da5a9055a Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Sat, 1 May 2021 14:06:50 +0900 Subject: [PATCH 1/9] docs: replace foo in v-model arguments https://github.com/vuejs/docs-next/commit/fb9ed21076543e4cd9550911d1fc8465024696dd#diff-0ddfe84e020022e6d0eef551720a870386146a8703934cd0cc00a952e651e402 --- src/guide/component-custom-events.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/guide/component-custom-events.md b/src/guide/component-custom-events.md index a30e3518..2f267eb6 100644 --- a/src/guide/component-custom-events.md +++ b/src/guide/component-custom-events.md @@ -33,7 +33,6 @@ app.component('custom-form', { }) ``` - ネイティブイベント（例、 `click` など）が `emits` オプションで定義されている場合、ネイティブリスナーとして扱われるのではなく、コンポーネントのイベントによって上書きされます。 ::: tip @@ -75,28 +74,29 @@ app.component('custom-form', { デフォルトでは、コンポーネントの `v-model` はプロパティとして `modelValue` を使用し、イベントとして `update:modelValue` を使用します。`v-model` 引数を渡してこれらの名前の変更が出来ます。 ```html - + ``` -この場合、子コンポーネントは `foo` プロパティを期待し、同期するために `update:foo` イベントを発行します。 + +この場合、子コンポーネントは `title` プロパティを期待し、同期するために `update:title` イベントを発行します。 ```js const app = Vue.createApp({}) app.component('my-component', { props: { - foo: String + title: String }, template: ` + :value="title" + @input="$emit('update:title', $event.target.value)"> ` }) ``` ```html - + ``` ## 複数の `v-model` のバインディング From 49caf64e11c26ca4c67350795d68169cfa75823c Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Sat, 1 May 2021 14:11:01 +0900 Subject: [PATCH 2/9] Minor edit to paragraph in Custom Events section https://github.com/vuejs/docs-next/commit/e8cf8da8fbc3d2a655a52a3d6a1331a8eda0b7c2#diff-0ddfe84e020022e6d0eef551720a870386146a8703934cd0cc00a952e651e402 --- src/guide/component-custom-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/component-custom-events.md b/src/guide/component-custom-events.md index 2f267eb6..04f833a9 100644 --- a/src/guide/component-custom-events.md +++ b/src/guide/component-custom-events.md @@ -33,7 +33,7 @@ app.component('custom-form', { }) ``` -ネイティブイベント（例、 `click` など）が `emits` オプションで定義されている場合、ネイティブリスナーとして扱われるのではなく、コンポーネントのイベントによって上書きされます。 +ネイティブイベント（例、 `click` など）が `emits` オプションで定義されている場合、ネイティブイベントリスナの __代わりに__ コンポーネントのイベントが使われます。 ::: tip コンポーネントの動作を実証するために、全ての発行されたイベントを定義することをお勧めします。 From 740517609c30e897f8f12d866c7afc929c8430c5 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Sat, 1 May 2021 14:12:27 +0900 Subject: [PATCH 3/9] fix: fixed casing for event https://github.com/vuejs/docs-next/commit/edf61f8d6d2eb1f55f26b47ba25c245298418348#diff-0ddfe84e020022e6d0eef551720a870386146a8703934cd0cc00a952e651e402 --- src/guide/component-custom-events.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/guide/component-custom-events.md b/src/guide/component-custom-events.md index 04f833a9..5d01a847 100644 --- a/src/guide/component-custom-events.md +++ b/src/guide/component-custom-events.md @@ -7,7 +7,7 @@ コンポーネントやプロパティとは違い、イベント名の大文字と小文字は自動的に変換されません。その代わり発火されるイベント名とイベントリスナ名は全く同じにする必要があります。例えばキャメルケース(camelCase)のイベント名でイベントを発火した場合: ```js -this.$emit('myEvent') +this.$emit('my-event') ``` ケバブケース(kebab-case)でリスナ名を作っても何も起こりません: @@ -33,7 +33,7 @@ app.component('custom-form', { }) ``` -ネイティブイベント（例、 `click` など）が `emits` オプションで定義されている場合、ネイティブイベントリスナの __代わりに__ コンポーネントのイベントが使われます。 +ネイティブイベント（例、 `click` など）が `emits` オプションで定義されている場合、ネイティブイベントリスナの **代わりに** コンポーネントのイベントが使われます。 ::: tip コンポーネントの動作を実証するために、全ての発行されたイベントを定義することをお勧めします。 From b6e6d6a42cb1a21a5740248fc4d286244b3fc410 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Sat, 1 May 2021 14:27:46 +0900 Subject: [PATCH 4/9] fix: fixed example for events casing https://github.com/vuejs/docs-next/commit/ec79709fd1b828f6f74069fef7a576ed0528b6f6#diff-0ddfe84e020022e6d0eef551720a870386146a8703934cd0cc00a952e651e402 --- src/guide/component-custom-events.md | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/src/guide/component-custom-events.md b/src/guide/component-custom-events.md index 5d01a847..e6e9853b 100644 --- a/src/guide/component-custom-events.md +++ b/src/guide/component-custom-events.md @@ -4,22 +4,32 @@ ## イベント名 -コンポーネントやプロパティとは違い、イベント名の大文字と小文字は自動的に変換されません。その代わり発火されるイベント名とイベントリスナ名は全く同じにする必要があります。例えばキャメルケース(camelCase)のイベント名でイベントを発火した場合: +コンポーネントやプロパティとは違い、イベント名の大文字と小文字は自動的に変換されません。その代わりに、発行されるイベント名とイベントリスナ名は全く同じにする必要があります。 ```js this.$emit('my-event') ``` -ケバブケース(kebab-case)でリスナ名を作っても何も起こりません: +```html + +``` + +camelCase（キャメルケース）のイベント名を発行している場合: + +```js +this.$emit('myEvent') +``` + +kebab-case（ケバブケース）でリスナ名を作っても何も起こりません: ```html ``` -イベント名は JavaScript 内で変数やプロパティ名として扱われることはないので、キャメルケース(camelCase)またはパスカルケース(PascalCase)を使用する理由はありません。 さらに DOM テンプレート内の `v-on` イベントリスナは自動的に小文字に変換されます ( HTML が大文字と小文字を判別しないため)。このため `@myEvent` は `@myevent` になり `myEvent` にリスナが反応することができなくなります。 +イベント名は JavaScript 内で変数やプロパティ名として扱われることはないので、camelCase または PascalCase（パスカルケース）を使用する理由はありません。 さらに DOM テンプレート内の `v-on` イベントリスナは自動的に小文字に変換されます ( HTML が大文字と小文字を判別しないため)。このため `@myEvent` は `@myevent` になり `myEvent` にリスナが反応することができなくなります。 -こういった理由から **いつもケバブケース(kebab-case)を使うこと** をお薦めします。 +こういった理由から **いつも kebab-case を使うこと** をお薦めします。 ## カスタムイベントの定義 From ea3cd341913355d33aa5aec8eeb001414c14e157 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Sat, 1 May 2021 14:34:01 +0900 Subject: [PATCH 5/9] fix: add an emits option to examples that emit events https://github.com/vuejs/docs-next/commit/e554cd6f15fb201d8dc9e03e0f07e4a80e776f19#diff-0ddfe84e020022e6d0eef551720a870386146a8703934cd0cc00a952e651e402 --- src/guide/component-custom-events.md | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/guide/component-custom-events.md b/src/guide/component-custom-events.md index e6e9853b..38e65025 100644 --- a/src/guide/component-custom-events.md +++ b/src/guide/component-custom-events.md @@ -90,12 +90,11 @@ app.component('custom-form', { この場合、子コンポーネントは `title` プロパティを期待し、同期するために `update:title` イベントを発行します。 ```js -const app = Vue.createApp({}) - app.component('my-component', { props: { title: String }, + emits: ['update:title'], template: ` + ``` ```js @@ -168,6 +166,7 @@ app.component('my-component', { default: () => ({}) } }, + emits: ['update:modelValue'], template: ` ({}) } }, + emits: ['update:modelValue'], methods: { emitValue(e) { let value = e.target.value @@ -225,19 +225,20 @@ app.mount('#app') 引数を持つ `v-model` バインディングの場合、生成されるプロパティ名は `arg + "Modifiers"` になります。 ```html - + ``` ```js app.component('my-component', { - props: ['foo', 'fooModifiers'], + props: ['description', 'descriptionModifiers'], + emits: ['update:description'], template: ` + :value="description" + @input="$emit('update:description', $event.target.value)"> `, created() { - console.log(this.fooModifiers) // { capitalize: true } + console.log(this.descriptionModifiers) // { capitalize: true } } }) ``` From 494e5ee55e1ec3e6d6267982d82ec2bd4cb629e0 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Sat, 1 May 2021 14:37:20 +0900 Subject: [PATCH 6/9] fix: update component-custom-events.md https://github.com/vuejs/docs-next/commit/367358be893fdcd7cfc42a93b0fbed1ca0581da3#diff-0ddfe84e020022e6d0eef551720a870386146a8703934cd0cc00a952e651e402 --- src/guide/component-custom-events.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/guide/component-custom-events.md b/src/guide/component-custom-events.md index 38e65025..a620851b 100644 --- a/src/guide/component-custom-events.md +++ b/src/guide/component-custom-events.md @@ -146,13 +146,13 @@ app.component('user-name', { ## `v-model` 修飾子の処理 -フォーム入力バインディングについて学習していたときに、 `v-model`に [組み込み修飾子](/guide/forms.html#modifiers) -`.trim` 、 `.number` 、および `.lazy` があることがわかりました。ただし、場合によっては、独自のカスタム修飾子を追加することもできます。 +フォーム入力バインディングについて学習していたときに、 `v-model` に [組み込み修飾子](/guide/forms.html#modifiers) - `.trim`、`.number`、および `.lazy` があることがわかりました。ただし、場合によっては、独自のカスタム修飾子を追加することもできます。 -`v-model` バインディングによって提供される文字列の最初の文字を大文字にするカスタム修飾子の例、`capitalize`を作成してみましょう。 +`v-model` バインディングによって提供される文字列の最初の文字を大文字にするカスタム修飾子の例、`capitalize` を作成してみましょう。 コンポーネント `v-model` に追加された修飾子は、`modelModifiers` プロパティを介してコンポーネントに提供されます。以下の例では、デフォルトで空のオブジェクトになる `modelModifiers` プロパティを含むコンポーネントを作成しました。 -コンポーネントの `created` ライフサイクルフックがトリガーされると、`modelModifiers` プロパティには `capitalize` が含まれ、その値は`true` になります。これは、 `v-model` バインディングに `v-model.capitalize = "var"` が設定されているためです。 +コンポーネントの `created` ライフサイクルフックがトリガーされると、`modelModifiers` プロパティには `capitalize` が含まれ、その値は `true` になります。これは、 `v-model` バインディングに `v-model.capitalize="myText"` が設定されているためです。 ```html From 8cc6b01c7187f1868cb60800b85977f464355e34 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Sat, 1 May 2021 14:52:54 +0900 Subject: [PATCH 7/9] Changed a recommendation for custom events name casing https://github.com/vuejs/docs-next/commit/2706494ebba1f70593b067e4a2bfcfd7dea90128#diff-0ddfe84e020022e6d0eef551720a870386146a8703934cd0cc00a952e651e402 --- src/guide/component-custom-events.md | 19 ++----------------- 1 file changed, 2 insertions(+), 17 deletions(-) diff --git a/src/guide/component-custom-events.md b/src/guide/component-custom-events.md index a620851b..bcc3d554 100644 --- a/src/guide/component-custom-events.md +++ b/src/guide/component-custom-events.md @@ -4,32 +4,17 @@ ## イベント名 -コンポーネントやプロパティとは違い、イベント名の大文字と小文字は自動的に変換されません。その代わりに、発行されるイベント名とイベントリスナ名は全く同じにする必要があります。 - -```js -this.$emit('my-event') -``` - -```html - -``` - -camelCase（キャメルケース）のイベント名を発行している場合: +コンポーネントやプロパティと同じように、イベント名は大文字と小文字を自動的に変換します。子コンポーネントからキャメルケースでイベントを発行すると、親コンポーネントではケバブケースのリスナを追加できるようになります: ```js this.$emit('myEvent') ``` -kebab-case（ケバブケース）でリスナ名を作っても何も起こりません: - ```html - ``` -イベント名は JavaScript 内で変数やプロパティ名として扱われることはないので、camelCase または PascalCase（パスカルケース）を使用する理由はありません。 さらに DOM テンプレート内の `v-on` イベントリスナは自動的に小文字に変換されます ( HTML が大文字と小文字を判別しないため)。このため `@myEvent` は `@myevent` になり `myEvent` にリスナが反応することができなくなります。 - -こういった理由から **いつも kebab-case を使うこと** をお薦めします。 +[プロパティの形式](/guide/component-props.html#プロパティの形式-キャメルケース-vs-ケバブケース) と同じように、DOM 内テンプレートを使っている場合は、ケバブケースのイベントリスナを使うことをお勧めします。文字列テンプーとを使っている場合は、この制約は適用されません。 ## カスタムイベントの定義 From 1151361f44e1ea7ba3f5b85153ec6aace47eb9ae Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Sat, 1 May 2021 14:58:18 +0900 Subject: [PATCH 8/9] fix: grammar and casing on video title https://github.com/vuejs/docs-next/commit/5b9060a91a8f2a67b0f6abb49310c1fff175aed1#diff-0ddfe84e020022e6d0eef551720a870386146a8703934cd0cc00a952e651e402 --- src/guide/component-custom-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/component-custom-events.md b/src/guide/component-custom-events.md index bcc3d554..2688c1b1 100644 --- a/src/guide/component-custom-events.md +++ b/src/guide/component-custom-events.md @@ -18,7 +18,7 @@ this.$emit('myEvent') ## カスタムイベントの定義 -Watch a free video about Defining Custom Events on Vue School +Vue School でカスタムイベントの定義についての無料ビデオを視聴する 発行されたイベントは、 `emits` オプションを介して、コンポーネントで定義することが出来ます。 From 8730ff671f995ceccfed4c29ca63e87b9d66e2d9 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Sat, 1 May 2021 14:59:24 +0900 Subject: [PATCH 9/9] Convert unexplained variables to arguments in an emits example https://github.com/vuejs/docs-next/commit/240097350da0422a2fc2ee340ae410f8266255e9#diff-0ddfe84e020022e6d0eef551720a870386146a8703934cd0cc00a952e651e402 --- src/guide/component-custom-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/component-custom-events.md b/src/guide/component-custom-events.md index 2688c1b1..3228e525 100644 --- a/src/guide/component-custom-events.md +++ b/src/guide/component-custom-events.md @@ -57,7 +57,7 @@ app.component('custom-form', { } }, methods: { - submitForm() { + submitForm(email, password) { this.$emit('submit', { email, password }) } }