参考にさせて頂いたページ
vue,jsについて
体で覚えるVue.js - ViewModel生成編 〜 JSおくのほそ道 #022 - Qiita
Custom Elementsについて
http://www.html5rocks.com/ja/tutorials/webcomponents/customelements/
バージョン
Vue.js v0.11.5
Custom Elements と Component System について
Custom Elementsについては以下のページを参考にさせて頂きました。
http://www.html5rocks.com/ja/tutorials/webcomponents/customelements/
var XFoo = document.registerElement('x-foo');
document.body.appendChild(new XFoo());
といったようなスクリプトで、documentに対して自作の要素を追加できるのですが、要素名にはハイフンを含める必要があります。
vue.jsのドキュメントには以下のような記載があります。
To avoid naming collisions with native elements and stay consistent with the W3C Custom Elements specification, the component’s ID must contain a hyphen - to be usable as a custom tag.
ネイティブの要素との名前の衝突を回避し、W3Cカスタム要素の仕様と一致して滞在するには、コンポーネントのIDは、ハイフンが含まれている必要があり - カスタムタグとして使用できる。
vue.jsを使用することによって、W3Cのルールに則ってハイフンを含んだ名前でcomponentを定義し、Custom Elementsと同様の記述を実現できます。
サンプルソース (newするときにオプションとして渡す書き方)
体で覚えるVue.js - ViewModel生成編 〜 JSおくのほそ道 #022 - Qiitaを参考にさせて頂いて書いています。
<div id="sample">
<hoge-foo></hoge-foo>
<p v-component="hoge-foo"></p>
</div>
<script src="../js/vue.min.js"></script>
<script>
var vm = new Vue({
el: '#sample',
components: {
"hoge-foo": {
template: '<span>Element1</span><span>Element2</span>',
replace: true
}
}
});
</script>
サンプルソース (予めVueコンストラクタにhoge-fooを追加してからnewする書き方)
Redirecting...を参考にさせて頂いて書いています。
<div id="sample">
<hoge-foo></hoge-foo>
<p v-component="hoge-foo"></p>
</div>
<script src="../js/vue.min.js"></script>
<script>
Vue.component('hoge-foo', {
template: '<span>Element1</span><span>Element2</span>',
replace: true
});
var vm = new Vue({
el: '#sample'
});
</script>
サンプルソースについて
自作のコンポーネント<span>Element1</span><span>Element2</span>を作成しています。
インスタンス初期化時に指定している#sampleの中に<hoge-foo></hoge-foo>あるいはv-component="hoge-foo"の要素を配置することで、そこに自作コンポーネントを展開します。
replace:trueを指定した場合は置き換え。
指定しない場合は、内側に展開します。
サンプルソースではtemplateの中に2つのspan要素を含めましたが、Custom Elementsの使い方に合わせるという意味では1つだけにした方が良いかもしれませんね。
いずれにせよ各現場のコーディング規約として、何か上手く運用したい部分ですね。
終わりに
Custom Elementsのような記述が実現できる事を1つの要素との置き換えにのみ使用するとした場合、複数要素をtemplateにまとめる場合には<script type=“x-template”>を使う方法の他に、
Vue.js + Vueify + gulpでプロトタイピングぽいことをする - Qiita
のような感じで、gulp + vueifyを利用するのも良いかもしれません。
このようなpolyfillを利用するか否かも含めて要検討といったところでしょうか。
