24
24
25
25
## 目次
26
26
27
- * [ モジュールベースの開発] ( #module-based-development )
28
- * [ Vueコンポーネントの名前] ( #vue-component-names )
27
+ * [ モジュールベースの開発] ( #モジュールベースの開発 )
28
+ * [ Vueコンポーネントの名前] ( #vueコンポーネントの名前 )
29
29
<!-- * [Use `*.vue` extension](#use-vue-extension) -->
30
- * [ コンポーネントの記述をシンプルに保つ] ( #keep-component-expressions-simple )
31
- * [ コンポーネントのpropをプリミティブに保つ ] ( #keep-component-props-primitive )
32
- * [ コンポーネントのpropの利用 ] ( #harness-your-component-props )
33
- * [ ` this ` を` component ` に割り当てる] ( #assign-this-to-component )
34
- * [ コンポーネント構成] ( #component-structure )
35
- * [ コンポーネントイベント名] ( #component-event-names )
36
- * [ ` this.$parent ` を避ける] ( #avoid-thisparent )
37
- * [ ` this.$refs ` は注意して使用する] ( #use-thisrefs-with-caution )
38
- * [ スタイルスコープとしてコンポーネント名を使用する] ( #use-component-name-as-style-scope )
39
- * [ コンポーネントAPIをドキュメント化する] ( #document-your-component-api )
40
- * [ コンポーネントデモの追加] ( #add-a-component-demo )
41
- * [ コンポーネントファイルをLintする] ( #lint-your-component-files )
42
- * [ 必要に応じてコンポーネントを作成する] ( #create-components-when-needed )
30
+ * [ コンポーネントの記述をシンプルに保つ] ( #コンポーネントの記述をシンプルに保つ )
31
+ * [ コンポーネントのpropsをプリミティブに保つ ] ( #コンポーネントのpropsをプリミティブに保つ )
32
+ * [ コンポーネントのpropsの利用 ] ( #コンポーネントのpropsの利用 )
33
+ * [ ` this ` を` component ` に割り当てる] ( #thisをcomponentに割り当てる )
34
+ * [ コンポーネント構成] ( #コンポーネント構成 )
35
+ * [ コンポーネントイベント名] ( #コンポーネントイベント名 )
36
+ * [ ` this.$parent ` を避ける] ( #thisparentを避ける )
37
+ * [ ` this.$refs ` は注意して使用する] ( #thisrefsは注意して使用する )
38
+ * [ スタイルスコープとしてコンポーネント名を使用する] ( #スタイルスコープとしてコンポーネント名を使用する )
39
+ * [ コンポーネントAPIをドキュメント化する] ( #コンポーネントapiをドキュメント化する )
40
+ * [ コンポーネントデモの追加] ( #コンポーネントデモの追加 )
41
+ * [ コンポーネントファイルをLintする] ( #コンポーネントファイルをlintする )
42
+ * [ 必要に応じてコンポーネントを作成する] ( #必要に応じてコンポーネントを作成する )
43
43
<!-- * [Add badge to your project](#add-badge-to-your-project) -->
44
44
45
45
62
62
経験則から言うと、各コンポーネントは100行以下のコードになるようにするのがいいでしょう。また、例えばスタンドアローンのデモを追加することによって、
63
63
Vueコンポーネントが独立して動作することを確認しましょう。
64
64
65
- [ ↑ 目次に戻る] ( #table-of-contents )
65
+ [ ↑ 目次に戻る] ( #目次 )
66
66
67
67
68
68
## Vueコンポーネントの名前
@@ -100,7 +100,7 @@ Vueコンポーネントが独立して動作することを確認しましょ
100
100
<slider ></slider > <!-- カスタム要素仕様に準拠していません -->
101
101
```
102
102
103
- [ ↑ 目次に戻る] ( #table-of-contents )
103
+ [ ↑ 目次に戻る] ( #目次 )
104
104
105
105
106
106
## コンポーネントの記述をシンプルに保つ
@@ -151,7 +151,7 @@ Vue.jsのインラインの記述は100%JavaScriptです。これは非常に
151
151
</template >
152
152
```
153
153
154
- [ ↑ 目次に戻る] ( #table-of-contents )
154
+ [ ↑ 目次に戻る] ( #目次 )
155
155
156
156
157
157
## コンポーネントのpropsをプリミティブに保つ
@@ -184,7 +184,7 @@ Vue.jsは複雑なJavaScriptオブジェクトを渡せるようになってい
184
184
<range-slider :config =" complexConfigObject" ></range-slider >
185
185
```
186
186
187
- [ ↑ 目次に戻る] ( #table-of-contents )
187
+ [ ↑ 目次に戻る] ( #目次 )
188
188
189
189
190
190
## コンポーネントのpropsの利用
@@ -227,7 +227,7 @@ Vue.jsでは、あなたのコンポーネントのpropsはあなたのAPIです
227
227
</script >
228
228
```
229
229
230
- [ ↑ 目次に戻る] ( #table-of-contents )
230
+ [ ↑ 目次に戻る] ( #目次 )
231
231
232
232
233
233
## ` this ` を` component ` に割り当てる
@@ -275,7 +275,7 @@ export default {
275
275
</script >
276
276
```
277
277
278
- [ ↑ 目次に戻る] ( #table-of-contents )
278
+ [ ↑ 目次に戻る] ( #目次 )
279
279
280
280
281
281
## コンポーネント構成
@@ -288,7 +288,7 @@ export default {
288
288
* props、data、computed、watches、そしてmethodsをアルファベット順に並べることで、見つけやすくなります。
289
289
* 繰り返しになりますが, コンポーネントをグループ化することで読みやすくなります (name、extends、props、dataそしてcomputed、components、 watch、methods、lifecycle methods、など);
290
290
* ` name ` 属性を使いましょう. [ vue devtools] ( https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en ) とname属性を使うと、開発/テストが容易になります。
291
- * [ BEM] ( https://medium.com/tldr-tech/bem-blocks-elements-and-modifiers-6b3b0af9e3ea#.bhnomd7gw ) 、または [ rscss] ( https://github.com/rstacruz/rscss ) のようなCSSの命名方法論を使いましょう。 - [ 詳細?] ( #use-component-name-as-style-scope ) ;
291
+ * [ BEM] ( https://medium.com/tldr-tech/bem-blocks-elements-and-modifiers-6b3b0af9e3ea#.bhnomd7gw ) 、または [ rscss] ( https://github.com/rstacruz/rscss ) のようなCSSの命名方法論を使いましょう。 - [ 詳細?] ( #スタイルスコープとしてコンポーネント名を使用する ) ;
292
292
* Vue.jsの製作者Evan Youが推奨するように、テンプレートスクリプト形式の.vueファイル構成を使用しましょう。
293
293
294
294
### 方法
@@ -333,7 +333,7 @@ export default {
333
333
</style >
334
334
```
335
335
336
- [ ↑ 目次に戻る] ( #table-of-contents )
336
+ [ ↑ 目次に戻る] ( #目次 )
337
337
338
338
## コンポーネントイベント名
339
339
@@ -350,7 +350,7 @@ Vue.jsはすべてのVueハンドラ関数を提供し、式はViewModelに厳
350
350
* あなたのコンポーネントで外部で関心を持つ独自のアクションのため、upload-success、upload-error、さらにはdropzone-upload-success、 dropzone-upload-errorのような固有の名前をつける必要があります。(スコープ付きプレフィックスを使用する必要がある場合は)
351
351
* イベント名は末尾が不定形の動詞(例 client-api-load)、または名詞(例 drive-upload-success)で終わるべきです。([ 出典] ( https://github.com/GoogleWebComponents/style-guide#events ) );
352
352
353
- [ ↑ 目次に戻る] ( #table-of-contents )
353
+ [ ↑ 目次に戻る] ( #目次 )
354
354
355
355
## ` this.$parent ` を避ける
356
356
@@ -367,7 +367,7 @@ Vue.jsは、親コンテキストにアクセスできるネストされたコ
367
367
* 属性の式のコールバックを使用して、親コンポーネントで定義されたメソッドを子コンポーネントに渡します。
368
368
* 子コンポーネントからイベントを発行し、それを親コンポーネントでキャッチします。
369
369
370
- [ ↑ 目次に戻る] ( #table-of-contents )
370
+ [ ↑ 目次に戻る] ( #目次 )
371
371
372
372
## ` this.$refs ` は注意して使用する
373
373
@@ -456,7 +456,7 @@ Vue.jsは`ref`属性を介して他のコンポーネントや、基本的なHTM
456
456
</script >
457
457
```
458
458
459
- [ ↑ 目次に戻る] ( #table-of-contents )
459
+ [ ↑ 目次に戻る] ( #目次 )
460
460
461
461
462
462
## スタイルスコープとしてコンポーネント名を使用する
@@ -487,7 +487,7 @@ BEMとOOCSSに基づくネームスペースプレフィックスとしてコン
487
487
</style >
488
488
```
489
489
490
- [ ↑ 目次に戻る] ( #table-of-contents )
490
+ [ ↑ 目次に戻る] ( #目次 )
491
491
492
492
493
493
## コンポーネントAPIをドキュメント化する
@@ -539,7 +539,7 @@ range sliderは、スライダーレールのハンドルを開始値と終了
539
539
スライダの外観をカスタマイズするには[ noUiSliderドキュメントのStylingセクション] ( http://refreshless.com/nouislider/more/#section-styling ) を参照してください。
540
540
541
541
542
- [ ↑ 目次に戻る] ( #table-of-contents )
542
+ [ ↑ 目次に戻る] ( #目次 )
543
543
544
544
545
545
## コンポーネントデモの追加
@@ -552,7 +552,7 @@ range sliderは、スライダーレールのハンドルを開始値と終了
552
552
* コンポーネントのデモは、ドキュメンテーションやコードを掘り起こす前に、開発者にプレビューを提供します。
553
553
* デモでは、コンポーネントを使用できるすべての可能な構成とバリエーションを示すことができます。
554
554
555
- [ ↑ 目次に戻る] ( #table-of-contents )
555
+ [ ↑ 目次に戻る] ( #目次 )
556
556
557
557
558
558
## コンポーネントファイルをLintする
@@ -566,7 +566,7 @@ Lintersはコードの一貫性を高め、構文エラーの追跡に役立ち
566
566
567
567
### 方法
568
568
569
- lintersがあなたの` *.vue ` ファイルからスクリプトを抽出するためには, [ スクリプトを` <script> ` コンポーネントの中に置き] ( #use-script-inside-component ) 、 [ コンポーネントの記述をシンプルに保つ] ( #keep-component-expressions-simple ) ようにしてください (lintersはそれらを理解できないので)。 グローバル変数` vue ` とコンポーネントの` props ` を許可するようにリンターを設定します。
569
+ lintersがあなたの` *.vue ` ファイルからスクリプトを抽出するためには, [ スクリプトを` <script> ` コンポーネントの中に置き] ( #use-script-inside-component ) 、 [ コンポーネントの記述をシンプルに保つ] ( #コンポーネントの記述をシンプルに保つ ) ようにしてください (lintersはそれらを理解できないので)。 グローバル変数` vue ` とコンポーネントの` props ` を許可するようにリンターを設定します。
570
570
571
571
#### ESLint
572
572
@@ -610,7 +610,7 @@ jshint --config modules/.jshintrc --extra-ext=html --extract=auto modules/
610
610
```
611
611
注意: JSHintは` vue ` を拡張子として受け入れず, htmlだけを受け入れます。
612
612
613
- [ ↑ 目次に戻る] ( #table-of-contents )
613
+ [ ↑ 目次に戻る] ( #目次 )
614
614
615
615
616
616
## 必要に応じてコンポーネントを作成する
@@ -633,7 +633,7 @@ Vue.jsはコンポーネントフレームワークに基づいています。
633
633
* 第2に、新しい開発ごとに、ページ全体またはその一部分について、急いで開発する前に考えてみてください。その一部がコンポーネントであることが分かっている場合は、作成してください。
634
634
* 最後に、もし確信がなければ、コンポーネントを作らないでください!"後で役立つかもしれない"コンポーネントであなたのプロジェクトを汚染するのを避けましょう。それらは空っぽで、永遠にそこにあるだけかもしれません。プロジェクトの残りの部分との互換性の複雑さを避けるために、その状態になっていたことに気づいたらすぐにそれを分解するよう注意してください。
635
635
636
- [ ↑ 目次に戻る] ( #table-of-contents )
636
+ [ ↑ 目次に戻る] ( #目次 )
637
637
638
638
---
639
639
@@ -669,7 +669,7 @@ Or html:
669
669
</a>
670
670
```
671
671
672
- [↑ 目次に戻る](#table-of-contents )
672
+ [↑ 目次に戻る](#目次 )
673
673
674
674
---
675
675
0 commit comments