vm.$elに挿入されるtemplateを文字列で指定します。vm.$elの中に存在していた要素は全てここで指定したtemplate文字列によって置き換えられます。
replaceのoptionがtrueに指定されている場合は、elの中に挿入されるのではなくelを上書きします。
(詳しくはreplaceを参照してください)
#ではじまる文字列をtemplateに指定した場合はquerySelectorとして評価され、取得した要素のinnerHTMLが使用されます。
これは<script type="x-template">によってtemplateの指定したい場合に便利です。
vm = new Vue({
template: "#some-template"
});
vm = new Vue({
template: '<div v-text="name"></div>'
});<script type="x-template" id="some-template">
<div v-text="name"></div>
</script>Vue.jsはDOMベースのtemplateを使用します。
そして、Vue.jsのcompilerはDOM要素を走査してdirectivesを探しながらデータバインディングを作成しています。
これが何を意味しているのかというと、templateは実際にDOMに変換可能な文字列である必要があるということです。
Vue.jsはDOM fragmentにtemplateを入れておいて、ViewModelのインスタンスを再生するときにそれをcloneして使用します。
また、もしあなたがvalidなHTMLであることを求めるのであれば、direcitveのprefixをdata-に変更することが出来ます。
Vue.config({
prefix: "data"
});