[JS]Vue.jsで単一ファイルコンポーネントを作る

Pocket

Vue.js は html テンプレートとロジック、スタイルを vue ファイルの形で1つのコンポーネントにまとめることができます。
今回はこの単一ファイルコンポーネントを使った簡単なサンプルプログラムを作ってみようと思います。

インストール

Vue.js 本体をはじめ、Webpack など補助的なツールをインストールしていきます。

npm init
npm install vue
npm install --save-dev vue-loader vue-template-compiler
npm install --save-dev webpack webpack-cli
npm install --save-dev babel-core babel-loader babel-preset-env

webpack.config.js, .babelrc は次のようにしました。

webpack.config.js

module.exports = {
    entry: './src/js/app.js',
    output: {
        path: __dirname,
        filename: './js/bundle.js'
    },
    module: {
        rules: [{
                test: /\.vue$/,
                include: /src/,
                loader: 'vue-loader',
            },
            {
                test: /\.js$/,
                include: /src/,
                loader: 'babel-loader'
            },
        ]
    },
    resolve: {
      alias: {
        vue: 'vue/dist/vue.js'
      }
    }
};

.babelrc

{
    "presets": [
        ["env", {
            "targets": {
                "browsers": ["last 2 versions"]
            },
            "modules": false
        }]
    ]
}

これで「webpack –watch」コマンドなどで src フォルダ内の js, vue ファイルを自動変換できるようになります。変換後は js フォルダに bundle.js としてまとめられるようにセットしてあります。

HTML とメインスクリプトの用意

Vue.js 公式ドキュメントの例にならってクリックすると数字が増えるカウンターを作っていきます。テンプレートは vue ファイルに書くのでここでは最低限 <div id="app"> と <counter> タグがあれば動作します。
bundle.js へのリンクは body の最下部に置きます。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <counter></counter>
    </div>
    <script src="js/bundle.js"></script>
</body>
</html>

メインスクリプトとなる app.js はこのようにしました。

src/js/app.js

import Vue from 'vue';
import counter from './components/counter.vue';

new Vue({
    el: '#app',
    data: {},
    components: {
        "counter": counter
    }
});

import でこれから作るカウンター用のコンポーネントを読み込んでいます。Vue のコンストラクタで components としてカウンター用のコンポーネントを指定します。
キーに当たる "counter" は要素名を意味しています。つまり index.html の <counter> の箇所にこのコンポーネントが挿入されます。

Vueコンポーネントの作成

js/components となるようにフォルダを作り、counter.vue ファイルを用意します。

js/components/counter.vue

<template>
<div>
    <p>Count: {{ counter }}</p>
    <p><button v-on:click="increment">Button</button></p>
</div>
</template>

<script>
module.exports = {
    data: function () {
        return {
            counter: 0
        }
    },
    methods: {
        increment: function() {
            this.counter++;
        }
    }
}
</script>

ボタンを押すと increment() メソッドが呼ばれ、カウントが1増えます。data の値とテンプレートは連動しているので変数の値を変更すれば {{ counter }} の値も自動的に変化します。
1つのファイルにビューとロジックを書くことができ、ひと目で何をやっているのかがわかります。


Similar Posts:




コメントを残す

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