基礎からメモ： Vue.js CH5-p179 テンプレートの定義方法

今まで出てきた書き方。ES2015が使えるなら、テンプレートリテラルが便利

Vue.component('my-calendar', {
  template: `<div>
    <p>..........</p>
    </div>`
});

単一ファイルコンポーネントを使わない場合は、このtemplateオプションが推奨。

カスタムタグに特殊な属性inline-templateを付与すると、内側に記述されたHTMLはテンプレートとみなされる。

<my-component inline-template>
  <p>テンプレート</p>
</my-component>

scriptタグにtype="text/x-template"とタイプ指定すると、ブラウザにはDOMとして認識されずテンプレートとして扱える。

<script type="text/x-template" id="child-templ">
  <p>テンプレート</p>
</script>

必ずセレクタを付与し、コンポーネント・オプションで要素のセレクタを指定する。

Vue.component('my-component', {
  template: '#child-templ'
});

inline-templateとtext/x-templateタイプ指定は、JavaScriptとHTMLがセットではなくなる書き方のため推奨されていない。

コンポーネント単位で一つのファイルとし、JavaScript、HTML、CSSをセットにし、拡張子「.vue」で保存したもの。プリコンパイルが必要なのでビルド環境が要る。中規模以上の開発ではこれが主流。

テンプレートから仮想DOMを構築する際に内部的に使われる仕組みとして描画関数というものがあるが、直接明示的に使うことも可能。コンパイルの工程をスキップしてJavaScriptで動的にDOM構造を構築できる。

Vue.component('my-component', {
  render: function(createElement) {
    return createElement('element', { options })
  }
});

コンポーネント名はハイフンを一つ以上含むケバブケースにする。 <my-component>........</my-component>はOKだが、<myComponent>..............</myComponent>はNG。

カスタムタグは好きな名前にできると言っても、<table>や<select>のようにHTMLのルールで包含可能な要素に制約がある場合は、その制限を受ける。

次のmy-rowは無効なタグとして削除される。

<table>
  <my-row>....</my-row>
</table>

特殊な属性is="コンポーネント名"を使えば、付与された要素がコンポーネントに置き換えられる。

<table>
  <tr is="my-row">....</tr>
</table>

次の3つのケースで「文字列テンプレート」を使う場合は、DOMとして認識されないためHTMLの制約は受けない。