解 説

Vue.jsはコンポーネントを作成するのに都合の良いライブラリです。
再利用可能なコンポーネントを作成することは作業の効率化に貢献します。そして何よりもVue.jsの使いやすさが魅力です。複雑な環境設定も必要なく、学習しやすい内容など今後大きく注目されることでしょう。

Vue.jsでコンポーネントを作成するに方法は、グローバルコンポーネントを作る方法とローカルコンポーネントを作る方法の2つがあります。

グローバルコンポーネントの定義

グローバルコンポーネントはどこからでも呼び出されることができるコンポーネントです。

Vue.component(タグの名前,コンポーネントの中身)

第1引数にはHTML側でタグとして使用するコンポーネントの名前を記述します。
コンポーネント名は2つ以上の単語を繋いだケバブケースで命名します。1つの単語だけだったり、ハイフンで繋げてない名前は使えません。
第2引数にはコンポーネントの中身が入ります。この部分にはコンポーネントを構成するタグなども入ることになります。
また、インスタンス化するときに渡したdataやtemplate、の他に props,filter,methods,computed,createdなどのオプションも渡せます。

簡単なコンポーネントのサンプル
HTMLコード

JavaScriptコード

ローカルコンポーネントの定義

ローカルコンポーネントは、特定のVueインスタンスからだけしか使えないものです。
ローカルコンポーネントの作成はVueインスタンスの中で定義します。