Skip to content

Update some docs #1339

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Dec 11, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions src/v2/guide/class-and-style.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: クラスとスタイルのバインディング
updated: 2018-07-28
updated: 2018-12-08
type: guide
order: 6
---
Expand All @@ -22,9 +22,10 @@ order: 6
オブジェクトにさらにフィールドを持たせることで複数のクラスを切り替えることができます。加えて、`v-bind:class` ディレクティブはプレーンな `class` 属性と共存できます。つまり、次のようなテンプレートと:

``` html
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
```

次のようなデータがあったとすると:
Expand Down
12 changes: 10 additions & 2 deletions src/v2/guide/components-props.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
---
title: プロパティ
updated: 2018-12-08
type: guide
order: 102
---
Expand Down Expand Up @@ -62,7 +63,9 @@ props: {
<blog-post v-bind:title="post.title"></blog-post>

<!-- 複数の変数を合成した値を動的に割り当てます -->
<blog-post v-bind:title="post.title + ' by ' + post.author.name"></blog-post>
<blog-post
v-bind:title="post.title + ' by ' + post.author.name"
></blog-post>
```

上の 2 つの例では、文字列の値を渡していますが、プロパティには __任意の__ 型の値を渡すことが可能です。
Expand Down Expand Up @@ -108,7 +111,12 @@ props: {
```html
<!-- オブジェクトが静的な値であっても、 Vue へとそれを伝えるには v-bind が必要です。 -->
<!-- これもまた、文字列ではなく JavaScript の式となります。 -->
<blog-post v-bind:author="{ name: 'Veronica', company: 'Veridian Dynamics' }"></blog-post>
<blog-post
v-bind:author="{
name: 'Veronica',
company: 'Veridian Dynamics'
}"
></blog-post>

<!-- 変数の値を動的に割り当てています。 -->
<blog-post v-bind:author="post.author"></blog-post>
Expand Down
3 changes: 2 additions & 1 deletion src/v2/guide/custom-directive.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: カスタムディレクティブ
updated: 2017-11-26
updated: 2018-12-08
type: guide
order: 302
---
Expand Down Expand Up @@ -67,6 +67,7 @@ directive definition object はいくつかのフック関数(全て任意)を
- `inserted`: ひも付いている要素が親 Node に挿入された時に呼ばれます(これは、親 Node が存在している時にだけ保証します。必ずしも、ドキュメントにあるとは限りません)。

- `update`: ひも付いた要素を抱合しているコンポーネントの VNode が更新される度に呼ばれます。__しかし、おそらく子コンポーネントが更新される前でしょう。__ ディレクティブの値が変化してもしなくても、バインディングされている値と以前の値との比較によって不要な更新を回避することができます。(フック引数に関しては下記を参照してください)
<p class="tip">VNodes については [あとで](./render-function.html#仮想-DOM) 詳細に扱います。 [描画関数](./render-function.html) を説明するときです。</p>

- `componentUpdated`: 抱合しているコンポーネントの VNode __と子コンポーネントの VNode __が更新された後に呼ばれます。

Expand Down
8 changes: 6 additions & 2 deletions src/v2/guide/index.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: はじめに
updated: 2018-10-15
updated: 2018-12-08
type: guide
order: 2
---
Expand Down Expand Up @@ -319,7 +319,11 @@ Vue.component('todo-item', {
これにより内容は動的に変化します。
また後述する "key" を各コンポーネントに提供する必要があります。
-->
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
```
Expand Down
4 changes: 2 additions & 2 deletions src/v2/style-guide/index.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: スタイルガイド
type: style-guide
updated: 2018-10-15
updated: 2018-12-08
---

このドキュメントは、 Vue 固有の記法についての公式なスタイルガイドです。もしあなたがプロジェクトにおいて Vue を使用する場合は、エラーや有益でない議論、アンチパターンを避けるための参考となります。しかし、スタイルガイドはすべてのチームやプロジェクトで理想とは限らないと考えていますので、過去の経験や、周囲の技術スタック、個人の価値観に基づいた上で必要に応じて慎重に逸脱することが推奨されます。
Expand Down Expand Up @@ -1711,7 +1711,7 @@ computed: {

**それらが同じ種類の要素の場合、通常は `v-if` + `v-else` と一緒に `key` を使用するのが最善です(例: どちらも `<div>` 要素).**

デフォルトでは、Vue は可能な限り効率的に DOM を更新します。これは、同じ種類の要素間を切り替えるときに、既存の要素を取り除いてそこに新しい要素を作成するのではなく、単純に既存の要素を修正することを意味します。これらの要素が、実際には同一とみなされないほうが良い場合、[予期せぬ副作用](https://jsfiddle.net/chrisvfritz/bh8fLeds/)を起こすことがあります。
デフォルトでは、Vue は可能な限り効率的に DOM を更新します。これは、同じ種類の要素間を切り替えるときに、既存の要素を取り除いてそこに新しい要素を作成するのではなく、単純に既存の要素を修正することを意味します。これらの要素が、実際には同一とみなされないほうが良い場合、[予期せぬ結果](https://jsfiddle.net/chrisvfritz/bh8fLeds/)を起こすことがあります。

{% raw %}<div class="style-example example-bad">{% endraw %}
#### 悪い例
Expand Down