Vue.js勉強記録その3 コンポーネントを使おう section3-1
こちらの本を、絶賛勉強中。
勉強の記録を残します。今回から、長くなりすぎない様に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属性がまた出てくるらしいです。頑張ろう。
この記事が気に入ったらサポートをしてみませんか?