Vue.js試行用HTMLテンプレートをつくってみた

vue-cliを使わずにサクッとVue.jsでフロントエンドを試作 or 開発したい場合に使えるHTMLテンプレートを作ってみた。

サンプルコード付き。Vue.jsの基本的な機能の使い方の参考になるようにしている。

Vue.jsの呼び出しはCDNで行っているので、オンライン環境で試してくだしあ。

<html>

<head>
    <meta charset="utf-8" />
    <title>Vue.js試行用HTMLテンプレート</title>
</head>

<body>
    <div id="app">
        <input v-model="message" />
        <div>{{ message }}</div>
        <sample-component v-bind:listdata="sampleList" v-on:delete="deleteItem($event)">
            {{ listTitle }}
        </sample-component>
        <button v-on:click="addItem()" v-bind:style="addButtonStyle">Add item</button>
    </div>

    <!-- Vue.jsの開発バージョン、便利なコンソールの警告が含まれています -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- Vue.jsの本番バージョン、サイズと速度のために最適化されています -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->

    <script>
        // Vue.jsコンポーネントの作成例
        Vue.component(
            'sample-component', {       // コンポーネントの名前
                props: ['listdata'],    // コンポーネント外から受け取れるプロパティ
                template: `
                <div>
                    <slot></slot>
                    <div v-if="isDataEmpty">{{ noDataMessage }}</div>
                    <ol>
                        <li v-for="item in listdata" v-bind:key="item.id" v-bind:style="listItemStyle">
                            {{ item.text }}: 
                            <button v-on:click="deleteItem(item.id)" v-bind:style="deleteButtonStyle">Delete</button>
                        </li>
                    </ol>
                </div>
                `,
                data() {    // コンポーネント内で使えるリアクティブなデータをまとめる関数(必ず関数にする。しないとVue.jsに認識されない)
                    return {
                        noDataMessage: 'データはありません',
                        listItemStyle: {        // CSSスタイルのプロパティはCaml形式で指定可能。
                            color: '#207720',
                            fontSize: '20px'
                        },
                        deleteButtonStyle: {
                            backgroundColor: '#333333',
                            color: 'white',
                            borderWidth: '0px',
                            fontSize: '16px'
                        }
                    };
                },
                methods: {      // コンポーネント内で使える関数をまとめるプロパティ。
                    deleteItem(id) {
                        this.$emit('delete', id);
                    }
                },
                computed: {     // 計算した結果を返すプロパティ。HTMLからはdataと同じように使える。
                    isDataEmpty() {
                        return this.listdata.length < 1;
                    }
                }
            }
        );

        // Vue.jsの機能の初期化
        var app = new Vue({
            el: '#app',     // 初期化の対象とする要素。この要素以下でVue.jsの諸機能を使える。
            data: {         // リアクティブなデータをまとめるプロパティ。
                message: 'Hello Vue!',
                listTitle: 'サンプルコンポーネント',
                currentId: 3,
                sampleList: [{  // 配列のデータバインディング
                    id: 1,
                    text: 'list item 1'
                },
                {
                    id: 2,
                    text: 'list item 2'
                },
                {
                    id: 3,
                    text: 'list item 3'
                }
                ],
                addButtonStyle: {   // CSSスタイルっぽいものもデータバインディングできる。
                    width: '100px',
                    height: '32px',
                    backgroundColor: '#5555cc',
                    color: 'white',
                    borderWidth: '0px',
                    fontSize: '16px'
                }
            },
            methods: {      // クリック時などに実行する関数をまとめるプロパティ。
                addItem() {
                    this.currentId++;
                    this.sampleList.push({
                        id: this.currentId,
                        text: this.message + ' ' + this.currentId
                    });
                },
                deleteItem(id) {
                    this.sampleList.some((v, i) => {
                        if (id === v.id) this.sampleList.splice(i, 1);
                    });
                }
            }
        })
    </script>
</body>

</html>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です