2022.11.11（更新日: 2022.12.02）
Vue.jsのコンポーネントについて学んでみた
はじめに
vue.jsでは、コンポーネントとしてHTMLをまとめて部品化して、再利用することができます。
この記事では、vue.jsでコンポーネントを作る基礎について書いていきます。
こちらの「chapter12」を参考にしました。
コンポーネントを使用した結果
コンポーネントを使用すれば、以下のように、同じHTMLでテキストだけを変えたものを簡単に増やすことができました。
簡単に増やすことができた
例えば、vue.jsで以下のようにデータを追加するだけで、コンポーネントのインスタンスを増やすことができました。
myArray:['1つ目','2つ目','3つ目','4つ目','5つ目','6つ目','7つ目','8つ目','9つ目','10つ目']
ソースコード
先ほどの事例のソースコードはこちらです（一部省略してます）。
HTML
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<my-component v-for="(item, index) in myArray" v-bind:my-name="item" >
</my-component>
</div>JS
var MyComponent = {
template: '<p class="my-comp">{{ myName }}のコンポーネント</p>',
props: {
myName: String
}
}
Vue.createApp({
data() {
return {
myArray:['1つ目','2つ目','3つ目','4つ目']
}
},
components: {
'my-component': MyComponent
}
}).mount("#app");HTMLがブラウザに出力されるまでに行われていること
vue.jsの機能を使用して書かれたプログラムが、vue.jsに解釈されて、最終的なHTMLがブラウザに出力されるまでについて書いていきます。
vue.jsのコアファイルの読み込み
まずは、vue.jsを動かすためのコアファイルがCDNで読み込まれます。
HTML
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<my-component v-for="(item, index) in myArray" v-bind:my-name="item" >
</my-component>
</div>DOMの取得
DOMとは、ブラウザが解釈するHTML要素のことです。
idがappのDOMを取得します。
HTML
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<my-component v-for="(item, index) in myArray" v-bind:my-name="item" >
</my-component>
</div>JS
var MyComponent = {
template: '<p class="my-comp">{{ myName }}のコンポーネント</p>',
props: {
myName: String
}
}
Vue.createApp({
data() {
return {
myArray:['1つ目','2つ目','3つ目','4つ目']
}
},
components: {
'my-component': MyComponent
}
}).mount("#app");コンポーネントの読み込み
名前は、HTMLではケバブケース(a-bみたいな感じ）、JSではキャメルケース（aBみたいな感じ）で記述します。
HTML
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<my-component v-for="(item, index) in myArray" v-bind:my-name="item" >
</my-component>
</div>JS
var MyComponent = {
template: '<p class="my-comp">{{ myName }}のコンポーネント</p>',
props: {
myName: String
}
}
Vue.createApp({
data() {
return {
myArray:['1つ目','2つ目','3つ目','4つ目']
}
},
components: {
'my-component': MyComponent
}
}).mount("#app");配列の値が繰り返し取り出される
v-forディレクティブで、配列の値が繰り返し取り出されます。
HTML
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<my-component v-for="(item, index) in myArray" v-bind:my-name="item" >
</my-component>
</div>JS
var MyComponent = {
template: '<p class="my-comp">{{ myName }}のコンポーネント</p>',
props: {
myName: String
}
}
Vue.createApp({
data() {
return {
myArray:['1つ目','2つ目','3つ目','4つ目']
}
},
components: {
'my-component': MyComponent
}
}).mount("#app");配列の値がコンポーネントに渡される
配列の値（item） が、my-nameとして、コンポーネントに渡されます（HTMLのmy-nameは、JSのmyNameと同じ意味です）。
HTML
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<my-component v-for="(item, index) in myArray" v-bind:my-name="item" >
</my-component>
</div>JS
var MyComponent = {
template: '<p class="my-comp">{{ myName }}のコンポーネント</p>',
props: {
myName: String
}
}
Vue.createApp({
data() {
return {
myArray:['1つ目','2つ目','3つ目','4つ目']
}
},
components: {
'my-component': MyComponent
}
}).mount("#app");値が渡されたテンプレートが繰り返し表示される
これまでの処理を受けて、値が渡されたテンプレートが、ブラウザに繰り返し表示されます。
JS
var MyComponent = {
template: '<p class="my-comp">{{ myName }}のコンポーネント</p>',
props: {
myName: String
}
}
Vue.createApp({
data() {
return {
myArray:['1つ目','2つ目','3つ目','4つ目']
}
},
components: {
'my-component': MyComponent
}
}).mount("#app");
コメントを残す