今回は、<script>要素を使用してテンプレートを記述する際に使用する「x-template」について紹介します。
目次
コンポーネントのtemplate
Vue.jsでコンポーネントを定義する場合は、templateプロパティオプションにHTMLテンプレートを指定します。
|
1 2 3 4 5 6 7 8 9 |
const myComponent = { template: '<div>{{message}}</div>', props: { message: { type:string, default: 'Hello Vue.js!' } } } |
上記のコードでは、templateプロパティオプションにHTMLテンプレートの文字列を直接記述しています。
templateプロパティオプションに直接テンプレートのHTMLを記述する方法は、Vue.jsの学習を行う時はJavaScriptのコード内に記述されているのでわかりやすいです。また、コンポーネント単体として見た場合は、コードの見通しが良くなります。
しかし、コードとテンプレートが分離できていないので、コーディングとデザインの分業を行うことが難しくなります。
また、HTMLテンプレートの記述が多い場合は、templateにテンプレートを記述していますと、コードの見通しが悪くなってしまう場合があります。
コードとテンプレートを分離し、コンポーネントのテンプレートをHTML側（.htmlファイル）に記述する際は、<script>要素を使用することで記述できます。
<script>要素での記述
テンプレート部分をHTMLに<script>要素を使用して記述すると次のようになります。
|
1 2 3 |
<script> <div>{{message}}</div> </script> |
<script>要素で記述した部分はHTMLとして描画されませんので、テンプレートとなるHTMLを<script>要素内に記述します。
<script>要素を使用してテンプレートを定義する場合は、type属性とid属性の指定が必須となります。
type属性の指定
コンポーネントのtemplateプロパティオプションに指定するテンプレートを<script>要素を使用してHTML側に記述する際には、x-templateを使用します。
x-templateは、<script>要素のtype属性に「text/x-template」の形式で記述します。
|
1 2 3 |
<script type="text/x-template"> <div>{{message}}</div> </script> |
id属性の指定
<script>要素のid属性は、コンポーネントのtemplateプロパティオプションから参照する際に必要になりますので必ず指定します。指定するidには任意の値が使用可能ですが、他の要素のidと重複しない値を指定します。
|
1 2 3 |
<script type="text/x-template" id="my-component"> <div>{{message}}</div> </script> |
ここではidを「my-component」としています。
x-template
x-templateは、Vue.jsによってマウントする要素の外側に記述します。
|
1 2 3 4 5 6 7 8 9 |
<!-- コンポーネントのテンプレート --> <script type="text/x-template" id="my-component"> <div>{{message}}</div> </script> <!-- アプリケーションのテンプレート --> <div> <my-component></my-component> </div> |
「text/x-template」の意味
「text/x-template」はブラウザーが認識できないコンテンツタイプになりますので、ブラウザーは「text/x-template」を無視します。
Vue.jsのコンポーネントでは、処理されなかったコンテンツを引用して利用することになります。
テンプレート側の実装
HTML側に記述したテンプレートは、コンポーネントのtemplateプロパティオプションから、「#id」の形式で参照します。
|
1 2 3 4 5 6 7 8 9 |
const myComponent = { template: '#my-component', props: { message: { type:string, default: 'Hello Vue.js!' } } } |
