componentとは簡単に言うと、テンプレート機能です。
Vue.jsからデータを表示するとき、ある一定のテンプレートを適応して表示できます。
例えばユーザーデータとコンテンツ、2つのリストを持っていたとします。
そして「どのようなデザイン」で出力するか考えたとしましょう。
結果的に3つのデザイン案が生まれ、両方に試したいとします。
通常、デザインを試すためには、それぞれコーディングしなければなりません。
デザインを変える度に、わざわざコーディングする必要があります。
しかし、componentを使えばデータに対してテンプレートを適応するだけです。
例えば、3つのデザインテンプレートを作って、データだけ変える、ということが出来ます。
個別にコーディングする必要がありません。
すぐ新しいデザインを適応できます。
管理や表示上の利便性を、向上させることができるのです。
今回は、component機能の習得を進めていきます。
細かいパーツにおけるデザイン管理も楽になりますので、ぜひ試してみましょう。
今回のミッション
まず、1つデータを用意します。
そのデータをcomponentでデザインを適応して出力してみましょう。
ソースコードの解説を参考に、下記を再現してみてください。
一通り解説でソースコードを理解してから取り組むと良いでしょう。
新しい書き方も出てくるので、いきなりだと難しいかと思います。
どうしても動かなければ、下記からファイルをダウンロードしてみてください。
細かい箇所のチェックはエラーなど、見つけてみましょう。
なお、毎回ご提供するこちらはあくまでも、参考ファイルです。
より良い書き方を見つけたら、ご自身で改良してみてください。
ソースコードの解説
まずは、下記ソースコードに目を透してみましょう。
全体の流れを把握したら、すぐに自分で実践してみてください。
<div id="app" class="articleArea">
<!-- componentを使うと、datas-joblistというようなタグを作ることができます -->
<!-- datas-joblistにはテンプレートが設定されており、テンプレートを使ってjoblistのデータが出力されます -->
<!-- datas-joblistという名前は自由に設定できます(Vue.componentとあっていれば) -->
<!-- このタグはv-forでループされています -->
<datas-joblist v-for="list in joblist" v-bind:todo="list" v-bind:key="list.id"></datas-joblist>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
//コンポーネントを使って、新しいタグを作り出しています。
Vue.component('datas-joblist', {
//propsにtodoを設定します。templateでデータ出力時に使うタグを設定します。
//todoはhtmlのv-bindを通し、今回の場合「list」を出力する器となっています。
//ここで設定したテンプレに応じてv-bind:todoで設定したデータが出力されます。
props: ['todo'],
template: '<article><h2>{{ todo.title }}</h2>{{ todo.text }}</article>'
})
//以下は前回もやったforと一緒の仕組を使っています。
var app = new Vue({
el: '#app',
data: {
joblist: [
{ id: 0, text: 'テキストテキストテキストテキストテキストテキスト',title:'タイトル' },
{ id: 1, text: 'テキストテキストテキストテキストテキストテキスト',title:'タイトル' },
{ id: 2, text: 'テキストテキストテキストテキストテキストテキスト',title:'タイトル' }
]
}
})
</script>
.articleArea{
max-width:680px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
}
.articleArea article{
border:1px solid #c2c2c2;
padding:20px;
box-sizing: border-box;
margin-bottom:20px;
}
.articleArea h2{
border-bottom:1px solid #c2c2c2;
padding-bottom:15px;
margin-bottom:15px;
}
なんとなく、流れはお分かり頂けたでしょうか。
ポイントはcomponent ( テンプレート ) とデータが完全に分かれていることです。
データとテンプレートを別々に作り、HTMLで出力する際に融合させます。
これで完全にデータとデザインを切り分けて管理できます。
従来のように、データ出力の度にソースコードを書く必要がありません。
管理と利便性の面から見ても、大きく向上します。