File tree 6 files changed +8
-8
lines changed
6 files changed +8
-8
lines changed Original file line number Diff line number Diff line change 2
2
3
3
> このページは [ コンポーネントの基本] ( component-basics.md ) が読まれていることが前提となっています。 コンポーネントを扱った事のない場合はこちらのページを先に読んでください。
4
4
5
- プロパティでない属性とは、コンポーネントに渡される属性やイベントリスナのうち、[ props] ( component-props ) や [ emits] ( component-custom-events.html#defining-custom-events ) で定義されたものを除いたものをいいます。よくある例としては、コンポーネント要素タグに付与する ` class ` 、` style ` 、` id ` などの属性があります。これらの属性には ` $attrs ` プロパティでアクセスできます。
5
+ プロパティでない属性とは、コンポーネントに渡される属性やイベントリスナのうち、[ props] ( component-props ) や [ emits] ( component-custom-events.html#カスタムイベントの定義 ) で定義されたものを除いたものをいいます。よくある例としては、コンポーネント要素タグに付与する ` class ` 、` style ` 、` id ` などの属性があります。これらの属性には ` $attrs ` プロパティでアクセスできます。
6
6
7
7
## 属性の継承
8
8
Original file line number Diff line number Diff line change @@ -25,7 +25,7 @@ app.component('my-component-name', {
25
25
26
26
こうする事で、既に存在するそして将来的に定義される HTML 要素とのコンフリクトを回避する助けになります。
27
27
28
- その他のコンポーネント名の推奨項目は [ スタイルガイド] ( ../style-guide/#base-component-names-strongly-recommended ) で確認することができます。
28
+ その他のコンポーネント名の推奨項目は [ スタイルガイド] ( ../style-guide/#基底コンポーネントの名前-強く推奨 ) で確認することができます。
29
29
30
30
### 命名のケース (Name Casing)
31
31
Original file line number Diff line number Diff line change 90
90
## ` v-if ` と ` v-for `
91
91
92
92
::: tip Note
93
- ` v-if ` と ` v-for ` を同時に利用することは ** 推奨されません** 。 詳細については [ スタイルガイド] ( ../style-guide/#avoid-v-if-with -v-for-essential ) を参照ください。
93
+ ` v-if ` と ` v-for ` を同時に利用することは ** 推奨されません** 。 詳細については [ スタイルガイド] ( ../style-guide/#v-for-と一緒に -v-if-を使うのを避ける-必須 ) を参照ください。
94
94
:::
95
95
96
- ` v-if ` と ` v-for ` が同じ要素に両方つかわれる場合、 ` v-if ` が先に評価されます。詳細については [ リストレンダリングのガイド] ( list.html#v-for-with -v-if ) を参照してください。
96
+ ` v-if ` と ` v-for ` が同じ要素に両方つかわれる場合、 ` v-if ` が先に評価されます。詳細については [ リストレンダリングのガイド] ( list.html#v-for-と -v-if ) を参照してください。
Original file line number Diff line number Diff line change @@ -285,4 +285,4 @@ vm.selected.number // => 123
285
285
286
286
> まだ Vue コンポーネントに慣れていない場合、この節は一旦スキップすることができます。
287
287
288
- HTML 組み込みの input タイプが、常にあなたのニーズに適っているとは限りません。幸運にも、Vue コンポーネントによって、動作を隅々までカスタマイズ可能な再利用性のある入力フォームを自作することができます。それらのフォームに ` v-model ` を使うことも可能です!詳しくは、コンポーネントガイドの [ カスタム input] ( ./component-basics.html#using -v-model-on-components ) を参照してください。
288
+ HTML 組み込みの input タイプが、常にあなたのニーズに適っているとは限りません。幸運にも、Vue コンポーネントによって、動作を隅々までカスタマイズ可能な再利用性のある入力フォームを自作することができます。それらのフォームに ` v-model ` を使うことも可能です!詳しくは、コンポーネントガイドの [ カスタム input] ( ./component-basics.html#コンポーネントで -v-model-を使う ) を参照してください。
Original file line number Diff line number Diff line change @@ -248,7 +248,7 @@ app.mount(...)
248
248
</ol >
249
249
```
250
250
251
- しかし、これでは全ての todo で同じ文字列がレンダリングされてしまうだけで、あまり面白くありません。親のスコープから子コンポーネントへとデータを渡せるようにすべきです。[ プロパティ] ( component-basics.html#passing-data-to-child-components-with-props ) を受け取れるようにコンポーネントの定義を変えてみましょう:
251
+ しかし、これでは全ての todo で同じ文字列がレンダリングされてしまうだけで、あまり面白くありません。親のスコープから子コンポーネントへとデータを渡せるようにすべきです。[ プロパティ] ( component-basics.html#プロパティを用いた子コンポーネントへのデータの受け渡し ) を受け取れるようにコンポーネントの定義を変えてみましょう:
252
252
253
253
``` js
254
254
app .component (' todo-item' , {
Original file line number Diff line number Diff line change @@ -127,7 +127,7 @@ Vue が各ノードの識別情報を追跡できるヒントを与えるため
127
127
</div >
128
128
```
129
129
130
- 繰り返される DOM の内容が単純な場合や、性能向上のためにデフォルトの動作を意図的に頼る場合を除いて、可能なときはいつでも ` v-for ` に ` key ` 属性を与えることが[ 推奨されます] ( /style-guide/#keyed -v-for-essential ) 。
130
+ 繰り返される DOM の内容が単純な場合や、性能向上のためにデフォルトの動作を意図的に頼る場合を除いて、可能なときはいつでも ` v-for ` に ` key ` 属性を与えることが[ 推奨されます] ( /style-guide/#キー付き -v-for-必須 ) 。
131
131
132
132
これは Vue がノードを識別する汎用的な仕組みなので、` key ` はガイドの後半でわかるように ` v-for ` に縛られない他の用途もあります。
133
133
@@ -237,7 +237,7 @@ methods: {
237
237
## ` v-for ` と ` v-if `
238
238
239
239
::: tip
240
- ` v-if ` と ` v-for ` を同時に利用することは** 推奨されません** 。 詳細については [ スタイルガイド] ( ../style-guide/#avoid-v-if-with -v-for-essential ) を参照ください。
240
+ ` v-if ` と ` v-for ` を同時に利用することは** 推奨されません** 。 詳細については [ スタイルガイド] ( ../style-guide/#v-for-と一緒に -v-if-を使うのを避ける-必須 ) を参照ください。
241
241
:::
242
242
243
243
それらが同じノードに存在するとき、 ` v-if ` は ` v-for ` よりも高い優先度を持ちます。つまり ` v-if ` の条件は、 ` v-for ` のスコープの変数にはアクセスできないということです:
You can’t perform that action at this time.
0 commit comments