コンポーネント

概要

Vue.js には、コンポーネントという機能があります。コンポーネントとは、名前を持ち、再利用可能な Vue.js インスタンスです。一度作成すると他の機能でも使いまわすことができます。この概念は他の JavaScript フレームワークでも採用されており、非常に重要な概念の一つです。

コンポーネント作成

それでは、コンポーネントを作成してみましょう。

<html>
<head>
    <title>Hello World</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body>
    <div id="components_helloworld">
        <hello-world></hello-world>
        <hello-world></hello-world>
        <hello-world></hello-world>
    </div>
<script>
Vue.component('hello-world', {
    data: function (){
        return {
            message: "Hello World"
        }
    },
    template: '<h1>{{message}}</h1>'
})
new Vue({ el: '#components_helloworld' })
</script>
</body>
</html>

表示結果は以下の通りです。

上記のコードは、“Hello World"というテキストを表示するコンポーネントを作成し、3 回再利用しています。コンポーネントの定義部分は以下のようになっています。

Vue.component('hello-world', {
data: function() {
  return {
    message: "Hello World"
  };
},
template: '<h1>{{ message }}</h1>'
});

Vue.component を使用して、コンポーネントを hello-world という名前で登録しています。template では、コンポーネントに含める HTML を定義しています。今回は、data オブジェクトで定義した message を表示する HTML をコンポーネントに含めました。

また、コンポーネントの data オプションは関数でなければならないことに注意してください。これは、各インスタンスが独立したコピーのデータオブジェクトを持つようにするためです。

以上が、Vue.js を使った Hello World の最小構成の実装方法です。是非、自分で手を動かして試してみてください。ダウンロードはこちらからできます。

https://github.com/wiblok/Vue.js

以上、Vue.js 入門｜最小構成でテキストを出力してみる！でした。

コンポーネント

概要 #

コンポーネント作成 #

概要

コンポーネント作成