8000 translate vue 2.5 additional docs (#412) · tricknotes/jp.vuejs.org@ae9659d · GitHub
[go: up one dir, main page]
Skip to content

Commit ae9659d

Browse files
kazuponkazupon
authored
translate vue 2.5 additional docs (vuejs#412)
* add errorCaptured NOTE: pick up from vuejs/v2.vuejs.org@2b147c7 * update injection NOTE: pick up from vuejs/v2.vuejs.org@31f6f92 * update ignoredElements NOTE: pick up from vuejs/v2.vuejs.org@b171877 * change scope to slot-scope NOTE: pick up from vuejs/v2.vuejs.org@db62039 * update event modifier NOTE: pick up from vuejs/v2.vuejs.org@7615776 * update typescript section NOTE: pick up from vuejs/v2.vuejs.org@2657341 * some updates NOTE: pick up from vuejs/v2.vuejs.org@8fd22cd * translate docs for vue 2.5 * add exceptional long tones * remove long tones * fix review docs
1 parent f49e1fb commit ae9659d

File tree

8 files changed

+199
-123
lines changed

8 files changed

+199
-123
lines changed

‎CONTRIBUTING.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,5 +89,7 @@
8989
#### 長音訳例外リスト
9090
> NOTE: 以下のリストは随時追加していく
9191
92+
- error: エラー
93+
- throw: スロー
9294
- flow: フロー
9395
- ...

‎src/v2/api/index.md

Lines changed: 86 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
type: api
3-
updated: 2017-10-15
3+
updated: 2017-10-17
44
---
55

66
## グローバル設定
@@ -106,15 +106,19 @@ updated: 2017-10-15
106106

107107
### ignoredElements
108108

109-
- **型:** `Array<string>`
109+
- **型:** `Array<string | RegExp>`
110110

111111
- **デフォルト:** `[]`
112112

113113
- **使用方法:**
114114

115115
``` js
116116
Vue.config.ignoredElements = [
117-
'my-custom-web-component', 'another-web-component'
117+
'my-custom-web-component',
118+
'another-web-component',
119+
// "ion-" で始まる全ての要素を無視するために `RegExp` を使用する
120+
// 2.5 以降だけ
121+
/^ion-/
118122
]
119123
```
120124

@@ -775,7 +779,7 @@ updated: 2017-10-15
775779

776780
データが変更されるとき、仮想DOM は再描画そしてパッチを適用する前に呼ばれます。
777781

778-
このフックでさらに状態を変更することができ、それらは追加で再描画のトリガーになりません。
782+
このフックでさらに状態を変更することができ、それらは追加で再描画のトリガになりません。
779783

780784
**このフックはサーバサイドレンダリングでは呼ばれません。**
781785

@@ -857,6 +861,28 @@ updated: 2017-10-15
857861

858862
- **参照:** [ライフサイクルダイアグラム](../guide/instance.html#ライフサイクルダイアグラム)
859863

864+
### errorCaptured
865+
866+
> 2.5.0 から新規
867+
868+
- **型:** `(err: Error, vm: Component, info: string) => ?boolean`
869+
870+
- **詳細:**
871+
872+
任意の子孫コンポーネントからエラーが捕捉されるときに呼び出されます。フックは、エラー、エラーをトリガするコンポーネントインスタンス、そしてどこでエラーが捕捉されたかの文字列情報、これら 3 つの引数を受け取ります。フックはエラーがさらにもっと伝播するのを防ぐために、`false` を返すことができます。
873+
874+
<p class="tip">このフックでコンポーネントの状態を変更できます。ただし、エラーが捕捉されたときに他のコンテンツを手短に迂回させる、テンプレートにおける条件または描画関数を含めるのが重要です。それ以外の場合、コンポーネントは無限描画ループに投げられます。</p>
875+
876+
**エラー伝播ルール**
877+
878+
- 標準で、これらのエラーは 1 箇所で分析サービスにレポートすることができるため、全てのエラーはグローバルな `config.errorHandler` (それが定義されている場合)に送信されます。
879+
880+
- 複数の `errorCaptured` フックがコンポーネントの継承チェーンまたは親チェーンに存在する場合は、それらの全ては、同じエラーで呼び出されます。
881+
882+
- `errorCaptured` フック自身がエラーを投げる場合、このエラーと元の捕捉されたエラー両方は、グローバルな `config.errorHandler` に送られます。
883+
884+
- `errorCaptured` フックはエラーがさらに伝播するのを防ぐために `false` を返すことができます。これは本質的に「このエラーは処理されてかつ無視する必要がある」と言っているに等しいです。任意に追加する `errorCaptured` フックまたはグローバルな `config.errorHandler` がこのエラーのために呼び出されないように防ぐ必要があります。
885+
860886
## オプション / アセット
861887

862888
### directives
@@ -955,7 +981,7 @@ updated: 2017-10-15
955981
956982
- **型:**
957983
- **provide:** `Object | () => Object`
958-
- **inject:** `Array<string> | { [key: string]: string | Symbol }`
984+
- **inject:** `Array<string> | { [key: string]: string | Symbol | Object }`
959985

960986
- **詳細:**
961987

@@ -1035,6 +1061,42 @@ updated: 2017-10-15
10351061
}
10361062
```
10371063

1064+
> 2.5.0 以降では、注入はデフォルト値で任意にできます:
1065+
1066+
``` js
1067+
const Child = {
1068+
inject: {
1069+
foo: { default: 'foo' }
1070+
}
1071+
}
1072+
```
1073+
1074+
別の名前のプロパティから注入する必要がある場合は、`from` を使用して元のプロパティを指定します:
1075+
1076+
``` js
1077+
const Child = {
1078+
inject: {
1079+
foo: {
1080+
from: 'bar',
1081+
default: 'foo'
1082+
}
1083+
}
1084+
}
1085+
```
1086+
1087+
プロパティのデフォルトと同様に、プリミティブ値以外に対してはファクトリ関数を使用する必要があります:
1088+
1089+
``` js
1090+
const Child = {
1091+
inject: {
1092+
foo: {
1093+
from: 'bar',
1094+
default: () => [1, 2, 3]
1095+
}
1096+
}
1097+
}
1098+
```
1099+
10381100
## オプション / その他
10391101

10401102
### name
@@ -1643,7 +1705,7 @@ updated: 2017-10-15
16431705

16441706
式の値の真偽に応じて、要素の CSS プロパティ `display` をトグルします。
16451707

1646-
このディレクティブは条件が変更されたとき、トランジションをトリガーします。
1708+
このディレクティブは条件が変更されたとき、トランジションをトリガします。
16471709

16481710
- **参照:** [条件付きレンダリング - v-show](../guide/conditional.html#v-show)
16491711

@@ -1655,7 +1717,7 @@ updated: 2017-10-15
16551717

16561718
バインディングの値の真偽値に基いて要素の描画を行います。要素および、ディレクティブまたはコンポーネントを含むコンテンツは、トグルしている間に破壊され再構築されます。要素が `<template>` 要素ならば、その内容は状態ブロックとして抽出されます。
16571719

1658-
このディレクティブは条件が変更されたとき、トランジションをトリガーします。
1720+
このディレクティブは条件が変更されたとき、トランジションをトリガします。
16591721

16601722
<p class="tip">`v-if` といっしょに使用されるとき、`v-for` は `v-if` より優先度が高くなります。詳細については<a href="../guide/list.html#v-for-と-v-if">リストレンダリングのガイド</a>を参照してください。</p>
16611723

@@ -1813,7 +1875,7 @@ updated: 2017-10-15
18131875
<!-- キーコードを使ったキー修飾子 -->
18141876
<input @keyup.13="onEnter">
18151877

1816-
<!-- 最大1回、クリックイベントはトリガーされます -->
1878+
<!-- 最大1回、クリックイベントはトリガされます -->
18171879
<button v-on:click.once="doThis"></button>
18181880
```
18191881

@@ -2015,8 +2077,8 @@ updated: 2017-10-15
20152077

20162078
また、それを再利用するのではなく要素/コンポーネントの置換を強制するために使用することができます。これはあなたが以下のようなことをしたい場合は便利です:
20172079

2018-
- 適切にコンポーネントのライフサイクルフックをトリガー
2019-
- トランジションのトリガー
2080+
- 適切にコンポーネントのライフサイクルフックをトリガ
2081+
- トランジションのトリガ
20202082

20212083
例:
20222084

@@ -2026,7 +2088,7 @@ updated: 2017-10-15
20262088
</transition>
20272089
```
20282090

2029-
`text` を変更するとき、`<span>` は常にパッチ適用の代わりに置換され、トランジションはトリガーされるでしょう。
2091+
`text` を変更するとき、`<span>` は常にパッチ適用の代わりに置換され、トランジションはトリガされるでしょう。
20302092

20312093
### ref
20322094

@@ -2058,6 +2120,18 @@ updated: 2017-10-15
20582120

20592121
- **参照:** [名前付きスロット](../guide/components.html#名前付きスロット)
20602122

2123+
### slot-scope
2124+
2125+
- **要求事項:** `function argument expression`
2126+
2127+
- **使用方法:**
2128+
2129+
要素またはコンポーネントをスコープ付きスロットとして示すときに使用します。属性の値は、関数シグネチャの引数位置に表示できる有効な JavaScript 式が必要です。これは、式で ES2015 destructuring (分割代入)を使用できる環境をサポートすることを意味します。
2130+
2131+
この属性は動的なバインディングはサポートしません。
2132+
2133+
- **See also:** [スコープ付きスロット](../guide/components.html#スコープ付きスロット)
2134+
20612135
### is
20622136

20632137
- **要求事項:** `string`
@@ -2109,7 +2183,7 @@ updated: 2017-10-15
21092183
- **プロパティ:**
21102184
- `name` - string、自動的に生成されるトランジション CSS クラス名で使用する。例: `name: 'fade'` は `.fade-enter`、`.fade-enter-active`などに自動で展開する。デフォルトは`"v"`
21112185
- `appear` - boolean、初期描画でのトランジションを適用するかどうか。デフォルトは `false`
2112-
- `css` - F438 boolean、CSS トランジションクラスを提供するかどうか。デフォルトは `true`。`false` に設定する場合、コンポーネントイベント経由登録された JavaScript フックだけトリガーする
2186+
- `css` - boolean、CSS トランジションクラスを提供するかどうか。デフォルトは `true`。`false` に設定する場合、コンポーネントイベント経由登録された JavaScript フックだけトリガする
21132187
- `type` - string、トランジションの終了タイミングを決定するためにトランジションイベントのタイプを指定する。利用可能な値は `"transition"`、`"animation"`。デフォルトでは自動的により長い時間を持つタイプを検出する
21142188
- `mode` - string、leaving/entering トランジションのタイミングシーケンスを制御する。利用可能なモードは、`"out-in"`、`"in-out"`。デフォルトは同時になる。
21152189
- `enter-class` - string

‎src/v2/guide/components.md

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: コンポーネント
3-
updated: 2017-10-15
3+
updated: 2017-10-17
44
type: guide
55
order: 11
66
---
@@ -504,7 +504,7 @@ date picker プラグインのテーマを指定するには、次のような
504504
すべての Vue インスタンスは [イベントインターフェイス](../api/#インスタンスメソッド-イベント) を実装しています。これは以下をできることを意味します:
505505

506506
- `$on(eventName)`を使用してイベントを購読します。
507-
- `$emit(eventName)`を使用して自身にイベントをトリガーします。
507+
- `$emit(eventName)`を使用して自身にイベントをトリガします。
508508

509509
<p class="tip">Vue のカスタムイベントはブラウザの [EventTarget API](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget) とは別ものであることに注意してください。同等に動作しますが、`$on` と `$emit` は `addEventListener` と `dispatchEvent` に対するエイリアスでは__ありません__。</p>
510510

@@ -968,12 +968,12 @@ Vue.component('child-component', {
968968
</div>
969969
```
970970

971-
親においては、特別な属性 `scope` を持つ `<template>` 要素が存在しなければならず、これはスコープ付きスロット用のテンプレートを示します。`scope` の値は、子から渡された props オブジェクトを保持する一時変数の名前です:
971+
親においては、特別な属性 `slot-scope` を持つ `<template>` 要素が存在しなければならず、これはスコープ付きスロット用のテンプレートを示します。`slot-scope` の値は、子から渡された props オブジェクトを保持する一時変数の名前として使用されます:
972972

973973
``` html
974974
<div class="parent">
975975
<child>
976-
<template scope="props">
976+
<template slot-scope="props">
977977
<span>hello from parent</span>
978978
<span>{{ props.text }}</span>
979979
</template>
@@ -992,14 +992,20 @@ Vue.component('child-component', {
992992
</div>
993993
```
994994

995+
> 2.5.0 以降では、`slot-scope` はもはや`<template>` に限定されず、どの要素やコンポーネントでも使用できます。
996+
995997
スコープ付きスロットのより一般的なユースケースは、コンポーネント利用者がリスト内の各アイテムの描画方法をカスタマイズできるようにする、リストコンポーネントでしょう:
996998

997999
``` html
9981000
<my-awesome-list :items="items">
999-
<!-- scoped slot can be named too -->
1000-
<template slot="item" scope="props">
1001-
<li class="my-fancy-item">{{ props.text }}</li>
1002-
</template>
1001+
<!-- スコープ付きスロットにも名前をつけることができます -->
1002+
<li
1003+
slot="item"
1004+
slot-scope="props"
1005+
class="my-fancy-item">
1006+
{{ props.text }}
1007+
</li>
1008+
10031009
</my-awesome-list>
10041010
```
10051011

@@ -1015,6 +1021,16 @@ Vue.component('child-component', {
10151021
</ul>
10161022
```
10171023

1024+
#### 分割代入
1025+
1026+
`scope-slot` の値は実際には関数シグネチャの引数位置に表示できる有効な JavaScript 式です。これは、式で ES2015 destructuring を使用できる環境(単一ファイルコンポーネントまたはモダンなブラウザ)をサポートすることを意味します:
1027+
1028+
``` html
1029+
<child>
1030+
<span slot-scope="{ text }">{{ text }}</span>
1031+
</child>
1032+
```
1033+
10181034
## 動的コンポーネント
10191035

10201036
予約された `<component>` 要素と、その `is` 属性に動的に束縛することで、同じマウントポイントで複数のコンポーネントを動的に切り替えることができます:
@@ -1078,7 +1094,7 @@ Vue コンポーネントのための API は、本質的に、プロパティ
10781094

10791095
- **プロパティ** 外部環境がコンポーネントにデータを渡すことを可能にします。
10801096

1081-
- **イベント** コンポーネントが外部環境の副作用をトリガーすることを可能にします。
1097+
- **イベント** コンポーネントが外部環境の副作用をトリガすることを可能にします。
10821098

10831099
- **スロット** 外部によって追加されるコンテンツとともにコンポーネントを構成することを可能にします。
10841100

‎src/v2/guide/events.md

Lines changed: 33 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: イベントハンドリング
3-
updated: 2017-09-03
3+
updated: 2017-10-17
44
type: guide
55
order: 9
66
---
@@ -200,7 +200,7 @@ methods: {
200200
> 2.1.4 から新規
201201
202202
``` html
203-
<!-- 最大1回、クリックイベントはトリガーされます -->
203+
<!-- 最大1回、クリックイベントはトリガされます -->
204204
<a v-on:click.once="doThis"></a>
205205
```
206206

@@ -244,7 +244,21 @@ methods: {
244244
Vue.config.keyCodes.f1 = 112
245245
```
246246

247-
## 修飾子キー
247+
### 自動キー修飾子
248+
249+
> 2.5.0 で新規追加
250+
251+
直接、任意の有効なキー名をそれらをケバブケースに変換することによって修飾子として [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)で公表されている任意の有効なキー名をケバブケースに変換することによって、修飾子として直接使用できます。
252+
253+
``` html
254+
<input @keyup.page-down="onPageDown">
255+
```
256+
257+
上記例では、ハンドラは `$event.key === 'PageDown'` の場合だけ呼ばれます。
258+
259+
<p class="tip">いくつかのキー (`.esc`、そして全てのアローキー) は IE9 で一貫性のない `key` 値を持っています。IE9 をサポートする必要がある場合、組み込みのエイリアスが優先されます。</p>
260+
261+
## システム修飾子キー
248262

249263
> 2.1.0 から新規
250264
@@ -267,7 +281,21 @@ Vue.config.keyCodes.f1 = 112
267281
<div @click.ctrl="doSomething">Do something</div>
268282
```
269283

270-
<p class="tip">修飾子キーは通常のキーとは異なり、`keyup` イベントと一緒に使用するときは、イベントが発生したときに押さなければならないことに注意してください。言い換えると、`keyup.ctrl` は `ctrl` を押しながらキーを離したときにのみ、トリガーされます。`ctrl` キーだけを離すと、トリガーされません。</p>
284+
<p class="tip">修飾子キーは通常のキーとは異なり、`keyup` イベントと一緒に使用するときは、イベントが発生したときに押さなければならないことに注意してください。言い換えると、`keyup.ctrl` は `ctrl` を押しながらキーを離したときにのみ、トリガされます。`ctrl` キーだけを離すと、トリガされません。</p>
285+
286+
### `.exact` 修飾子
287+
288+
> 2.5.0 で新規追加
289+
290+
`.exact` 修飾子は他のシステム修飾子と組み合わせて使用して、ハンドラが起動するために、修飾子の厳密な組み合わせを押す必要があるということ示します。
291+
292+
``` html
293+
<!-- これは Alt キー または Shift キーを押された場合でも、発行されます -->
294+
<button @click.ctrl="onClick">A</button>
295+
296+
<!-- これは Ctrl キーが押されたときだけ発行されます -->
297+
<button @click.ctrl.exact="onCtrlClick">A</button>
298+
```
271299

272300
### マウスボタンの修飾子
273301

@@ -277,7 +305,7 @@ Vue.config.keyCodes.f1 = 112
277305
- `.right`
278306
- `.middle`
279307

280-
これらの修飾子は、イベントのトリガーのハンドリングを、特定のマウスのボタンのみに制限します。
308+
これらの修飾子は、イベントのトリガのハンドリングを、特定のマウスのボタンのみに制限します。
281309

282310
## なぜ HTML にリスナを記述するのですか
283311

‎src/v2/guide/reactivity.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: リアクティブの探求
3-
updated: 2017-09-08
3+
updated: 2017-10-17
44
type: guide
55
order: 601
66
---
@@ -45,7 +45,7 @@ Vue.set(vm.someObject, 'b', 2)
4545
this.$set(this.someObject, 'b', 2)
4646
```
4747

48-
既存のオブジェクトに複数のプロパティを割り当てたいということがあるかもしれません。例えば、`Object.assign()` または `_.extend()` を使用しながら。しかしながら、新しいプロパティをオブジェクトに追加したとき、トリガーは変更しません。このような場合、元のオブジェクトとミックスインオブジェクトの両方のプロパティを持つ新たなオブジェクトを作成します:
48+
既存のオブジェクトに複数のプロパティを割り当てたいということがあるかもしれません。例えば、`Object.assign()` または `_.extend()` を使用しながら。しかしながら、新しいプロパティをオブジェクトに追加したとき、トリガは変更しません。このような場合、元のオブジェクトとミックスインオブジェクトの両方のプロパティを持つ新たなオブジェクトを作成します:
4949

5050
``` js
5151
// `Object.assign(this.someObject, { a: 1, b: 2 })` の代わり

‎src/v2/guide/syntax.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: テンプレート構文
3-
updated: 2017-10-14
3+
updated: 2017-10-17
44
type: guide
55
order: 4
66
---
@@ -109,7 +109,7 @@ Mustache は、HTML 属性の内部で使用することはできません。代
109109

110110
### 修飾子
111111

112-
修飾子 (Modifier) は、ドットで表記された特別な接尾語で、ディレクティブが特別な方法で束縛されるべきということを示します。例えば、`.prevent` 修飾子は `v-on` ディレクティブに、イベントがトリガーされた際 `event.preventDefault()` を呼ぶように伝えます:
112+
修飾子 (Modifier) は、ドットで表記された特別な接尾語で、ディレクティブが特別な方法で束縛されるべきということを示します。例えば、`.prevent` 修飾子は `v-on` ディレクティブに、イベントがトリガされた際 `event.preventDefault()` を呼ぶように伝えます:
113113

114114
``` html
115115
<form v-on:submit.prevent="onSubmit"></form>

0 commit comments

Comments
 (0)
0