Update some docs (#1339)

* [Doc]: Link to VNode info where it is first mentioned #1332

* cherry-pick & translate vuejs/v2.vuejs.org@41e2de6

* [Doc]: Unify examples HTML formatting #1335

* cherry-pick & translate vuejs/v2.vuejs.org@42348d2

* [Doc]: Format examples #1336

* cherry-pick & translate vuejs/v2.vuejs.org@a28399e

* [Doc]: improve phrasing in conditonal key demo link #1337

* cherry-pick & translate vuejs/v2.vuejs.org@deca14c

Author: oohira

src/v2/guide/class-and-style.md

@@ -1,6 +1,6 @@
 ---
 title: クラスとスタイルのバインディング
-updated: 2018-07-28
+updated: 2018-12-08
 type: guide
 order: 6
 ---
@@ -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>
 ```
 
 次のようなデータがあったとすると:

src/v2/guide/components-props.md

@@ -1,5 +1,6 @@
 ---
 title: プロパティ
+updated: 2018-12-08
 type: guide
 order: 102
 ---
@@ -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 つの例では、文字列の値を渡していますが、プロパティには __任意の__ 型の値を渡すことが可能です。
@@ -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>

src/v2/guide/custom-directive.md

@@ -1,6 +1,6 @@
 ---
 title: カスタムディレクティブ
-updated: 2017-11-26
+updated: 2018-12-08
 type: guide
 order: 302
 ---
@@ -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 __が更新された後に呼ばれます。
 

src/v2/guide/index.md

@@ -1,6 +1,6 @@
 ---
 title: はじめに
-updated: 2018-10-15
+updated: 2018-12-08
 type: guide
 order: 2
 ---
@@ -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>
 ```

src/v2/style-guide/index.md

@@ -1,7 +1,7 @@
 ---
 title: スタイルガイド
 type: style-guide
-updated: 2018-10-15
+updated: 2018-12-08
 ---
 
 このドキュメントは、 Vue 固有の記法についての公式なスタイルガイドです。もしあなたがプロジェクトにおいて Vue を使用する場合は、エラーや有益でない議論、アンチパターンを避けるための参考となります。しかし、スタイルガイドはすべてのチームやプロジェクトで理想とは限らないと考えていますので、過去の経験や、周囲の技術スタック、個人の価値観に基づいた上で必要に応じて慎重に逸脱することが推奨されます。
@@ -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 %}
 #### 悪い例