Vue.jsの基本（5）コンポーネント作成

• Vue.jsの基本（1）Vue.jsの基本的な使い方
• Vue.jsの基本（2）dataプロパティについて
• Vue.jsの基本（3）computedとmethodsの違い
• Vue.jsの基本（4）監視プロパティについて
• Vue.jsの基本（5）コンポーネント作成
• Vue.jsの基本（6）親コンポーネントから子コンポーネントへデータを渡す方法
• Vue.jsの基本（7）classとスタイルのバインディング
• Vue.jsの基本（8）v-ifのポイント
• Vue.jsの基本（9）v-forの使い方

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

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

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

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

JavaScriptコード

Vue.component('hello-component',{
  template:'<p>Hello</p>'
})
var app = new Vue({
  el:'#app'
}) 

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

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

var helloComponent = {
  template: '<p>Hello</p>'
}
var app = new Vue({
  el:'#app',
  components:{
  'hello-component': helloComponent
  }
})