コンポーネント (Vue.js)

コンポーネントとは

・ページを構成するUI部品のことです。

・テンプレートとそのロジックから構成されます。

・よく使う機能をコンポーネント化することで再利用性が高くなったり、コードの見通しがよくなることで、開発効率の改善に繋がります。

 

 

構文

Vue.component(コンポーネントの名前, コンポーネントの定義情報)

 

 

Hello! と表示するUIパーツをコンポーネントを使用して作成し、ページ内で使い回しできるようにします。

 

 

index.html

<div id="app">

    <hello-component></hello-component>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

 

index.js

Vue.component('hello-component', { 

      template: '<p>Hello</p>'

)

var app = new Vue({

  el: '#app'

})

 

ブラウザ

gyazo.com