ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

【基礎】Vue.jsの『コンポーネント』とは?

2019年6月25日
logo_vue

コンポーネントについての概要

『コンポーネント』とは?

コンポーネントとは、画面を構成する要素を個々のパーツ(機能・役割別)として分割し管理した物のことを言います。

作成したコンポーネントを組み合わせて画面を構成することで、それぞれの機能が明確になりコードの肥大化を防げたり、メソッドやデータの管理もしやすくなるなどのメリットがあります。

下記の例で言うと、ヘッダー、フッター、サイドバー、メインコンテンツなどに分割されていますが、これら1つ1つをコンポーネントと言います。

vue_componen05

一度登録したコンポーネントは何度でも呼び出すことができ、簡単に再利用ができるようになります。

スポンサードサーチ

コンポーネントの作成方法

コンポーネントの作成方法はいくつかありますが、今回は1つのjavascriptファイル上にVueインスタンスとコンポーネントを記述する方法をご紹介します。

一番上にVue.componentというメソッドが使われており、これを呼び出すことでコンポーネントを登録することができます。

vue_componen00

第一引数には、任意のコンポーネント名を指定します。

vue_componen01

指定したコンポーネントは、HTMLのタグのように呼び出すことができます。

vue_componen02

テンプレートの第二引数には、Vueインスタンスを生成する時と同じ様にオプションを指定することができます。

今回のサンプルだと、dataとtempateオプションを使用しています。

dataの定義方法には注意が必要で、Vueインスタンス生成時と違いコンポーネントでは常に関数でデータを返さないといけないという決まりがあります。

vue_componen03

その他の注意点として、コンポーネントの登録はVueインスタンスの生成より前に行う必要があります。

vue_componen04

この順番が逆になると動作しないので覚えておきましょう。

以上が、簡単なコンポーネントの作成例となります。

これまでの説明は、Udemyの『Vue.js + Firebaseで作るシングルページアプリケーション』というコースを学習し、アウトプットした内容となりますので、興味がある方は下記より本家の内容をご確認ください。
Vue.js + Firebaseで作るシングルページアプリケーション※記事中で使用されている画像は、Udemyの動画よりキャプチャを取りサンプルとして使用させて頂いています。

関連記事

  • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日 コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法
  • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法
  • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日 jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法
  • javascriptでjQueryの$(this).addClass()と同じ扱いを再現する方法(クリックした要素編)2019年1月27日 javascriptでjQueryの$(this).addClass()と同じ扱いを再現する方法(クリックした要素編)
  • 超簡単!jsでカウントダウンタイマー(残り〜日)を設置する方法2019年1月30日 超簡単!jsでカウントダウンタイマー(残り〜日)を設置する方法

スポンサードリンク

  • 最近の投稿

    • 【基礎】Vue.jsの『コンポーネント』とは?【基礎】Vue.jsの『コンポーネント』とは?2019年6月25日
    • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日
    • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日
    • 【Mac】vscodeの拡張機能を一括インストールする方法【Mac】vscodeの拡張機能を一括インストールする方法2019年3月8日
    • js不要!cssのみで『無限ループスライダー』を作成する方法js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日
    • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日
    • 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法2019年1月30日
    • 【css】文字(テキスト)にborderをつけるように縁取りをする方法【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日
  • カテゴリー

    • AMP (2)
    • android (1)
    • atom (2)
    • css (25)
    • facebook (1)
    • font (1)
    • form (1)
    • FTP (1)
    • git (3)
    • gulp (3)
    • html (2)
    • IE (1)
    • instagram (1)
    • iphone (3)
    • jquery (13)
    • js (5)
    • Mac (10)
    • Photoshop (5)
    • SourceTree (5)
    • Subversion (1)
    • twitter (1)
    • Vue.js (3)
    • Webフォント (1)
    • windows (2)
    • WordPress (7)
    • お知らせ (1)
    • サクラエディタ (1)
    • セキュリティ (1)
    • パララックス (1)
    • 便利ツール (6)
    • 差分チェック (1)
    • 日記 (4)
  • アーカイブ

  • タグ

    android atom background-image before break-all clcl clipmail counter-increment cssハック facebook git github html IE11 instagram iphone ipアドレス linear-gradient Math.random mCustomScrollbar Noto Sans Japanese select snapwidget SourceTree table tool transform transition twitter url改行 windows word-break お問い合わせ コピペ サクラエディタ スクロールバー タスクバー テキストエディタ パッケージ フォーム プラグイン 埋め込み 擬似クラス 改行コード 純正ボタン

    Copyright © 2016 ヤビブロ All Rights Reserved.