Skip to content

Commit 9eb0f84

Browse files
authored
docs: translate special attr in api references (#478)
1 parent 8f4c8f3 commit 9eb0f84

File tree

1 file changed

+26
-26
lines changed

1 file changed

+26
-26
lines changed

src/api/special-attributes.md

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,81 +2,81 @@
22

33
## key
44

5-
- **Expects:** `number | string`
5+
- **受け入れ型:** `number | string`
66

7-
The `key` special attribute is primarily used as a hint for Vue's virtual DOM algorithm to identify VNodes when diffing the new list of nodes against the old list. Without keys, Vue uses an algorithm that minimizes element movement and tries to patch/reuse elements of the same type in-place as much as possible. With keys, it will reorder elements based on the order change of keys, and elements with keys that are no longer present will always be removed/destroyed.
7+
特別な属性 `key` は、Vue の仮想 DOM アルゴリズムのため、ノードの新しいリストを古いリストに対して差分を取るときに、VNodes を識別するヒントとして主に使われます。キーがない場合、Vue は要素の移動を最小限にするアルゴリズムを使い、できる限り同じ種類の要素をその場でパッチや再利用しようとします。キーがある場合、キーの変更順序に基づいて要素の順番を変更して、存在しなくなった キーを持つ要素は常に削除や破棄されます。
88

9-
Children of the same common parent must have **unique keys**. Duplicate keys will cause render errors.
9+
同じ共通の親を持つ子どもは、**ユニークなキー** をもつ必要があります。重複したキーはレンダリングエラーを発生します。
1010

11-
The most common use case is combined with `v-for`:
11+
最も一般的な使用例は、`v-for` との組み合わせです:
1212

1313
```html
1414
<ul>
1515
<li v-for="item in items" :key="item.id">...</li>
1616
</ul>
1717
```
1818

19-
It can also be used to force replacement of an element/component instead of reusing it. This can be useful when you want to:
19+
これは要素やコンポーネントを再利用するのではなく、強制的に置換するときにも使えます。これは次のようなことをしたいときに便利です:
2020

21-
- Properly trigger lifecycle hooks of a component
22-
- Trigger transitions
21+
- コンポーネントのライフサイクルフックを適切に引き起こす
22+
- トランジションを引き起こす
2323

24-
For example:
24+
例えば:
2525

2626
```html
2727
<transition>
2828
<span :key="text">{{ text }}</span>
2929
</transition>
3030
```
3131

32-
When `text` changes, the `<span>` will always be replaced instead of patched, so a transition will be triggered.
32+
`text` が変更されたとき、`<span>` は常にパッチではなく置換され、トランジションが引き起こされます。
3333

3434
## ref
3535

36-
- **Expects:** `string | Function`
36+
- **受け入れ型:** `string | Function`
3737

38-
`ref` is used to register a reference to an element or a child component. The reference will be registered under the parent component's `$refs` object. If used on a plain DOM element, the reference will be that element; if used on a child component, the reference will be component instance:
38+
`ref` は要素や子コンポーネントの参照を登録するのに使います。参照は親コンポーネントの `$refs` オブジェクトの下に登録されます。単純に DOM 要素で使った場合、参照はその要素になります。子コンポーネントで使った場合、参照はコンポーネントインスタンスになります:
3939

4040
```html
41-
<!-- vm.$refs.p will be the DOM node -->
41+
<!-- vm.$refs.p DOM ノードになります -->
4242
<p ref="p">hello</p>
4343

44-
<!-- vm.$refs.child will be the child component instance -->
44+
<!-- vm.$refs.child はコンポーネントインスタンスになります -->
4545
<child-component ref="child"></child-component>
4646

47-
<!-- When bound dynamically, we can define ref as a callback function, passing the element or component instance explicitly -->
47+
<!-- 動的にバインドした場合、コールバック関数として ref を定義でき、要素やコンポーネントインスタンスを明示的に渡すことができます -->
4848
<child-component :ref="(el) => child = el"></child-component>
4949
```
5050

51-
An important note about the ref registration timing: because the refs themselves are created as a result of the render function, you cannot access them on the initial render - they don't exist yet! `$refs` is also non-reactive, therefore you should not attempt to use it in templates for data-binding.
51+
ref 登録のタイミングについての重要な注意点は、ref 自体が Render 関数の結果として作成されるため、初期レンダリングではアクセスできません。まだ存在しないからです。また `$refs` はリアクティブではないため、データバインディング用のテンプレートでは使おうとしないでください。
5252

53-
- **See also:** [Child Component Refs](../guide/component-template-refs.html)
53+
- **参照:** [子コンポーネントの参照](../guide/component-template-refs.html)
5454

5555
## is
5656

57-
- **Expects:** `string | Object (component’s options object)`
57+
- **受け入れ型:** `string | Object (コンポーネントのオプションオブジェクト)`
5858

59-
Used for [dynamic components](../guide/component-dynamic-async.html).
59+
[動的コンポーネント](../guide/component-dynamic-async.html) に使います。
6060

61-
For example:
61+
例えば:
6262

6363
```html
64-
<!-- component changes when currentView changes -->
64+
<!-- currentView が変わるとコンポーネントが変わります -->
6565
<component :is="currentView"></component>
6666
```
6767

68-
- **Usage on native elements** <Badge text="3.1+" />
68+
- **ネイティブ要素での使用方法** <Badge text="3.1+" />
6969

70-
When the `is` attribute is used on a native HTML element, it will be interpreted as a [Customized built-in element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example), which is a native web platform feature.
70+
ネイティブ HTML 要素に `is` 属性が使われると、それはウェブプラットフォームのネイティブ機能の [カスタマイズされた組み込み要素の作成](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example) として解釈されます。
7171

72-
There is, however, a use case where you may need Vue to replace a native element with a Vue component, as explained in [DOM Template Parsing Caveats](/guide/component-basics.html#dom-template-parsing-caveats). You can prefix the value of the `is` attribute with `vue:` so that Vue will render the element as a Vue component instead:
72+
しかし、[DOM テンプレートパース時の注意](/guide/component-basics.html#dom-テンプレートパース時の注意) で説明されているように、Vue がネイティブ要素を Vue コンポーネントに置き換える必要があるユースケースもあります。`is` 属性の値の前に `vue:` を付けることで、Vue がその要素を Vue コンポーネントとしてレンダリングします:
7373

7474
```html
7575
<table>
7676
<tr is="vue:my-row-component"></tr>
7777
</table>
7878
```
7979

80-
- **See also:**
81-
- [Dynamic Components](../guide/component-dynamic-async.html)
82-
- [RFC explaining the change from Vue 2](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0027-custom-elements-interop.md#customized-built-in-elements)
80+
- **参照:**
81+
- [動的コンポーネント](../guide/component-dynamic-async.html)
82+
- [Vue 2 からの変更点を説明する RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0027-custom-elements-interop.md#customized-built-in-elements)

0 commit comments

Comments
 (0)