読者です 読者をやめる 読者になる 読者になる

Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

vue.jsその0008 Component Systemを使用して、html要素のコンポーネントを作る

制作 javascript vuejs

参考にさせて頂いたページ

vue,jsについて

Component System - vue.js

体で覚えるVue.js - ViewModel生成編 〜 JSおくのほそ道 #022 - Qiita

Custom Elementsについて

Custom Elements: HTML に新しい要素を定義する - HTML5 Rocks

バージョン

Vue.js v0.11.5

Custom Elements と Component System について

Custom Elementsについては以下のページを参考にさせて頂きました。

Custom Elements: HTML に新しい要素を定義する - HTML5 Rocks

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する書き方)

Component System - vue.jsを参考にさせて頂いて書いています。

<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を利用するか否かも含めて要検討といったところでしょうか。