Vue Component の仕様
*.vue ファイルは HTML のような構文を使用して Vue コンポーネントを記述するカスタムファイルフォーマットです。各 *.vue ファイルは <template>、<script>、<style> の三つのトップレベル言語のブロックで構成されています。
<template>
<div class="example">{{ msg }}</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
</script>
<style>
.example {
color: red;
}
</style>
<custom1>
例えばコンポーネントのドキュメントを書くことが出来ます
</custom1>
vue-loader はファイルを解析し、それぞれの言語ブロックを必要に応じて他の loader を通し、最終的に module.exports が Vue.js のコンポーネントオプションオブジェクトの CommonJS モジュールに変換します。
vue-loader は CSS プリプロセッサや HTML にコンパイルするテンプレート言語といった、デフォルトでない言語を言語ブロックの lang 属性を使用することでサポートします。例えばコンポーネントのスタイルに Sass を使用することが出来ます。
<style lang="sass">
/* Sass で書きます! */
</style>
詳細は プリプロセッサの仕様 で確認することが出来ます。
言語ブロック
<template>
- デフォルトの言語は
html - それぞれの
*.vueファイルは最大で一つの<template>ブロックを含みます - 内容は文字列に展開され、コンパイルされた Vue コンポーネントの
templateオプションで使用されます
<script>
- デフォルトの言語は
js（babel-loaderやbuble-loaderが検出される場合、自動的にES2015がサポートされる） - それぞれの
*.vueファイルは最大で一つの<script>ブロックを含みます - スクリプトは CommonJS のように処理されます（ webpack 経由でバンドルされた通常の
.jsモジュールと同じです）。つまり他の依存関係をrequire()することができます。そして ES2015 がサポートされ、importとexport構文を使用することが出来ます - スクリプトは Vue.js コンポーネントのオプションオブジェクトをエクスポートする必要があります。
Vue.extend()によって拡張されたコンストラクタもエクスポートすることが可能ですが、プレーンなオブジェクトが好ましいです
<style>
- デフォルトの言語は
css - 複数の
<style>タグは単一の*.vueファイルでサポートされます <style>タグはscopedかmodule（詳しくは Scoped CSS と CSS Modules をみてください）を使用してコンポーネントにスタイルをカプセル化する事が出来ます。異なるカプセルモードをもつ複数の<style>タグは同じコンポーネント内で混在させることが出来ます- デフォルトではコンテンツは
style-loaderを使用して実際の<style>タグとして抽出され、ドキュメントの<head>に動的に挿入されます。また、すべてのコンポーネントのすべてのスタイルが単一のCSSファイルに抽出されるようにwebpackを設定することも出来ます
カスタムブロック
vue-loader 10.2.0+ でのみサポートされます
例えば <docs> ブロックのように、プロジェクトの特別な必用に応じて *.vue ファイルに カスタムブロックを追加することが出来ます。 vue-loaderはタグ名を使用してセクションの内容に適用されるべき webpack loader を検索します。webpack loader は、vue-loader オプションの loaders セクションで指定する必要があります。
このモードの詳細については、カスタムブロックを参照してください。
ソースのインポート
もし *.vue コンポーネントを複数のファイルに分割したい場合は、src 属性を使って言語ブロック用の外部ファイルをインポートすることが出来ます:
<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>
src のインポートは CommonJS の require() 呼び出しと同じパス解決規則に従うことに注意してください。相対パスは ./ で始める必要があり、インストールされた NPM パッケージから直接リソースをインポートすることができます:
<!-- インストールされた "todomvc-app-css" npm パッケージ からファイルをインポートします-->
<style src="todomvc-app-css/index.css">
src によるインポートはカスタムブロックでも動作します、例:
<unit-test src="./unit-test.js">
</unit-test>
シンタックスハイライト
現在それらはシンタクスハイライトをサポートしているのは、Sublime Text, Atom, Vim, Emacs, Visual Studio Code, Brackets, JetBrains products (WebStorm, PhpStorm, etc). 他のエディタ/IDEへのコントリビュートは高く評価されます！もし Vue コンポーネント内でプリプロセッサを使用していない場合は、エディタで *.vue ファイルを HTML として扱うことが出来ます。
コメント
それぞれのブロック内でそれぞれの言語のコメントシンタックスを使用することが出来る (HTML、CSS、JavaScript、Jade、etc) 。最上部のコメントは HTML コメントシンタックスを使用してください: <!-- コメントはこちら -->