Vue.js

The `mount` method in Vue.js is used to attach the created Vue application to a specified HTML element for display.

mount

　mountは Vueアプリケーションを HTML要素に紐付けるためのメソッドです。Vue.js 3では、アプリケーションを作成する際に createAppメソッドを使用し、その後 mountメソッドを使って、Vueインスタンスを特定の DOM要素に関連付けます。

Sample

HTML

<!-- 開発環境向け -->
<head>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<!-- 本番環境向け -->
<head>
	<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>

HTML

<div id="app"></div>
<script>
	<!-- JavaScript code here -->
</script>

JavaScript

const app = Vue.createApp({
	data() {
		return {
			message: 'Hello Vue 3!'
		};
	},
	template: '<p>{{ message }}</p>'
});

app.mount('#app');
CDNをインポートする
まず、CDNから Vue.js 3をインポートします。指定の CDN URLを <script>タグに記述します。
HTMLにマウントする要素を指定
マウントしたい DOM要素を HTMLに用意します。たとえば、<div id="app"></div>のように、id属性を持つ要素を用意します。
Vueアプリケーションの作成
createApp関数を使って新しい Vueアプリケーションを作成し、data関数を定義します。この関数は、コンポーネントが作成されるたびに呼び出され、オブジェクトを返します。このオブジェクト内のプロパティは、テンプレート内でリアクティブに使用されます。
アプリケーションのマウント
mount('#app')を呼び出して、Vueアプリケーションを id="app" の要素にマウントします。

　このように、Vue.js 3を CDNから利用する場合でも、簡単に Vueアプリケーションを作成し、特定の HTML要素にマウントすることができます。