グローバル API

Vue.config

Vue.config は Vue のグローバル設定を含んでいるオブジェクトです。以下は、デフォルト値で利用可能な設定の全てのリストです:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
// デバッグモードを有効するかどうか。以下詳細を参照
debug: true,
// 厳格モード(Strict Mode)を有効にするかどうか。以下詳細を参照
strict: false,
// directive 向けの属性(attribute)プレフィックス
prefix: 'v-',
// HTML 展開に対応するデミリタ、最も外側に特別な1文字を追加
delimiters: ['{{', '}}'],
// 警告を抑制するかどうか
silent: false,
// mustache バインディングを展開するかどうか
interpolate: true,
// 非同期更新(directive & watcher 向け)するかどうか
async: true,
// 監視された配列プロトタイプチェーンを変更することを許可するかどうか
proto: true
}

以下の例のように、それらを直接変更できます:

1
Vue.config.debug = true // デバッギングモードをオンにする

デバッグモード

Vue.config.debug が true に設定されるとき、Vue は:

  1. 全て警告としてスタックトレースを出力します。
  2. 全てのアンカーノードは DOM でコメントノードとして表示します。これはレンダリングされた結果の構造を詳しく調べるために容易になります。

デバッグモードは小さくなった production ビルドでは利用できません。

厳格モード (Strict Mode)

デフォルトで、Vue のコンポーネントはクラスの継承チェーン(Vue.extendを介して)と view 階層のそれらコンポーネントの親、両方から全てのアセットを継承します。厳格モードでは、コンポーネントはクラスの継承チェーンからだけアセットを継承できますが、view 階層のそれらコンポーネントの親からはできません。厳格モードを有効にするとき、アセットはグローバルに登録されるかまたは、それらを必要するコンポーネントに明示的に依存する必要があります。厳格モードを強制すると、これは大規模なプロジェクトでコンポーネントのカプセル化と再利用がより良い可能性につながります。

デリミタの変更

デリミタはテキスト展開に対して設定されるとき、HTML 展開に対するデリミタは両側の最も外側のシンボルが追加されることによって生成されます:

1
2
3
Vue.config.delimiters = ['(%', '%)']
// タグは現在テキスト展開に対して (% %)
// そして HTML展開に対して ((% %))

Vue.extend( options )

Vue コンストラクタベースの”サブクラス”を作成します。コンポーネントオプションの全てはここで使うことができます。ここでの注意すべき特別なケースは、eldata で、このケースでは関数にしなければなりません。

内部的に、Vue.extend() は component をインスタンス化する前に、全ての component オプション上で呼び出されます。さらに詳しくは component に関しては、コンポーネントシステム を参照してください。


1
<div id="mount-point"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 再利用可能なコンストラクタを作成
var Profile = Vue.extend({
el: function () {
return document.createElement('p')
},
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>'
})
// Profile のインスタンスの作成
var profile = new Profile({
data: {
firstName : 'Walter',
lastName : 'White',
alias : 'Heisenberg'
}
})
// 要素上にマウント
profile.$mount('#mount-point')

結果は以下のようになります:

1
<p>Walter White aka Heisenberg</p>

Vue.nextTick( callback )

callback を延期し、DOM の更新サイクル後に実行されます。DOM の更新を待つ待ち受けるためにいくつかのデータを更新した直後に使用してください。さらに詳しくは非同期更新の理解を参照してください。

Vue.directive( id, [definition] )

グローバルカスタムディレクティブに登録または取得します。さらに詳しくはカスタムディレクティブを参照してください。

Vue.elementDirective( id, [definition] )

グローバルエレメントディレクティブに登録または取得します。さらに詳しくはエレメントディレクティブを参照してください。

Vue.filter( id, [definition] )

グローバルカスタムフィルタに登録または取得します。さらに詳しくはカスタムフィルタを参照してください。

Vue.component( id, [definition] )

グローバルコンポーネントに登録または取得します。さらに詳しくはコンポーネントシステムを参照してください。

Vue.transition( id, [definition] )

グローバルトランジションに登録または取得します。さらに詳しくガイド向けの トランジションシステム(JavaScript だけによるトランジション) を参照してください。

Vue.partial( id, [partial] )

グローバルテンプレート partial 文字列に登録または取得します。さらに詳しくは partial を参照してください。

Vue.use( plugin, [args…] )

Vue.js は plugin をマウントします。もし、plugin がオブジェクトなら、それは install メソッドを実装していなければなりません。もし、それ自身が関数ならば、それは install メソッドとして扱われます。install メソッドは、Vue を引数として呼び出されます。さらに詳しくは、プラグイン(プラグインによる拡張)を参照してください。

Vue.mixin( mixin )

ミックスイン (mixin) をグローバルに適用し、全ての Vue インスタンスが作成された後に影響します。これは、コンポーネントにカスタム動作を注入するために、プラグイン作成者によって使用することができます。アプリケーションコードでの使用は推奨されません。

Vue.util

多数のユーティリティメソッドを含む内部 util モジュールを公開します。これは高度なプラグイン/ディレクティブ作成向けに目的としており、そのため、何が可能かどうか確認するためにソースコードを見る必要があります。