Vue.js/コンポーネント/HelloWorld

HelloComponent

このようにすると出る。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>HelloComponent</title>
    <script src="https://unpkg.com/vue@2.5.17"></script>
</head>
<body>
    <div id="app">
        <hogehoge></hogehoge>
        <hogehoge></hogehoge>
        <hogehoge></hogehoge>
        <hogehoge></hogehoge>
    </div>
    <script>
        Vue.component("hogehoge", {
            template: '<div>unko</div>'
        });
        new Vue({
            el: "#app"
        });
    </script>
</body>
</html>

まず Vue クラスの静的メソッド的なメソッドでコンポーネント登録する。コンポーネント名と、それに続き Vue クラスのコンストラクタに与えたようなパラメータを渡す。これでコンポーネント登録された。

その名前で HTML 中にタグを書く。別にこの名前が HTML にあろうとなかろうと関係ない。ブラウザは知らんタグは表示上無視するのでマーカーとして使える。

あとはこの DOM たちを Vue オブジェクトとして駆動すればいいので、外側のブロックを Vue オブジェクトに関連付けした場合に内部にコンポーネントがあるのでそちらが反応する

当然このようにも書ける

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>HelloComponent</title>
    <script src="https://unpkg.com/vue@2.5.17"></script>
</head>
<body>
    <div id="app">
    </div>
    <script>
        Vue.component("hogehoge", {
            template: '<div>unko</div>'
        });
        new Vue({
            el: "#app",
            template: '<div><hogehoge /><hogehoge /></div>'
        });
    </script>
</body>
</html>

このようにも書けるということは・・・

Vue.component("hogehoge", {
    template: '<div>unko</div>'
});
Vue.component("piyopiyo", {
    template: '<div><hogehoge /><hogehoge /></div>'
});
new Vue({
    el: "#app",
    template: '<div><piyopiyo /></div>'
});

コンポーネントを階層化してより複雑な部品も作れるということである。

javascript/vuejs/component/helloworld.txt · 最終更新: 2018-11-21 12:18 by ore

文書の先頭へ

Vue.js/コンポーネント/HelloWorld

menu

書いてる野郎

Vue.js/コンポーネント/HelloWorld

HelloComponent