Vue.js/テンプレート/実装形態

Vue.js/テンプレート/実装形態

テンプレートのコード自体は実装のやり方によって様々な場所に書くことができる。

コンストラクタのパラメータ template

おそらく Vue.js のコードを学ぶ上で一番最初に出てくるやつ

var hoge = new Vue({
    template: '<div>hoge</div>'
});

el で指定する要素

コンストラクタの el パラメータや、\$mount メソッドの引数で与える Vue オブジェクトがコントロール対象にする既存の HTMLがあるが、それ自体が Vue のテンプレート的な記述になっているならばそれが解釈されて再描画される。

この場合は template が指定されてないことが条件

特殊Scriptブロック

HTML 中の特殊な script 要素の中にテンプレートを書くことが出来る

<script type="text/x-template" id="hoge">
<div>hoge</div>
</script>

この記述に対しコンストラクタでこのようにする

var hoge = new Vue({
    template: '#hoge'
});

render オプション

テンプレート的記述ではなく、欲しい要素出力する関数を構築することで狙った要素を出力できたりする。

単一ファイルコンポーネント

単一ファイルコンポーネント中の template ブロック内に記述できる。

javascript/vuejs/template/implements/start.txt · 最終更新: 2018-11-19 15:47 by ore