【Vue.js】HTMLをコンポーネント化しよう！【template】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

Vue.jsの解説シリーズです。

今回はHTMLのコンポーネント化について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

HTMLをコンポーネント化しよう!

コンポーネント化とは

HTMLを部品化して、再利用出来るようにすることです。

templateとは

コンポーネントを管理するためのプロパティです。

■ templateの構文

app.component("任意のテンプレート名", {
    template:`
        // この部分に部品化したいHTML要素を記述
    `
});

■ HTMLでコンポーネントを読み込む

<任意のテンプレート名></任意のテンプレート名>

実際に作ってみよう！！

固定されたHTMLをコンポーネント化しよう！

<div>こんにちは、サメハックです！</div>
<div>こんにちは、サメハックです！</div>
<div>こんにちは、サメハックです！</div>

上記のような、HTMLファイルを部品化してみましょう

See the Pen Untitled by samehack (@samehack) on CodePen.

このように、Vue.jsではtemplateに記述したHTMLをコンポーネント化して
好きに呼び出す事ができます！

引数 Props を使おう！

<div>こんにちは、サメハックです！</div>
<div>こんにちは、いぬハックです！</div>
<div>こんにちは、ねこハックです！</div>

このように、一部分だけ異なるテキストを持つHTMLをコンポーネント化するためには
propsというプロパティを使います。

propsとは引数を受け取るためのプロパティです。

■ templateの構文

app.component("任意のテンプレート名", {
    // 受け取る引数
    props:["引数名"]
    template:`
        // {{引数名}}   で引数を使用できる
        // 受け取った引数を使いつつ、部品化したいHTML要素を記述
    `
});

■ HTMLから引数 props を渡す

<任意のテンプレート名 引数名=値></任意のテンプレート名>

■ HTMLから複数の引数 props を渡す

<任意のテンプレート名 引数名1=値 引数名2=値></任意のテンプレート名>

See the Pen componentで部品化 by samehack (@samehack) on CodePen.

動的なデータを引数として渡そう！

もちろん、Vueで管理しているdataを引数として渡すことも可能です！

■ HTMLから引数 props を渡す

<任意のテンプレート名 v-bind:引数名=値></任意のテンプレート名>

See the Pen componentで部品化 propsを使う by samehack (@samehack) on CodePen.

このように記述することで、Vueで管理しているデータを渡して
コンポーネントを使うことができます！

おまけ：問題

<div>みなさんおはようございます、サメハックです！</div>
<div>みなさんこんにちは、いぬハックです！</div>
<div>みなさんこんばんは、ねこハックです！</div>

上記のHTMLをコンポーネント機能を使って表示してください

まとめ

おまけの答え

See the Pen componentで部品化 propsを使う_dataを引数で渡す by samehack (@samehack) on CodePen.

このようになります。

ポイントはv-forを使う点と引数を2つ渡すことです。

【Vue.js】ループ処理をつくろう！【Vue 3】

この記事を読むと・・・ Vue.jsを使ったループ処理の書き方が理解できる

samehack.com

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram