Vue.js

Vue.js 3 components are a mechanism for defining reusable, independent UI parts that help divide and efficiently manage the code of an application.

components

　Vue.jsのコンポーネントは、再利用可能な独立した UIのパーツです。例えば、ヘッダー、フッター、ボタンなどをコンポーネントとして作成し、必要な場所で再利用できます。これにより、コードの保守性が向上し、複雑な UIを管理しやすくなります。

HTML

<div id="app">
	<my-component></my-component>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
	<!-- JavaScript code here -->
</script>

JavaScript

const MyComponent = {
	template: `<div>Hello from MyComponent!</div>`
};

const app = Vue.createApp({
	components: {
		'my-component': MyComponent
	}
});

app.mount('#app');
MyComponent
templateで HTMLの部分を定義しているシンプルなコンポーネントです。
components
Vueアプリケーションの中で使用するコンポーネントを登録しています。
app.mount('#app')
Vueインスタンスを #appという IDが付けられた要素にマウントします。

　このように、コンポーネントを使うことで Vue.jsのアプリケーションのコードを分割し、管理しやすくすることができます。