Vue.js

The `data` in Vue.js is a property that defines a data object managed reactively within the component, allowing that data to be used in the template.

data

　Vue.jsの dataプロパティは、Vueコンポーネントのインスタンスに関連付けられたデータオブジェクトを定義するために使用されます。これにより、テンプレート内で使用する変数やプロパティを宣言し、それらをリアクティブに管理することができます。Vue.js 3では、dataプロパティは関数として定義され、その関数はコンポーネントが作成されるたびに呼び出されます。

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">
	{{ message }}
</div>
<script>
	<!-- JavaScript code here -->
</script>

JavaScript

const { createApp } = Vue;

createApp({
	data() {
		return {
			message: 'Hello, Vue 3!'
		}
	}
}).mount('#app');
CDNをインクルードする
Vue.js 3のCDNをHTMLファイルにインクルードします。
HTMLテンプレート
id="app"を持つ div要素を作成し、ここに Vueアプリケーションをマウントします。
Vueアプリケーションの作成
createApp関数を使って新しい Vueアプリケーションを作成し、data関数を定義します。この関数は、コンポーネントが作成されるたびに呼び出され、オブジェクトを返します。このオブジェクト内のプロパティは、テンプレート内でリアクティブに使用されます。
アプリケーションのマウント
mount('#app')を呼び出して、Vueアプリケーションを id="app" の要素にマウントします。

　これにより、{{ message }}プレースホルダーは、data関数で定義した messageプロパティの値で置き換えられます。結果として、ブラウザには「Hello, Vue 3!」というメッセージが表示されます。

{{ message }}

　このように、Vue.jsの dataプロパティを使用することで、コンポーネントの状態を簡単に管理し、テンプレートにバインドすることができます。