【Vue.js入門】06_コンポーネント入門

Vue.js入門第6回。コンポーネントの解説をします。

コンポーネントとは

コンポーネントはページを構成するUI部品でテンプレートとそのロジックから構成されます。Vue.jsではコンポーネントを組み合わせて画面を構築していきます。

また、よく使う機能をコンポーネント化することで再利用性が高くなり開発効率の向上につながります。

Vue.jsに限らずBEMのBlockなどコンポーネントと表現されるものがありますが、同じような概念です。

ソースコード

解説

JavascriptはVueのコンポーネント登録しています。
Hello Componentというp要素を、'hello-component'という名前で登録しています。

Vue.component('hello-component', {
    template: '<p>Hello Component</p>'
})
new Vue({
    el: '#app
})

HTMLでは、登録したコンポーネントを3つ表示させています。

<div id="app">
    <hello-component></hello-component>
    <hello-component></hello-component>
    <hello-component></hello-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>

まとめ

部品単位でコンポーネントを定義しそれらを組み合わせて画面を構築していきます。複雑な画面でも小さいかたまりの集合と考えると整理できてわかりやすいです。

なお、app.jsにコンポーネントを実装しましたが、コンポーネント単位でvueファイルに切り出すのが一般的です。別途まとめたいと思います。

えず

東京でフリーランスのWebエンジニアやっています。今はPHPとGoをメインに、プライベートでは広く浅くをモットーにフロント〜インフラまで学習しています。当面の目標はDevOps寄りのオールラウンダー。