Vue.js勉強記録その3 コンポーネントを使おう section3-1

Vue.js3超入門

こちらの本を、絶賛勉強中。

勉強の記録を残します。今回から、長くなりすぎない様にsection毎に記事を残します。

■コンポーネントの基本をマスター

・コンポーネントってなに？

コンポーネントに関して説明されています。再生利用可能な「部品」という表現がされています。とりあえず今のところ、xdのコンポーネントと同じ様なものだと認識しています。あってるかな？

・コンポーネントの定義と利用

アプリケーション.component(名前 , {設定情報})

こんな感じで設定する。そうすると、HTML上で、

<名前 />

こんな感じで呼び出せる。
内容は、設定情報に書いていく。

・helloコンポーネントを作ってみる

以下がコードです。テキストに比べて、若干アレンジしています。

<h1 class="bg-secondary text-white display-4 px-3">Vue3</h1>
<div id="app" class="container">
   <p>{{message}}</p>
   <div>
       <hello name="Taro" pref="千葉県" favorit="猫" />
   </div>
   <div>
       <hello name="Hanako" pref="神奈川県" favorit="犬" />
   </div>
</div>

<script>
   const appdata = {
       data() {
           return {
               message: '※コンポーネントを表示する',
           }
       }
   }
   let app = Vue.createApp(appdata);

   app.component('hello', {
       props: ['name', 'pref', 'favorit'],
       data() {
           return {
               message: 'これは新しいメッセージです。'
           }
       },
       template: `
<p class="alert alert-primary">
Hello、{{name}}。あなたは、<span class="mark">{{pref}}</span>に住んでいます。<br>
あなたは、{{favorit}}が大好きです。
</p>
`
   });

   app.mount('#app');
</script>

app.component('hello',{ 略})の部分で、コンポーネントを定義している。

propsは、使う属性。配列で定義する。ここでは、nameとprefとfavoritを使う様にしている。

templateの中が、実際に表示されるHTML。{{}}でくくって、属性を指定してある。

<p class="alert alert-primary">
    Hello、{{name}}。あなたは、<span class="mark">{{pref}}</span>に住んでいます。<br>
    あなたは、{{favorit}}が大好きです。
</p>

この部分の{{}}の中が、

<hello name="Taro" pref="千葉県" favorit="猫" />こ

こう書いた時、nameにTaro、prefが千葉県、favoritが猫に置き換わる様になっている。

■まとめ

このSectionでは、まずは簡単なコンポーネントを作りました。少しだけテキストの内容をいじってみました。

次からはv属性がまた出てくるらしいです。頑張ろう。