@@ -65,17 +65,21 @@ type: api
65
65
66
66
- ** 型:** ` Function `
67
67
68
- - ** デフォルト:** エラーが代わりにスローされます
68
+ - ** デフォルト:** ` undefined `
69
69
70
70
- ** 使用方法:**
71
71
72
72
``` js
73
- Vue .config .errorHandler = function (err , vm ) {
73
+ Vue .config .errorHandler = function (err , vm , type ) {
74
74
// エラー処理
75
+ // `type` は Vue 固有のエラー種別です(例: どのライフサイクルフックでエラーが起きたかなど)。
76
+ // 2.2.0 以降で使用できます。
75
77
}
76
78
```
77
79
78
- コンポーネントの描画とウォッチャいおいて未捕獲のエラーに対してハンドラを割り当てます。ハンドラはエラーと Vue インスタンスが引数に渡されて呼び出されます。
80
+ コンポーネントの描画関数とウォッチャにおいて未捕獲のエラーに対してハンドラを割り当てます。ハンドラはエラーと Vue インスタンスが引数に渡されて呼び出されます。
81
+
82
+ > 2.2.0 では、このフックは、コンポーネントのライフサイクルフック中のエラーも捉えます。また、このフックが ` undefined ` の場合、捕捉されたエラーは、アプリケーションをクラッシュさせずに、代わりに ` console.error ` を用いて記録されます。
79
83
80
84
> このオプションのを使用して、[ Sentry] ( https://sentry.io ) というエラー追跡サービスを[ 公式に統合] ( https://sentry.io/for/vue/ ) ために使用します。
81
85
@@ -110,11 +114,35 @@ type: api
110
114
f1: 112 ,
111
115
mediaPlayPause: 179 ,
112
116
up: [38 , 87 ]
113
- }
117
+ }
114
118
```
115
119
116
120
` v-on ` 向けにカスタムキーエイリアスを定義します。
117
121
122
+ ## performance
123
+
124
+ > 2.2.0 の新機能
125
+
126
+ - ** 型:** ` boolean `
127
+
128
+ - ** デフォルト:** ` false `
129
+
130
+ - ** 使用方法** :
131
+
132
+ これを ` true ` に設定することで、ブラウザの開発者ツールのタイムライン機能で、コンポーネントの初期化やコンパイル、描画、パッチのパフォーマンス追跡することが可能になります。 この機能は、開発者モードおよび [ performance.mark] ( https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark ) API をサポートするブラウザでのみ動作します。
133
+
134
+ ### productionTip
135
+
136
+ > 2.2.0 の新機能
137
+
138
+ - ** 型:** ` boolean `
139
+
140
+ - ** デフォルト:** ` true `
141
+
142
+ - ** 使用方法** :
143
+
144
+ これを ` false ` に設定すると、 Vue の起動時のプロダクションのヒントが表示されなくなります。
145
+
118
146
## グローバル API
119
147
120
148
<h3 id =" Vue-extend " >Vue.extend( options )</h3 >
@@ -197,17 +225,19 @@ type: api
197
225
- ** 参照:** [ リアクティブの探求] ( ../guide/reactivity.html )
198
226
199
227
200
- <h3 id =" Vue-delete " >Vue.delete( object , key )</h3 >
228
+ <h3 id =" Vue-delete " >Vue.delete( target , key )</h3 >
201
229
202
230
- ** 引数:**
203
- - ` {Object} object `
204
- - ` {string} key `
231
+ - ` {Object | Array} target `
232
+ - ` {string | number } key `
205
233
206
234
- ** 使用方法:**
207
235
208
236
オブジェクトのプロパティを削除します。オブジェクトがリアクティブの場合、削除がトリガし View が更新されることを保証します。これは主に Vue がプロパティの削除を検知できないという制約を回避するために使われますが、使う必要があることはまれです。
209
237
210
- ** オブジェクトは Vue インスタンス、または Vue インスタンスのルートな data オブジェクトにできないことに注意してください。**
238
+ > 2.2.0 以降では、 Array とそのインデックスでも動作します。
239
+
240
+ <p class =" tip " >Vue インスタンスや Vue インスタンスのルートデータオブジェクトを対象とすることはできません。</p >
211
241
212
242
- ** 参照:** [ リアクティブの探求] ( ../guide/reactivity.html )
213
243
@@ -340,7 +370,7 @@ type: api
340
370
341
371
``` js
342
372
var version = Number (Vue .version .split (' .' )[0 ])
343
-
373
+
344
374
if (version === 2 ) {
345
375
// Vue v2.x.x
346
376
} else if (version === 1 ) {
@@ -602,7 +632,7 @@ type: api
602
632
603
633
### render
604
634
605
- - ** 型:** ` Function `
635
+ - ** 型:** ` (createElement: () => VNode) => VNode `
606
636
607
637
- ** 詳細:**
608
638
@@ -613,6 +643,34 @@ type: api
613
643
- ** 参照:**
614
644
- [ 描画関数] ( ../guide/render-function.html )
615
645
646
+ ### renderError
647
+
648
+ > 2.2.0 からの新機能
649
+
650
+ - ** 型:** ` (createElement: () => VNode, error: Error) => VNode `
651
+
652
+ - ** 詳細:**
653
+
654
+ ** development モードでのみ動作します。**
655
+
656
+ デフォルトの ` render ` 関数にてエラーが発生した際に、代替となる描画結果を提供します。この際、エラーは ` renderError ` へ、第二引数として渡されます。この機能は、特にホットリロードなどと併用する場合に重宝します。
657
+
658
+ - ** 例:**
659
+
660
+ ``` js
661
+ new Vue ({
662
+ render (h ) {
663
+ throw new Error (' oops' )
664
+ },
665
+ renderError (h , err ) {
666
+ return h (' pre' , { style: { color: ' red' }}, err .stack )
667
+ }
668
+ }).$mount (' #app' )
669
+ ```
670
+
671
+ - ** 参照:**
672
+ - [ 描画関数] ( ../guide/render-function )
673
+
616
674
## オプション / ライフサイクルフック
617
675
618
676
全てのライフサイクルフックは、データ、算出プロパティ、およびメソッドにアクセスできるようにするために、自動的にインスタンスに束縛する ` this ` コンテキストを持っています。これは、__ ライフサイクルメソッド(例 ` created: () => this.fetchTodos() ` ) を定義するためにアロー関数を使用すべきではないこと__ を意味します。アロー関数は、` this ` が期待する Vue インスタンスではなく、` this.fetchTodos ` が undefined になるため、親コンテキストに束縛できないことが理由です。
@@ -777,7 +835,7 @@ type: api
777
835
- ** 参照:**
778
836
- [ コンポーネント] ( ../guide/components.html )
779
837
780
- ## オプション / その他
838
+ ## オプション / 組成
781
839
782
840
### parent
783
841
@@ -815,18 +873,6 @@ type: api
815
873
816
874
- ** 参照:** [ ミックスイン] ( ../guide/mixins.html )
817
875
818
- ### name
819
-
820
- - ** 型:** ` string `
821
-
822
- - ** 制約:** コンポーネントのオプションで使われたときのみ、有効なので注意してください。
823
-
824
- - ** 詳細:**
825
-
826
- テンプレート内でのコンポーネント自身の再帰呼び出しを許可します。コンポーネントは ` Vue.component() ` でグローバルに登録され、グローバル ID はその名前に自動的に設定される事に注意してください。
827
-
828
- ` name ` オプションのもう1つの利点は、デバッギングです。名前付きコンポーネントはより便利な警告メッセージが表示されます。また、[ vue-devtools] ( https://github.com/vuejs/vue-devtools ) でアプリケーションを検査するとき、名前付きでないコンポーネントは ` <AnonymousComponent> ` として表示され、とても有益ではありません。` name ` オプションの提供によって、はるかに有益なコンポーネントツリーを取得できるでしょう。
829
-
830
876
### extends
831
877
832
878
- ** 型:** ` Object | Function `
@@ -849,6 +895,80 @@ type: api
849
895
}
850
896
```
851
897
898
+ ### provide / inject
899
+
900
+ > 2.2.0 からの新機能
901
+
902
+ - ** 型:**
903
+ - ** provide:** ` Object | () => Object `
904
+ - ** inject:** ` Array<string> | { [key: string]: string | Symbol } `
905
+
906
+ - ** 詳細:**
907
+
908
+ <p class =" tip " >`provide` および `inject` は、主に高度なプラグインやコンポーネントのライブラリのために提供されています。一般的なアプリケーションのコードで利用することは推奨されません。</p >
909
+
910
+ この1組のオプションは、コンポーネントの階層がどれほど深いかにかかわらず、祖先コンポーネントが、自身の子孫コンポーネント全てに対する依存オブジェクトの注入役を務めることができるようにするために利用されます。
911
+ React に精通している人は、 React のコンテキストの特徴と非常によく似ていると捉えると良いでしょう。
912
+
913
+ ` provide ` オプションの値は、オブジェクトもしくはオブジェクトを返す関数でなくてはなりません。
914
+ このオブジェクトは自身の子孫に注入可能なプロパティを含みます。また、このオブジェクトのキーとして、 ES2015 の Symbol を利用することが可能です。
915
+
916
+ ` inject ` オプションの値は、文字列の配列か、オブジェクトのいずれかでなくてはなりません。オブジェクトの場合、キーがローカルのバインディング名を表し、バリューが利用可能な注入オブジェクトを探すときのキー(文字列または Symbol)となります。
917
+
918
+ プロバイダとなるコンポーネントは、提供されたプロパティを注入するコンポーネントの親チェーン内にある必要があります。
919
+
920
+ - ** 例:**
921
+
922
+ ``` js
923
+ var Provider = {
924
+ provide: {
925
+ foo: ' bar'
926
+ },
927
+ // ...
928
+ }
929
+
930
+ var Child = {
931
+ inject: [' foo' ],
932
+ created () {
933
+ console .log (this .foo ) // -> "bar"
934
+ }
935
+ // ...
936
+ }
937
+ ```
938
+
939
+ ES2015のシンボルとともに ` provide ` 関数と ` inject ` オブジェクトを利用する場合:
940
+
941
+ ``` js
942
+ const s = Symbol ()
943
+
944
+ const Provider = {
945
+ provide () {
946
+ return {
947
+ [s]: ' foo'
948
+ }
949
+ }
950
+ }
951
+
952
+ const Child = {
953
+ inject: { s },
954
+ // ...
955
+ }
956
+ ```
957
+
958
+ ## オプション / その他
959
+
960
+ ### name
961
+
962
+ - ** 型:** ` string `
963
+
964
+ - ** 制約:** コンポーネントのオプションで使われたときのみ、有効なので注意してください。
965
+
966
+ - ** 詳細:**
967
+
968
+ テンプレート内でのコンポーネント自身の再帰呼び出しを許可します。コンポーネントは ` Vue.component() ` でグローバルに登録され、グローバル ID はその名前に自動的に設定される事に注意してください。
969
+
970
+ ` name ` オプションのもう1つの利点は、デバッギングです。名前付きコンポーネントはより便利な警告メッセージが表示されます。また、[ vue-devtools] ( https://github.com/vuejs/vue-devtools ) でアプリケーションを検査するとき、名前付きでないコンポーネントは ` <AnonymousComponent> ` として表示され、とても有益ではありません。` name ` オプションの提供によって、はるかに有益なコンポーネントツリーを取得できるでしょう。
971
+
852
972
### delimiters
853
973
854
974
- ** 型:** ` Array<string> `
@@ -879,6 +999,47 @@ type: api
879
999
880
1000
- ** 参照:** [ 関数型コンポーネント] ( ../guide/render-function.html#関数型コンポーネント )
881
1001
1002
+ ### model
1003
+
1004
+ > 2.2.0 からの新機能
1005
+
1006
+ - ** 型:** ` { prop?: string, event?: string } `
1007
+
1008
+ - ** 詳細:**
1009
+
1010
+ ` v-model ` が指定されたとき、カスタムコンポーネントが prop 及びイベントをカスタマイズすることを許可します。デフォルトでは、コンポーネントにおける ` v-model ` は、 ` value ` を prop として、 ` input ` をイベントして用います。しかし、チェックボックスやラジオボタンなどの入力タイプは、 ` value ` prop を他の目的で利用したいことがあるかもしれません。その際、 ` model ` オプションを利用することで、競合を避けることが可能です。
1011
+
1012
+ - ** 例:**
1013
+
1014
+ ``` js
1015
+ Vue .component (' my-checkbox' , {
1016
+ model: {
1017
+ prop: ' checked' ,
1018
+ event : ' change'
1019
+ },
1020
+ props: {
1021
+ // これによって、 `value` prop を別の目的で利用することを許可します。
1022
+ value: String
1023
+ },
1024
+ // ...
1025
+ })
1026
+ ```
1027
+
1028
+ ``` html
1029
+ <my-checkbox v-model =" foo" value =" some value" ></my-checkbox >
1030
+ ```
1031
+
1032
+ 上の例の場合は、こうなります:
1033
+
1034
+ ``` html
1035
+ <my-checkbox
1036
+ :checked =" foo"
1037
+ @change =" val => { foo = val }"
1038
+ value =" some value" >
1039
+ </my-checkbox >
1040
+ ```
1041
+
1042
+
882
1043
## インスタンスプロパティ
883
1044
884
1045
### vm.$data
@@ -891,6 +1052,17 @@ type: api
891
1052
892
1053
- ** 参照:** [ オプション - データ] ( #data )
893
1054
1055
+ ### vm.$props
1056
+
1057
+ > 2.2.0 の新機能
1058
+
1059
+ - ** 型** ` Object `
1060
+
1061
+ - ** 詳細**
1062
+
1063
+ コンポーネントが受け取った現在の props を表すオブジェクトです。
1064
+ Vue インスタンスプロキシは props オブジェクトのプロパティにアクセスします。
1065
+
894
1066
### vm.$el
895
1067
896
1068
- ** 型:** ` HTMLElement `
@@ -1146,7 +1318,7 @@ type: api
1146
1318
<h3 id =" vm-on " >vm.$on( event, callback )</h3 >
1147
1319
1148
1320
- ** 引数:**
1149
- - ` {string} event `
1321
+ - ` {string | Array<string> } event ` (Array は 2.2.0 以降でのみサポートされます)
1150
1322
- ` {Function} callback `
1151
1323
1152
1324
- ** 使用方法:**
@@ -1460,6 +1632,9 @@ type: api
1460
1632
- ` .{keyCode | keyAlias} ` - 指定したキーが押された時のみトリガされるハンドラです。
1461
1633
- ` .native ` - コンポーネントのルート要素上のネイティブイベントに対して購読します。
1462
1634
- ` .once ` - 最大1回、ハンドラをトリガします。
1635
+ - ` .left ` -(2.2.0以降)マウスの左ボタンが押された時のみトリガされるハンドラです。
1636
+ - ` .right ` -(2.2.0以降)マウスの右ボタンが押された時のみトリガされるハンドラです。
1637
+ - ` .middle ` -(2.2.0以降)マウスの中央ボタンが押された時のみトリガされるハンドラです。
1463
1638
1464
1639
- ** 使用方法:**
1465
1640
@@ -1870,6 +2045,8 @@ type: api
1870
2045
1871
2046
コンポーネントが ` <keep-alive> ` 内部でトグルされるとき、` activated ` と ` deactivated ` ライフサイクルフックはそれに応じて呼び出されます。
1872
2047
2048
+ > 2.2.0 以降では、` <keep-alive> ` ツリーの中の全てのネストされたコンポーネントに対して、 ` activated ` および ` deactived ` が発火します。
2049
+
1873
2050
主に、コンポーネント状態を保存したり、再描画を避けるために使用されます。
1874
2051
1875
2052
``` html
0 commit comments