そうだ!Vue.jsを使ってみよう! - 3
コンポーネントによる構成を見ていきます。使い回しができるコードを作っていきます。
「小さく、自己完結的で、(多くの場合)再利用可能なコンポーネント」を組み合わせることで、大規模アプリケーションを構築することが可能になります。アプリケーションのインターフェイスについて考えてみると、ほぼすべてのタイプのインターフェイスはコンポーネントツリーとして抽象化することができます
基本です。
<div id='app'>
<sample></sample>
<sample></sample>
</div>
というHTMLに対して、使い回しのコードを定義していきます。
Vue.component('sample', {
data() {
return {
msg: 'Hellow Vue!!'
}
},
template: '<div>{{ msg }}</div>'
})
new Vue({
el: '#app'
})
'sample'という名前でをつけます。これがコンポーネント名になり、この名前で呼び出すことになります。
内容はというと、以下となっていて、
data() {
return {
msg: 'Hellow Vue!!'
}
},
template: '<div>{{ msg }}</div>'
data() では"msg"の定義、テンプレートを定義します。まずはHTMLタグを定義します。"template:"として、
"<div>{{ msg }}</div>"
となっています。
{ msg }部分ですが他のところで"msg"を定義します。"data()"として、
data() {
return {
msg: 'Hellow Vue!!'
}
ここまでが"Vue"のコードです。そして表示部分として、
<sample></sample>
と書くことで"<div>{{ msg }}</div>"が表示されます。実際実行すると、
"<div>Hellow Vue!!</div>"
と解釈されて描画されます。これは表示させた部分をインスペクタでみるとわかります。
最後にこれを実行させるコードが
new Vue({
el: '#app'
})
となっていて、HTMLの
<div id='app'>
</div>
の部分を認識して表示部分をスクリプトで書く変えます。
今回の場合は"app"という文字で関連付けをします。
<div id='app'>
コンポーネントの記述。
</div>
実際に定義したコンポーネントを入れ込むと
<div id='app'>
<sample></sample>
<sample></sample>
</div>
となり、実行して表示させたものが、
と表示されます。
この記事が気に入ったらサポートをしてみませんか?