【Vue】入門編(コンポーネントの登録)

こんにちは。
本日はVue.jsの入門編です。

概要

まず、コンポーネントについて。
コンポーネントは再利用可能な名前付きVue インスタンスです。

作成したコンポーネントの登録には 「グローバル登録」と「ローカル登録」の2種類の方法があります。
本記事では2つの方法について記載します。

グローバル登録

• html

<div id="app">
    <global-component></global-component>
</div>

• js

Vue.component('global-component', {
    template: '<h1>グローバル登録</h1>'
})

new Vue({
    el: '#app'
})

Vue.componentの第1引数には、作成するコンポーネント名を指定。
第2引数には、コンポーネントの情報のオブジェクトを指定します。

Vue.componentの第1引数に指定したコンポーネント名を使用して
画面の設定を行います。

ローカル登録

• html

<div id="app">
    <local-component></local-component>
</div>

• js

var localComponent = {
    template: '<h1>ローカル登録</h1>'
}

new Vue({
    el: '#app',
    components: {
        'local-component': localComponent
    }
})

ローカル登録する場合は、コンポーネントをオブジェクトとして定義しておきます。
定義したコンポーネントをVueインスタンス作成時に
components オプションに設定します。
画面で使用する際は、components オプションで設定した名前を使用します。

以上です。