コンポーネント (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'
})
ブラウザ