From b4e82c54ce6af95bce56ee3fc034e1974f41ab94 Mon Sep 17 00:00:00 2001 From: Kohei ikeda Date: Thu, 14 Jan 2021 14:38:47 +0900 Subject: [PATCH 1/3] =?UTF-8?q?style=20guide=20C=E3=81=AE=E7=BF=BB?= =?UTF-8?q?=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/style-guide/README.md | 74 +++++++++++++++++++-------------------- 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/src/style-guide/README.md b/src/style-guide/README.md index fb5bd39d..cebd1248 100644 --- a/src/style-guide/README.md +++ b/src/style-guide/README.md @@ -1260,41 +1260,41 @@ HTML では、空白を含まない属性値は引用符でくくらなくても -## Priority C Rules: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) +## 優先度 C のルール: 推奨 (任意の選択肢と認知上のオーバーヘッドの最小化) -### Component/instance options order recommended +### コンポーネント/インスタンス オプション順序 推奨 -**Component/instance options should be ordered consistently.** +**コンポーネント/インスタンス オプションは､一貫した順序になるべきです｡** -This is the default order we recommend for component options. They're split into categories, so you'll know where to add new properties from plugins. +これは推奨するコンポーネントオプションの既定の順序です｡それらは種類分けされており､プラグインからどこに新たなプロパティを追加するか知ることができます｡ -1. **Global Awareness** (requires knowledge beyond the component) +1. **グローバルな認識** (コンポーネントを超えた知識が必要) - `name` -2. **Template Dependencies** (assets used in the template) +2. **テンプレートの依存関係** (テンプレートで使用されるアセット) - `components` - `directives` -3. **Composition** (merges properties into the options) +3. **合成** (プロパティをオプションにマージ) - `extends` - `mixins` - `provide`/`inject` -4. **Interface** (the interface to the component) +4. **インタフェース** (コンポーネントへのインタフェース) - `inheritAttrs` - `props` - `emits` -5. **Composition API** (the entry point for using the Composition API) +5. **コンポジション API** (コンポジション API を使用するためのエントリポイント) - `setup` -6. **Local State** (local reactive properties) +6. **ローカルの状態** (ローカル リアクティブ プロパティ) - `data` - `computed` -7. **Events** (callbacks triggered by reactive events) +7. **イベント** (リアクティブなイベントによって引き起こされたコールバック) - `watch` - - Lifecycle Events (in the order they are called) + - ライフサイクルイベント (呼び出される順) - `beforeCreate` - `created` - `beforeMount` @@ -1309,62 +1309,62 @@ This is the default order we recommend for component options. They're split into - `renderTracked` - `renderTriggered` -8. **Non-Reactive Properties** (instance properties independent of the reactivity system) +8. **リアクティブではないプロパティ** (リアクティブシステムから独立したインスタンス プロパティ) - `methods` -9. **Rendering** (the declarative description of the component output) +9. **レンダリング** (コンポーネント出力の宣言的な記述) - `template`/`render` -### Element attribute order recommended +### 要素の属性の順序 推奨 -**The attributes of elements (including components) should be ordered consistently.** +**要素の属性 (コンポーネントを含む) は､一貫した順序になるべきです｡** -This is the default order we recommend for component options. They're split into categories, so you'll know where to add custom attributes and directives. +これは推奨するコンポーネントオプションの既定の順序です｡それらは種類分けされており､カスタム属性とディレクティブをどこに追加するか知ることができます｡ -1. **Definition** (provides the component options) +1. **定義** (コンポーネントオプションを提供) - `is` -2. **List Rendering** (creates multiple variations of the same element) +2. **リスト描画** (同じ要素の複数のバリエーションを作成する) - `v-for` -3. **Conditionals** (whether the element is rendered/shown) +3. **条件** (要素が描画/表示されているかどうか) - `v-if` - `v-else-if` - `v-else` - `v-show` - `v-cloak` -4. **Render Modifiers** (changes the way the element renders) +4. **描画修飾子** (要素の描画方法を変更) - `v-pre` - `v-once` -5. **Global Awareness** (requires knowledge beyond the component) +5. **グローバルな認識** (コンポーネントを超えた知識が必要) - `id` -6. **Unique Attributes** (attributes that require unique values) +6. **一意の属性** (一意の値を必要とする属性) - `ref` - `key` -7. **Two-Way Binding** (combining binding and events) +7. **双方向バインディング** (バインディングとイベントの結合) - `v-model` -8. **Other Attributes** (all unspecified bound & unbound attributes) +8. **その他の属性** (すべての指定されていないバインドされた属性とバインドされていない属性) -9. **Events** (component event listeners) +9. **イベント** (コンポーネントのイベントリスナ) - `v-on` -10. **Content** (overrides the content of the element) +10. **コンテンツ** (要素のコンテンツを上書きする) - `v-html` - `v-text` -### Empty lines in component/instance options recommended +### コンポーネント/インスタンス オプションの空行 推奨 -**You may want to add one empty line between multi-line properties, particularly if the options can no longer fit on your screen without scrolling.** +**特にオプションがスクロールなしでは画面に収まらなくなった場合､複数行に渡るプロパティの間に空行を追加してみてください｡** -When components begin to feel cramped or difficult to read, adding spaces between multi-line properties can make them easier to skim again. In some editors, such as Vim, formatting options like this can also make them easier to navigate with the keyboard. +コンポーネントに窮屈さや読みづらさを感じたら､複数行に渡るプロパティの間に空行を追加する事でそれらを簡単に読み流すことができるようになります｡ Vim など､一部のエディタでは、このような書式を使用するとキーボードで簡単に移動することができます。
-

Good

+

良い例

``` js props: { @@ -1394,8 +1394,8 @@ computed: { ``` ``` js -// No spaces are also fine, as long as the component -// is still easy to read and navigate. +// コンポーネントの読み取りや移動が容易であれば、 +// 空行がなくても大丈夫です｡ props: { value: { type: String, @@ -1423,12 +1423,12 @@ computed: { ```
-### Single-file component top-level element order recommended +### 単一ファイルコンポーネントのトップレベルの属性の順序 推奨 -**[Single-file components](../guide/single-file-components.html) should always order `