Vue.jsのコンポーネントについて学んでみた

はじめに

vue.jsでは、コンポーネントとしてHTMLをまとめて部品化して、再利用することができます。

この記事では、vue.jsでコンポーネントを作る基礎について書いていきます。

こちらの「chapter12」を参考にしました。

コンポーネントを使用した結果

コンポーネントを使用すれば、以下のように、同じHTMLでテキストだけを変えたものを簡単に増やすことができました。

ブラウザ
出力されたHTML

簡単に増やすことができた

例えば、vue.jsで以下のようにデータを追加するだけで、コンポーネントのインスタンスを増やすことができました。

myArray:['1つ目','2つ目','3つ目','4つ目','5つ目','6つ目','7つ目','8つ目','9つ目','10つ目']
ブラウザ
出力されたHTML

ソースコード

先ほどの事例のソースコードはこちらです(一部省略してます)。

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");
ブラウザ
出力されたHTML

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

投稿ID : 5979