見出し画像

そうだ！Vue.jsを使ってみよう！ - 3

donguri

コンポーネントによる構成を見ていきます。使い回しができるコードを作っていきます。

「小さく、自己完結的で、（多くの場合）再利用可能なコンポーネント」を組み合わせることで、大規模アプリケーションを構築することが可能になります。アプリケーションのインターフェイスについて考えてみると、ほぼすべてのタイプのインターフェイスはコンポーネントツリーとして抽象化することができます

基本です。

<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>"

と解釈されて描画されます。これは表示させた部分をインスペクタでみるとわかります。

画像1

最後にこれを実行させるコードが

new Vue({
el: '#app'
})

となっていて、HTMLの

<div id='app'>
</div>

の部分を認識して表示部分をスクリプトで書く変えます。

今回の場合は"app"という文字で関連付けをします。

<div id='app'>
コンポーネントの記述。
</div>

実際に定義したコンポーネントを入れ込むと

<div id='app'>
   <sample></sample>
   <sample></sample>
</div>

となり、実行して表示させたものが、

画像2

と表示されます。

この記事が気に入ったらサポートをしてみませんか？