Vue.js

The `template` in Vue.js is the HTML structure used to define the display content of a component.

template

　templateは、Vueコンポーネントの HTML構造を定義するために使用されるプロパティです。コンポーネントがどのように表示されるかを記述するために、通常は HTMLタグとともに使用されます。

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>

CSS

p {
	font-size: 2em;
	font-weight: bolder;
	margin: 1rex auto;
}

JavaScript

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

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" の要素にマウントします。

補足説明

templateの役割
templateは、コンポーネント内の dataや methodsで定義されたデータや関数を利用して、どのように HTMLを描画するかを指定します。
{{ }}
template内では、{{ message }}のようにデータバインディングを利用して、dataで定義したデータを表示します。

注意点

　templateプロパティはコンポーネントごとに一つのルート要素（例: <div>や<h1>）で包まれる必要があります。

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